Accordion

Tagged as: , ,
 

The Design Need:

The user needs to navigate through a two-level interface with multiple options.

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

Design Examples:

Alexcohaniuc uses a vertical accordion to show his portfolioFlandersinshape uses a horizontal accodion to provide access to the different parts of the website.

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

Design Solution:

Vertically stacked panels are often used to show submenu items. If larger content areas are needed, horizontal panels are better.

  • Place the subsections of content in different panels that are clearly labelled and placed on top of each or next to each other.
  • Allow users to open and close panels easily. Use clear indications that panels can be opened and closed.
  • If one section is opened, the other panels are closed.
  • Use a transition that the user will notice when panels are opened or closed

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

When to use:

  • If you have too many options to list in a normal vertical menu but want to show all options.
  • Do not use if there are more than two levels in the main navigation.
  • If you want more than one section to be open at a time you should use the closable panel design pattern.

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

Why use this solution (rationale):

Accordions help to place many items in a limited space and provide easy access to every item. Keep in mind that the sub-items are hidden until the user opens the section.

Horizontal accordions are the least common version and do not function well as a navigation menu if the sections contain many subsections. In a structure with few or no subsections they can be an original alternative for tabs.

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

More info elsewhere:

Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.

• Categorized as Design Patterns