Survey: When is an Accordion not an Accordion?

By YUI TeamMarch 23rd, 2009

example of an accordionI’m looking for feedback from people who have designed or built an interface using an “accordion” module (or are considering doing so). You see, I’ve been working on a design pattern for accordion modules, and I’d like to throw out a handful of open questions to the community via this brief survey. I’ll be listening elsewhere as well, on twitter (@mediajunkie) and on mailing lists where web designers and developers hang out.

(I realize this is not a scientific survey. I’m just interested in engaging the wider community in a discussion instead of trying to impose my view or Yahoo!’s view on the community as authoritative.)

Everywhere I go lately, it seems that interaction designers and web developers are talking about accordion widgets and debating about what makes an accordion an accordion. Not everyone working in this field has heard the term (some may simply refer to “stacked panels” or “collapsible panels”) but most get the gist fairly easily. Ironically, none of the UI elements described as accordions share the actual behavior of a real-world accordion (the musical instrument): namely, that stretching an accordion opens all the folds evenly.

Accordions have been an on-and-off topic of discussion on the main IxDA mailing list; we discussed them in our Pattern Library workshop in Vancouver earlier this month, and there’s been an ongoing discussion about accordions on our internal designer mailing list here at Yahoo!.

So I sat down with some folks from the YUI team (and Marco, the maker of an experimental YUI accordion widget) a little while ago to sort through a draft of an accordion pattern that might help inform the development of an official YUI component.

Broadly speaking, most people agree on what we’re talking about when we talk about an accordion interface element. Everyone agrees that accordions are used to compress content into a limited space and that they consist of panels that can collapse or expand. Beyond this, there are a number of subtle nuances that not everyone agrees on.

One trend I’ve noticed is that front-end developers tend be agnostic about how the accordion should work, viewing it as really just a variant on a tree widget. Designers tend to be more prescriptive, saying that to be an accordion it must behave in thus and such a way (but not all designers agree on what these rules are).

In the end, the YUI folks will produce code that can be made to do just about anything. We aren’t going to try to impose our own taste or preferences in design through the functionality of the code itself. However, we will use the associated pattern to make suggestions and recommendations drawn from the experience of the entire design community, and we will probably lobby for default behaviors that match what most people expect.

So, if you’ve got a few minutes and an opinion, please visit the survey and let me know what you think!

I’ll close the survey on April 30.

6 Comments

  1. Isn’t accordion just a type of tabbed interface?

  2. Perhaps. Is it just a different skin for a tabbed interface (or for a tree)? That’s the kind of question I’m trying to get opinions on. Take the survey, please!

  3. Nick Purvis said:
    March 24, 2009 at 3:34 pm

    FYI I tried filling out this survey in Firefox on OSX and it kept returning me to previous steps/dropping content.

  4. Sorry about that, Nick. I hope another browser worked for you.

    Note that the survey was closed automatically when 100 people responded but I have just upgraded the account to reopen it, so if you tried to respond before and gave up, please come back and try again. Thanks!

  5. I think that an accordion is different than a tabbed interface in that you can see the content of one tab at a time.

    An accordion – which I actually call collapsible panels – can have more than one panel open at a time. All can be closed, all can be open or some/one can be open.

    It is too restrictive to only allow one panel at a time to be open (sometimes people may want to compare contents) or to require them all to be open (mimicing the behavior of a real world accordion) or closed.

    I left comments in the survey as well.

  6. [...] pattern will be the first guinea pig for this process, as we already published a survey through the YUI blog to solicit community [...]