Tabs vs. Accordions: When to Use Each (3 minute video)

Accordions on Desktop: When and How to Use

While accordions can simplify long content pages and minimize scrolling, they diminish content visibility and increase interaction cost. On desktop, use accordions for content-heavy pages where users will not need to access content under several accordions.

Swimming through a sea of content and trying to find what we are looking for can feel tiresome, particularly when faced with lengthy, information-rich web pages. An accordion is a design pattern that can help mitigate the challenge.

In This Article:

• What is an Accordion?
• Benefits of Accordions
• Usability Issues Caused by Accordions
• When to Use & When to Avoid Accordions
• Consideration When Implementing Accordions
• Conclusion

What is an Accordion?

An accordion is a header that can be clicked to reveal or hide content associated with it.

An accordion is typically made up of three elements:

• Heading: A descriptive title that conveys the gist of the information contained within the accordion
• Icon: A graphic symbol that signifies the state of the accordion and whether it will expand or collapse
• Panel: The secondary content that is hidden when the accordion is closed

Accordions are a type of progressive disclosure. The heading provides a concise overview of the topic. The panel is hidden by default, offering supplementary details to those who are interested. An accordion thus empowers people to choose what to read and what to skip. It supports user control and freedom, the third of the 10 usability heuristics for user-interface design.

Benefits of Accordions

Accordions are versatile. They share similarities with anchor links, helping users navigate through page content. They also can be used to organize information in a logical manner and implement as a mini-IA of a page. The following are key advantages of accordions.

Reducing Clutter

Disclosing rich information all at once can make a page cluttered and overwhelming. Accordions display information one section at a time and hide information that is not relevant to the user. They simplify the page, lowering users’ cognitive load and allowing them to concentrate on the information immediately at hand.

Minimizing Scrolling

Users are used to scrolling, but they scroll for a purpose. Collapsing information in accordions not only shortens the page but also ensures that essential content remains visible. Accordions reduce the effort required to navigate through long pages and allow a broader range of topics within the content to remain accessible without the need for scrolling.

Conveying an Overview of the Page

Just like how animals forage for food, users navigate on the web to satisfy an information need. As soon as they land on a page, they start to look for cues that assure them they are on the right track to finding what they need. An effective webpage should promptly communicate what users can expect to find on the page and eliminate any unnecessary guesswork as it won’t take long until they decide to seek their answers elsewhere. This is where accordions can play a vital role—acting as a concise table of contents, providing users with an overview of available content without delving into details. Accordions help users form a mental model of the page, empowering them to navigate with confidence and efficiency.

Improving Scannability

Research shows that people tend to scan web pages rather than read them word by word. Therefore, web pages should accommodate this behavior by making the content easily scannable. One effective strategy is to organize information in chunks. Accordions shine in this regard as they break down lengthy content into digestible sections. Accordion headings support scanning by highlighting the main points of each chunk. This streamlined presentation enables users to process information faster and better.

Direct Access to Content

Accordions allow users to quickly access the piece of information relevant to them without having to scroll through all the preceding content. Direct access is particularly beneficial for users who are searching for specific information or are interested in only one small portion of the information on your page.

Usability Issues Caused by Accordions

Despite accordions’ ability to effectively organize information and simplify long, complex pages, their use on desktop is not always recommended. Here are some of their drawbacks.

Fragmented Access to Information

Using accordions on a content page can hinder users’ ability to access information from different content blocks. When a user needs to access information from most or all accordions, it can become tedious to have to expand each of them. Excessive clicking interrupts people’s interaction with the page. Forcing users to interact with each panel individually to access the information can lead to a loss of context when important details are scattered across different panels. Users may have difficulty connecting related information from different sections on the page.

This problem can further escalate when an accordion automatically closes when another is opened, restricting users’ ability to combine information from multiple accordions at the same time. If you expect users to need information from several accordions at once, it is better to display all the content at once (even if it results in a longer page).

Increased Interaction Cost

Each step involved in expanding the accordion—scrolling the page, scanning the headings, deciding which one to expand, targeting the click, and waiting for the content to appear—incurs a certain interaction cost. These individual substeps may seem minor, but they accumulate and can become burdensome for users.

Compromised Discoverability

Utilizing accordions to hide secondary content simplifies the page, but it also compromises the discoverability of the collapsed content. Valuable content that is hidden under an accordion may be missed altogether. Furthermore, when the heading fails to provide a descriptive and enticing preview, users are less likely to expand the accordion and might miss out on the entire section hidden beneath. This diminished discoverability undermines the effectiveness of the information contained within the accordions.

Accessibility Considerations

Plain text is inherently accessible without additional measures. In contrast, designers must make sure that accordions are accessible for keyboard and screen-reader users. To achieve this, the accordion heading should function as a button, allowing keyboard users to interact with the element. Screen readers should also announce the state change when the accordion is opened or collapsed. In addition, when the accordion is collapsed, ensure the content inside the panel is both visually hidden and programmatically unreachable to all users. Simply making the content invisible without restricting access can lead to an inconsistent user experience and confuse sighted keyboard users as they won’t be able to see what they are interacting with.

Difficulty with Printing

Accordions are often not optimized for printing. In the absence of an Expand All button or of a special implementation to optimize printing, users are required to expand each accordion individually before printing. This can be cumbersome, especially on lengthy pages with numerous accordions and extensive content.

Additionally, auto-collapse accordions that permit only one accordion to be open at a time make it impossible for users to access and print all the content on the page at once. When incorporating accordions, it is crucial to ensure that the page is properly configured to facilitate printing. Consider including an Expand All button or expanding accordions automatically at print preview.

When to Use & When to Avoid Accordions

Deciding whether to incorporate accordions into your design requires careful consideration of the tradeoffs and benefits involved. Start by considering:

• Your audience's needs: What are the common and critical use cases? Do accordions help users find answers to their questions more efficiently?
• The specific content you are presenting: Does the content structure lend itself well to accordion-style presentation? Are there alternative navigation tools or design patterns?

Based on these considerations, the following recommendations can guide your decision.

When to Use

• When users need only a few pieces of information on the page, they will likely skip most of the content. Hiding most of the content on the page helps users spend their time more efficiently by focusing on the few topics that matter.
• When the main task is a logical, step-by-step process, accordions can guide users through the process by presenting information relevant to the current step and hiding irrelevant details that can distract or overwhelm users. This approach is commonly used to simplify multistep flows, making the experience more manageable for users.
• When the information in each section is independent and users are unlikely to need simultaneous access to multiple sections, accordions can help them quickly access only the section of interest. FAQ pages and product-detail sections are good candidates for accordions.
• When the content is long and the window size is small, which is especially relevant on mobile devices, using accordions helps prioritize content display and reduce the page length.

When to Avoid

• When your audience requires the majority or all the content on the page to find answers to their questions, show all the content at once. In this case, easy access to essential information matters more than reduced page length.
• When there is little content on the page, accordions will make the page look mostly empty. Avoid using accordions to conceal information, as the absence of content can cause the illusion that there is no valuable information on the page and prompt users to abandon the page.
• When the content has a deep hierarchy with multiple sublevels, it can be too complex to be displayed in a flat-hierarchy format like accordions. Users may feel confused and lose track of where they are within the accordion structure. In such cases, consider alternatives such as tabs or vertical local navigation to better accommodate the hierarchical nature of the content.
• When the content is scattered and difficult to summarize, it becomes a challenge to chunk the content and come up with representative headings that effectively convey the essence of the information. As a result, failure to capture the precise gist can lead to confusion and may not effectively convey the essence of the information hidden within the panels.
• When users are likely to immerse in a continued flow of reading, using accordions could disrupt the experience by fragmenting the information and hindering users' ability to comprehend the full context. This is why news articles or narratives often avoid accordions, even when dealing with longer pages—a seamless reading experience and uninterrupted narrative flow are prioritized in such cases.

Consideration When Implementing Accordions

If you choose to incorporate accordions into your design, keep the following guidelines in mind:

• Ensure that the heading accurately reflects the content within the panel. A clear, descriptive heading is key to enticing users’ interest in exploring the detailed content inside the accordion. The labels of accordions can greatly impact the findability, discoverability, and accessibility of your content.
• The visual design of the accordion should clearly indicate that it can be expanded. One of the biggest pitfalls of accordions is the lack of a clear signifier to tell users that they can expand them. Useful content is left unknown, unseen, and unconsumed. To prevent this, provide appropriate icons (the caret and the plus work best according to our research) that clearly communicate the clickability of the accordion headings. In addition, ensure that both the heading and icon are clickable and they both expand or collapse the accordion.
• Allow users to open or collapse multiple sections at a time. Users should have full control over the access of the content on the page. Consider including an Expand All and Collapse All button to facilitate faster navigation and allow users to customize their viewing experience.
• Avoid hiding any crucial information within the collapsed panels. Essential information should be presented outside of accordions to ensure it is readily available and not easily overlooked. By doing so, you prevent critical content from being buried and ignored.

Conclusion

Accordions are a valuable tool for organizing and simplifying complex web pages. When implementing accordions on desktop, consider potential drawbacks and make informed decisions based on your audience's needs and the nature of the content being presented. By weighing the tradeoffs and aligning with content requirements, you can use accordions effectively to enhance user experience and facilitate efficient navigation.