An accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.
Accordions can be useful when used judiciously for some top level navigation, particularly on mobile devices.
But accordions can problematic for a range of reasons:
- URL's do not reflect the state of accordions on the page (i.e. which accordions were open when you select the URL).
- When arriving from a Google search, all the accordions are closed, forcing users to search the accordions for the target content. This increases the interaction cost by requiring people to decide on topic headings.
- Hiding content behind navigation diminishes people’s awareness of it.
- Accordions can be problematic for CMS editors and content contributors to use.
- The assumption that users don't like scrolling on long pages is a myth.
We are seeing an over-use of accordions based on the assumption that they make pages work better. But the evidence is that this is not necessarily the case, and the negatives outweigh any perceived advantages.
The recommendation is that we don't use accordions for content pages, but that we do use regular page layout comprising of simple headings and paragraphs.
If you have a requirement to deploy accordions on your site please contact the WebTeam to discuss.