Accordion Landscape Analysis

[NNG]

NNG-Accordions are Complex

NNG-Accordions on Mobile

Longer pages can benefit users. Accordions shorten pages and reduce scrolling, but they increase the interaction cost by requiring people to decide on topic headings.

Usability Issues

• Forcing people to click on headings one at a time to display full content can be cumbersome, especially if there are many topics on the list that individuals care about.
• Accordions increase interaction cost.
• Hiding content behind navigation diminishes people’s awareness of it.
• Accessibility is an important consideration.
• Printing is another consideration that a reader correctly points out.

Criteria for Applying Accordions

• Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it.
• Accordions are more suitable when people need only a few key pieces of content on a single page.
• Another situation in which accordions are helpful is when the information is restricted to very small spaces, such as on mobile devices.

Accordions may seem to be a good solution for shortening long content pages. However, in many situations when all the page content is relevant to users, it is more advantageous to show all the content at once, even if doing so results in longer pages. On the desktop it is easier to simply scroll the page than to decide on which topics to click on. Our usability studies and eyetracking research show that people scroll when information is valuable and properly formatted for scanning.

Supremo

Accordion menu

This is a vertical list of sections, each of which can expand when clicked to reveal a set of sub-sections. As one section expands, the others are collapsed. Accordion menus are great for smaller screens because they present a full range of navigation options without taking up too much space. Accordions are sometimes an alternative to navigation tabs if you need to display info vertically instead of horizontally (say if you’re designing a mobile app). They’re also an intuitive way to present FAQ’s. Tesco’s FAQ page is a great example of a wealth of info made accessible via an accordion. www.tesco.com/help/

UX Movement

• Place icons to the left of the label
• + icon is better than arrow
• + more recognized and clicked on
• Make sure to show accordion collapse / X icon best use