Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've been using Accordion controls in many design situations...

I find them useful for:

  • Progressive disclosure of long wizards (reduces number of pages)
  • Questionnaires where you want to be able to show answers or exit quickly (see diagram below)
  • Checkouts e.g. www.johnlewis.com

I wonder why these patterns are not more popular. I can see the advantages... what are the disadvantages?

A question on UX SE recently mentioned that such controls are falling out of favour... is that true? If so what are the alternative design patterns?

enter image description here

UPDATE Found some interesting information in the question tabs vs accordions. But doesn't address disadvantages of this technique.

UI Patterns have some useful things to say about accordion controls. I also liked Rahuls answer on the "How to handle a very long accordion" question.

share|improve this question
3  
Falling out of favor where? I don't recall these ever being extremely common, probably less common than the tabbed form format. Not sure I've ever heard that they're "bad". –  Ben Brocka Jul 3 '12 at 18:32
    
A question on here stated it a few days ago... wanted to know where it came from... or if it were true... Also want to understand ... what are the disadvantages of these methods... I can see the advantages.. Why are they not more common... ? Edited question to reflect this.. –  Lisa Tweedie Jul 3 '12 at 18:39
1  
I think they haven't been traditionally common due to limitations of 'enterprise systems'. At least, that's been my experience ;) –  DA01 Jul 3 '12 at 18:59
    
Ahh the technical constraint... yes very likely.. –  Lisa Tweedie Jul 3 '12 at 19:01
1  
When designing a UI for guitar users. –  Danny Varod Jul 7 '12 at 2:01

6 Answers 6

up vote 18 down vote accepted
+50

I don't think accordions are falling out of favour and while I haven't seen them being used as commonly as tabs, they are still used on some prominent sites.

Here's an example of the "General Account Settings" page on facebook. enter image description here

However, there are a few disadvantages, which is why I only use accordions when the following apply:

  • If expanding a section causes a lot of scrolling, I tend to avoid the accordion, because that means the user needs to scroll and search for the next section to click and open. This can be aleviated by having a close button for each section and a "next" button for each section, if the flow proceeds in a linear fashion.

  • If the process is linear and the text in each accordion's header is quite short, then perhaps tabs might be more useful for navigating back and forth:

enter image description here

With amazon's example, the "tabs" aren't clickable because they want to enforce the flow of the checkout process, but if required, you can make them clickable so that users can easily go back to a previous screen.

In summary:

  • Accordions are good. They can be implemented with pure css as with stoicfury's answer. Finally, a lot of javascript frameworks come with accordion widgets: JQuery and YUI just to name a few, so implementation should be quite straight forward.

  • If the accordion contains a lot of panes, resulting in a lot of scrolling, then perhaps the accordion is not such an appropriate widget. For example, if it contains so many items, will the user have the need to go back and revisit any previous steps?

  • Accordions are good if you do not have panes or if each pane is quite small. The facebook example is a good example of the accordion being executed very well.The mockup you have posted is also a very good implementation, however, if each pane is to become more complex and involve larger forms, then the accordion wouldn't be able to cope with it too well.

share|improve this answer
    
+1 For a very thorough answer and answering the question... –  Lisa Tweedie Jul 6 '12 at 21:48
    
I liked some of the answers in this question too... ux.stackexchange.com/questions/16800/… –  Lisa Tweedie Jul 11 '12 at 11:17

As with Ben Brocka, I have not heard of it "falling out of favor". Historically, there was some initial concerns about their compatibility with certain browsers (mostly IE), but those have largely subsided (except when it comes to mobile-phone compatibility), and now you can make accordions based on pure CSS.

Format-based changes

If for some reason or other you think an accordion is not appropriate, you can either simply have a really long content section or split the content across multiple pages. If "multiple pages" exceeds about 5, you'll probably want some sort of associated navigation for each of the subpages, too.

Content-based changes

Alternatively, you can address your content. Does it really need to be that long? Is it overly wordy or verbose? Can you combine parts together? etc.

share|improve this answer
    
So with the CSS solution are we likely to be seeing more of them rather than less? –  Lisa Tweedie Jul 3 '12 at 19:01
1  
@Lisa - I doubt it will change much, as current js-based solutions have sufficient cross-browser support at this time. Their usage will continue to largely be dictated by UX needs as compatibility issues remain low / decline. –  stoicfury Jul 3 '12 at 20:15
    
@stoicfury maybe a good CSS3 polyfill could help support this for older browsers? I just came across https://github.com/EvandroLG/transitionEnd/ & https://github.com/louisremi/jquery.transition.js but I could not find any running example –  Adrien Be Apr 25 at 8:04

I will say the best would be to divide your content into groups and express it in blocks which will be simple and neat as they use it in dropbox! I cant post the image as i dont have enough reputations so check that dropbox link

Drop box my account page

share|improve this answer

In my opinion, an accordion might present problems in some situations:

  1. When it's too high. If the accordion is higher than the page, users can't see some of its options. This is likely to happen when two or more panels can be opened at a time.
  2. When it's nested inside another accordion. It doesn't work because it's confusing. If it's necessary to make subdivisions to a panel, it's better to use other patterns like tabs.
  3. When it doesn't preserve its state while navigating a web page. It can be annoying when the system doesn't remember how you left the panel the last time you used it.

More information about this pattern:

share|improve this answer

I might say it's bad practice to use an accordion with forms where information is required in multiple panels that must be validated before moving on to the next step. For example, unless there is a "save" button in each panel (like Facebook's Preferences shared here earlier), you could have multiple errors that are out of view if the user clicked a "Save and continue" button at the bottom of the page. This could potentially cause a real mess with your UI in having to display multiple errors, and mucking up the UX.

share|improve this answer

Jacob Nielsen's team have been looking into this too: http://www.nngroup.com/articles/accordions-complex-content/?utm_source=Alertbox&utm_campaign=8f701d82e8-Alertbox_email_05_19_2014&utm_medium=email&utm_term=0_7f29a2b335-8f701d82e8-24102777

One advantage of accordions over e.g. wizards is that one can use the header for a summary of the content and choices below, but wizards are better at enforcing a sequential use. so, accordions lands somewhere between wizards and tabs

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.