When to use accordions#
detailed look at when to use accordions
Definition#
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.
Rationale and benefit#
Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Giving people control is #3 on the list of the top heuristics for usable design. In theory, this concept sounds reasonably human centered.
Advantages#
- Collapsing the page minimizes scrolling.
- The headings serve as a mini-IA of the page. This allows users to form a mental model of the information available.
- Hiding (some of) the content can make the web page appear less daunting.
- Accordions can be a better alternative to within-page links, which are problematic because they break people’s mental model for hypertext links. People expect clicking a link will load a new page. Without proper cues people are confused about where they are on the site.
Issues#
- Forcing people to click on headings one at a time to display full content can be cumbersome,
- Accordionds increase interaction cost
- Hiding content behind navigation diminishes people's awareness of it
- Accessibility is an important consideration
- Printing