Accordion

From Interaction-Patterns.org

Jump to: navigation, search

Contents

[edit] Accordion

Also known as:

[edit] Quick Summary

The Accordion offers a way to arrange and organize the main navigation on a website. When clicking on a section a panel opens either vertically or horizontally. Only one panel remains open at a time. Therefore, opening the next panel leads to collapsing of the previous one. Accordions originate from Macromedia applications such as Dreamweaver where they were first used.

Derivatives: Several menus are allowed to be open at the same time and it's not that opening a new panel leads to collapsing of the former panel. Conceptually this would be very similar to the Tree pattern.

[edit] Visual Examples

Found at www.asp.net Found at www.stickmanlabs.com
Found at www.apple.com. This accordion opens without clicking on the header of the section. Hovering the header is sufficient to let panel open up. Found at www.intellifit.com. Besides for navigating the Accordion can be used for FAQ's too.
Found at www.cbs.com

[edit] Examples found on the World Wide Web

[edit] Use When

  • It makes sense to use the pattern if there are more than two main sections you want the user to be able to choose from and the underlying pages consist of at least two different categories.
  • If you have more then 10 sections you may consider another pattern for the navigation as it then gets messy and disorganized.
  • Accordions are often used as part of Main Navigation or subnavigation.
    • If used for navigation it is conceptually equivalent to Tabs. Alternative to Navigation Tree.
  • Alternative use:
    • Accordions can be a good way to implement a Frequently Asked Questions (FAQ) where it opens up each question. Follow this link if you would like to know more: http://www.intellifit.com/faqs. Might be problematic if a tab has been opened already and is not closed then but instead directly going to a new one. That's irritating b/c the line slips. That's why it's more sensible to use the Accordion horizontally as in the second video example.
    • Another good use would be to manage settings. The number of panels should be less then 10.
    • An alternative way for stepping through complex forms. It provides the user with contextual information. This helps the user to orientate in the process of filling in the form. It also tells the user how much there is to go. But you may consider a Wizard as well which might be more efficient than an Accordion. This depends on the length of the form and its complexity.
    • In applications, also Web applications, for left-hand side navigation areas where you will have 3 to 4 sections.

Be aware of

  • Although accordions are often used as part of a Wizard, it's actually not supported by a Usability point of view. Why? At this point there needs to be an explanation.
  • If the seize of the panels are fixed you might have problems with those sections which only contain a few text or in contrary a lot. In both cases the elegance of your design suffers.

[edit] Possible Solutions

  • Each section has a panel, which upon clicking can be expanded either vertically or horizontally into showing its subsections. Vertical Accordion menus are the most frequently used.
  • The transition from showing no options of a headline to showing a headline’s list of options can be done either with a page refresh or with a javascript DHTML animation.
  • When one panel is clicked it is expanded, while other panels are collapsed. This part is crucial then this element is a defining element of the Accrodion.

Many different variations of the Accordions exist, both vertical ones and horizontal ones but the crucial aspects of the implementation are:

  • Only 1 panel is open at one time. If more than 1 panel is allowed to be opened it becomes like Closable Panels or Navigation Tree.
  • Users can select other panels by clicking on the panel header
  • The opening of the panel should be animated so the user gets a feedback. This supports the idea of communicating to the user what the system is doing. The animation should be subtle which means it should last no more than 250 ms.

Other recommendations include:

  • Highlight the current panel so the user can distinguish open panel headers form closed panel headers
  • Make sure the total size of the accordion can grow or shrink in size. Some implementations fix the heigt of each panel which leads to undesirable situations when panels contain only little content.

[edit] Rationale

  • Accordions can be compared to tabs with the only difference that they only allow to have open one panel at a time. Navigation Tabs are often used horizontally Accordion mostly vertically.
  • Accordion menus can however also function quite well as sub-navigation for a specific section of a website.
  • An accordion is useful for compressing many elements in a compact space. The elements can be properties, questions or simply navigation items. The downside is, of course, that most items get hidden which may not be very desirable when you use accordions for main navigation.
  • The vertical ones are quite common although they do not always animate nicely. The horizontal ones like the one used in the Xbox 360 is far less used. It is not the best solution from a classic usability perspective but it can add to the fun element of the user experience.

[edit] Questions

  • In what way will this pattern be different when used for data entry purpose like a form instead of simple navigation? It might useful to rip apart a long form.
  • If animation can't be used should this form not be used?
  • How useful is this pattern in the context of FAQ? Is it superior to the regular arrangement of a FAQ?
  • Should navigation using the keyboard up and down keys be allowed? Be even recommended?

[edit] This pattern is being used to

[edit] Source

Retrieved from "http://www.interaction-patterns.org/wiki/Accordion"
Personal tools