Design Patterns – Accordions

What is an accordion?

An accordion is a design pattern that is used for the progressive disclosure of content and a design pattern is a design solution that can be applied in a number of different contexts.

Why should I use them?

They enable the content to remain focused by displaying the most important content first. Less important content can remain easily available inside an accordion.

  • Solve the problem of what to do with too much content.
  • Allow for the progressive disclosure of information.
  • Reduces the amount of scrolling.

How to design accordions

Contextual considerations

Design patterns provide a solution framework on top of which the contextual design considerations can be applied. Context will inform two areas of design:

  • Visual design
  • Interaction design
VISUAL DESIGN

The elements of an accordion that need to be considered include the title, the expanded and collapsed accordion states and the expansion/collapse icon.

  • In a standard left-to-right interface the accordion title will be left aligned.
  • Visually it needs to be clear that the expansion icon relates to the title so in different viewports the position of the expansion icon could change to keep the visual connection.
  • The direction of the icon should serve as the indicator of the direction of movement.
  • Choice of icons could include an arrow icon pointing down, chevron icon pointing down, plus icon and a plus icon in a circle.
  • The chevron provides the clearest communication as an indicator of expected behavior as the arrow icon is sometimes used to scroll a user back to the top of the page and the plus icon and the plus in a circle icon indicate addition and expansion which could include behavior in various ways.
  • There should be a mapping between the icon and the movement of the user’s view.
  • Possible positions for the icon include left of the accordion title, right of the accordion title and aligned to the right edge of the accordion bar.
  • When the icon is placed on the right of the title the user chooses to focus more often on the icon than if it is placed on the left.
  • For comfortable tapping, the icon should be at least 44×44 pixels in size.
  • If the icon is positioned left of the accordion title on a narrow screen the user’s finger would need to stretch across the navigation area, obstructing the view. With the icon positioned on the right edge of the bar, the icon is physically more accessible using one hand without obstructing the interface.
  • Also, the icon could be larger for mobile screens for better user accessibility.
INTERACTION DESIGN
  • Both the icon and the category title can trigger expansion.
  • It is less confusing to have the space between the icon and the title trigger expansion.
  • It is best to leave sections expanded because the jumping around that occurs as a result of panels opening and closing at the same time is too busy. Alternatively, you could provide a “collapse all”/”expand all” button, which can be very helpful.
  • The icon should indicate the direction of movement.
  • Once the accordion has been expanded the icon needs to change to reflect the collapse action.

Design checklist

  • What icon will you choose to indicate expansion/collapsing?
    – Triangle
    – Chevron
    – Plus/minus icon
    – Plus/minus icon in a circle
  • Where will you place the expansion/collapsing icon?
    – Left-aligned
    – Right-in-lined
    – Right-aligned
  • Will you change the position of the icon on smaller viewports?
  • What happens if the user clicks on the category?
  • What happens if the user clicks on the space between the title and the icon?
  • Should you have a “collapse all/open all” link or button for multiple accordions?
  • Once an accordion has been expanded will it remain open once another accordion is expanded?


Reference

‘Designing the Perfect Accordion’
by Vitaly Friedman, editor-in-chief, Smashing Magazine

Downloads

Accordion template on Designthing
Accordion template on Github

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.