Accordions

Accordions simplify pages with long content & minimize scrolling. They reduce visibility & increase interaction cost.

An accordion is made up of:

Accordions are a type of progressive disclosure. → control & freedom

Benefits:

Reduce clutter & cognitive load
Minimize scrolling
Give an overview of the page: so users can quickly find what they need on the page
Improve scannability: accordions help organize info in chunks, digestible sections

Usability issues:

Fragment access to info: if users need to access to info from most or all accordions → interrupt interaction → loss of context. This problem can be worse if an accordion auto closes when another is opened.
Increase interaction cost: scroll, scan headings, decide which one to expand, target the click, wait for content to appear can be burdensome.
Compromise discoverability: users may miss valuable hidden content, especially when headings aren’t descriptive enough.

Considerations:

Make sure accordions are accessible for keyboard & screen-reader users. → heading should function as button; screen readers announce state change when opened/collapsed; when collapsed, hidden content should be unreachable visually & programmatically.
Accordions are not optimized for printing. Users must expand all to print, or when one auto-closes when another is opened, it is cumbersome. Consider adding Expand All button or expand automatically at print preview.
Audience’s needs: common & critical use cases? Can they find answers more efficiently?
Your content: Fit accordion style? Alternative navigation tools or design patterns?

When to use:

Users only need a few info on the page.
Main task is a logical, step-by-step process: simplify multi-step flows & make it less overwhelming for users. eg. Checkout steps - Shipping address, gift options, payment methods
Info in each section is independent & don’t need simultaneous access to multiple sections: FAQs, product details
Long content, small window size: mobile devices

When to avoid:

Users want most or all content on the page to find answers: eg. Application Requirements page for students
Little content on page: accordions make page empty & seems like there’s no valuable info → users abandon the page
Content has deep hierarchy with multiple sublevels: confuse users → alternatives can be tabs or vertical local navigation
Content is scattered & hard to summarize: hard to find headings that can convey what is hidden
Continued flow of reading: news articles, narratives

Considerations when implementing:

Heading accrurately reflects content: impact findability, discoverability, accessibility
Visual design indicates that accordion can be expanded: caret, plus icons
Both heading & icon are clickable
Allows open/collapse multiple sections at a time. Consider Expand All or Collapse All
Avoid hiding crucial info within collapsed panels

Design recommendations

Using the caret icon seems to be the safest choice for mobile menus.
Don’t have icons & text labels link to different actions because users may tap on both the text label and the icon to open the accordion.
If a menu item links directly to a landing page, don’t put a right-aligned icon as it confuses with opening a submenu accordion.