Accordion
The Design Need:
The user needs to navigate through a two-level interface with multiple options.
Design Examples:
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
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.
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.
More info elsewhere:
- “Accordion menu” design pattern on www.ui-patterns.com
- “Accordion” design pattern on www.welie.com
