When is it bad practice to use an accordion control?

Question

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?

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.

Answer 1

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.

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:

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.

Answer 2

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:

• In Yahoo Developer Network
• In UI-Patterns.com
• In Welie.com

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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