Accordians are popular because they allow听large amounts of content into tiny spaces on the page. Visitors may toggle between information and not leave the page.
When to use Expandables?
I like to think of expandables/accordions as content management tools. 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.听听Just be sure that each accordion component has a real purpose.听So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels 鈥� the point is to organize content in a way that makes navigation simpler than endless scrolling.
Accordions or Tabs?
Expandables can either display as expandable听accordion content (vertical links)听or as tabbed content (horizontal links). When you have a page that鈥檚 broken into dozens of paragraphs, links, images, or just too many blocks of content鈥� expandable accordions to the rescue.
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-outline 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(or anchor听links)links, which are problematic because they break people鈥檚 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.
Major Usability Issues with Expandables
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鈥檚 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鈥檛 mind spending it if the click is worthwhile and has value. However, resentment ensues when a click is considered a wasted effort; it doesn鈥檛 take many wasted clicks to escalate people鈥檚 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鈥檛 want to give.
- Hiding content behind navigation diminishes people鈥檚 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 鈥渟pend鈥� clicks on them. When content is hidden, people might ignore information.
- Accessibility听is an important consideration. Pages must be created听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 if there is not other page structure on the page.)
-
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.
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鈥檚 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鈥檛 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.
If your pages are extremely long, perhaps the accordion is not the appropriate solution. 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 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 device is twice as difficult, and the outline 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 read. Usability studies and eye tracking research show that people scroll when information is valuable and properly formatted for scanning.
Still not sure if your content would be best in an accordion or not,听sign up for听Open Labs听and听someone from the Web Express team will be happy to help.