Accordion
Problem
The user needs to find an item in the main navigation
Solution
Stack panels vertically or horizontally and open up one panel at the time while collapsing the other panels
From
ASP net
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 Closable Panels 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
Donna's body vison, an accordian is used for displaying subnavigation without requiring a page-reload:
At
Pixellab a small accordion is used to display several recent projects in a very small area:
At
Daniel Richards 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
Kevin Hoyt: Thoughts on Accordion Usability
There is something about focusing on item in the list, that seems to make a big difference.
Dorai Thodla
www.thodla.com
Also, would you go so far as to say that this pattern should be avoided if an animation cannot be used?
http://asp.net-informations.com/ajax/ajax-accordion.htm
lmre