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:
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:

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

Also known as

Closable Panels
Collapsible Panels

Code examples

DHTML Accordion Menu 2.0 ASP.NET: Accordion Sample
Spry: Accordion Sample

plml logo

Comments

5 comments have been added to this pattern


Dorai Thodla, 30th August 2007
Ever since Google Reader has implemented Accordion interface, the usability of the reader has improved tremendously. Hopefully we will see this interface (initially as an option) in email clients, search results and other places.

There is something about focusing on item in the list, that seems to make a big difference.

Dorai Thodla
www.thodla.com
Cody Frew, 13th February 2008
Great stuff. I wonder if there are some differences in the use of this pattern depending on whether the content is for display purposes or for input purposes, such as a long form.

Also, would you go so far as to say that this pattern should be avoided if an animation cannot be used?
Joe Cotellese, 3rd June 2008
I implemented this pattern for a FAQ page at www.intellifit.com/faqs. I like the way it allows us to present all of the FAQs without having a seperate TOC and associated FAQ entries. Keeps the page small an manageable.
Zephyr, 24th July 2008
The main benefit over tabs is: horizontal space for the labels.If the labels are long, you can't get them on tabs without reducing usability in some way (scrolling tab row, double tab row, etc).
dellmre, 22nd April 2012
Ajax accordion samples with source code

http://asp.net-informations.com/ajax/ajax-accordion.htm

lmre


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha