The accordion block provides a vertical list of headings that reveal or hide additional content associated with them when selected.

The accordion block is useful for giving users control over the content of the page by expanding a relevant section or deferring a section for later.

But an accordion also forces the user to put more work into finding the content they’re looking for. They have to find a heading that seems to pertain to what they’re looking for and then select it to find out. It can increase frustration if the user has to open and close multiple tabs to finally find what they came for.

Advantages and Disadvantages

There are several advantages to using accordions on pages with a lot of content:

  • Reduces scrolling by collapsing content.
  • Accordion headings serve as a sort of table of contents for the page. This helps users form a mental model of the page content.
  • On some pages, accordions can be a better alternative to within-page links (also called “jump links” or “anchor links”). People expect links to take them to a different page. Within-page links break this expectation.

The are also important disadvantages to using accordions, most stemming from usability issues:

  • Forcing people to select headings in order to see content can be cumbersome. If users will need to open the majority of panels on a page then an accordion is a bad choice for that page.
  • Accordions increase interaction cost. As researchers at Nielsen Norman Group, a global industry leader in user experience, have found, users “treat clicks like currency: they don’t mind spending it if the click is worthwhile and has value.” But they become irritated when they select multiple elements and can’t find what they’re looking for.
  • Hiding content in an accordion can lead people to miss it entirely. People don’t read carefully on the web. Unless you use concise, descriptive headings users are likely to miss the hidden content entirely.

Summary: 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. Always carefully consider why you need an accordion and whether making the content more concise would work better.

Before using an accordion you must weight these advantages and disadvantages to guarantee an accordion is the best solution for the content on your page.

Good Conditions for an Accordion

When users only need a few specific pieces of content on a page or in a section of a long page. An example of this is something like a question-and-answer page page where a user is likely to only want to see a handful of answers to specific questions that are relevant to them.

When to Use Something Else

When your audience needs all or most of the content on the page. As long as the content is relevant and well structured you shouldn’t worry too much about page length (within reason). As industry research shows, people will happily scroll as long as the content is related, relevant, and formatted for the web. And they are likely to be frustrated if you seem to have unnecessarily hidden the content they needed just to make a very short page.

Alternatives: Edit your content to be more concise and easy to scan. Structure content into sections with brief, descriptive headings.

When there is too much content in the accordion panels. If a site visitor would have to scroll very much to see all of the content under the accordion panels then you need to find a different layout solution.

Alternatives: If there’s too much content under a panel you can either shorten it or consider making it a separate page.

When there is not enough content to condense. If your page is already relatively short then you don’t gain anything by making users decide what headings to select.

Alternatives: None, you’re already done.

When your page is extremely long and would create too many panels to be easily digested. In this case you’re trading one problem (an overly long page) for another (an overly dense list of text that requires user interaction).

Alternatives: Try a different layout, such as breaking up the content into several more readable pages. (But avoid the temptation to create many tiny pages [guide coming soon].)

Resources