An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Giving people control is #3 on the list of the top heuristics for usable design. In theory, this concept sounds reasonably human centered.

jqueryui.com: This is an example of an accordion. In theory, it is a useful way to present content. By allowing people to control what content they see and what remains hidden, the information feels less overwhelming.

There are other advantages to applying accordions to long, content-rich pages:

  • Collapsing the page minimizes scrolling.
  • The headings serve as a mini-IA of the page. This allows users to form a mental model of the information available.
  • Hiding (some of) the content can make the web page appear less daunting.
  • Accordions can be a better alternative to within-page links, which are problematic because they break people’s mental model for hypertext links. People expect clicking a link will load a new page. Without proper cues people are confused about where they are on the site.

In This Article:

Major Usability Issues with Accordions

While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.

  • 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. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once. It is easier to scroll down the page than to decide which heading to click on. (Every single decision, no matter how minor or how easy, adds cognitive load.) The experience feels less fragmented with fewer attention switches.
  • Accordions increase interaction cost. Readers treat clicks like currency: they don’t mind spending it if the click is worthwhile and has value. However, resentment ensues when a click is considered a wasted effort; it doesn’t take many wasted clicks to escalate people’s reaction to full-blown defiance. Acquiring click targets, such as links and buttons, and waiting for content to appear requires work and wastes precious time that users don’t want to give.
  • Hiding content behind navigation diminishes people’s awareness of it. An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to “spend” clicks on them. When content is hidden, people might ignore information.
  • Accessibility is an important consideration. Pages and widgets must be coded with accessibility in mind, which is an added development effort. In contrast, plain text is inherently accessible (though it can definitely be too complicated for disabled users to understand, but that’s a standard writing issue which you should consider in any case.)

  • Printing is another consideration that a reader correctly points out. Accordions are often not well suited for printing documents and require people to print snippets of content at a time. Make sure to optimize your pages for printing.

Myths about Scrolling and Long Content Pages on the Desktop

Many website owners implement accordions for the wrong reasons.

  • Myth #1: Users don’t scroll long pages: Users do scroll when the content is relevant, organized properly, and formatted for ease of scanning. In fact, people prefer scrolling the page for content over pagination when the topics within that page answer the right questions. The standard scroll wheel on a mouse, arrow keys, and track pads have made scrolling much easier than acquiring click targets.
From our research report, How People Read on the Web: The Eyetracking Evidence: This example illustrates how far people read and scroll on a page where the information is relevant and properly formatted for the web.
  • Myth #2: Customers don’t read information at the bottom of the page: Our eyetracking research show that while users spend 80% of their attention on information above the page fold, they allocate 20% of it to content below the fold. Reluctance to scroll is a behavior of the past. While you should still be mindful of people’s limited attention span on websites and prioritize content wisely, you shouldn’t fear long formats. People will see the bottom if you give them good reason to go there.
  • Myth #3: People avoid pages with a lot of content: People have the ability to handle vast amounts of information, when presented properly. In our Writing for the Web courses, we emphasize the requirement for writing well, and more importantly, writing for web-based reading. Reading and scanning patterns are different between web-based and print-based content. While online users typically scan for information, it does not mean they want less information. Websites should not be information light. The same information needs to be written, structured, and presented differently.

Criteria for Applying Accordions

The best place to start when deciding to use an accordion is to evaluate common and critical use cases for your audience. Understanding people’s scenarios will help you determine whether or not accordions are appropriate. Some of the most important considerations are listed below:

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. In such cases, don’t worry too much about page length. Relevance trumps page length. Save people the hassle of clicking on links needlessly if their intention is to consume all of the content in the same session. As long as the content on a page is related, relevant, and formatted properly for the web, people will eagerly scroll the page.

NewYorkcares.org: There is not enough content here to warrant an accordion. Exposing all of the content at once might make the page slightly longer, but doing so would reveal helpful information that otherwise people will miss.

If your pages are extremely long, perhaps the accordion is not the appropriate widget. You many need a different navigational approach, such as presenting the information across several, more digestible pages. However, avoid the temptation to go extreme by cutting up content into short tiny pages.

If you do use accordions, make sure to give people the capability to open multiple sections at a time so that different chunks of content are readily available. Items that are opened or closed should remain in that state until the user changes it.

Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.

Another situation in which accordions are helpful is when the information is restricted to very small spaces, such as on mobile devices. On small screens people often stop scrolling before reaching the end of an extremely long page. If the page has several loosely related pieces of information, users often cannot guess if the information in which they are interested will be found somewhere down the page and they quit before scanning it all. In such cases, extremely long pages are detrimental to the user experience. Collapsing the information is a better alternative: it minimizes excessive scrolling and gives users an overview of the content available on the page. Reading on mobile is twice as difficult, and the mini-IA provided by the accordions helps readers understand the structure of the page and lets them focus on the relevant pieces.

Conclusion

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.