Accordion

Use when

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. Although accordions are often used as part of a Wizard I strongly recommend against it since it is worse than regular implementations from a usability point of view. Accordions can be a good way to implement a Frequently Asked Questions (FAQ) where it opens up each question. Another good use would be to manage settings. The number of panels should be small, e.g. < 10.

How

Many different variations of the Accordions exisit, 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 or Navigation Tree.
• Users can select other panels by clicking on the panel header

The vertical opening panels are usually for display sub-menu items, while horizontal opening panels are suitable for large content areas. When implementing the accordion it is important to get the following aspects right:

• Animate the opening of panels so that users get feedback about what is happening. The animation should be subtle which means that it should last no more than 250ms
• Allow navigation using the keyboard up and down keys
• 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.

Why

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. Accordions originate from Macromedia applications such as Dreamweaver where they were first used.

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.

More Examples

At the , an accordian is used for displaying subnavigation without requiring a page-reload:

At a small accordion is used to display several recent projects in a very small area:

At a horizontal accordion is used to give the site a non-conventional feel:

The XBox 360 interface also uses a horizontal accordion:

Implementation

Accordion implementations can be found in nearly every AJAX toolkit: YUI, ASP.NET, Rico, Spry

Literature