Accordions - playful or painful?

In this article, we'll break down the advantages and disadvantages of using accordions in web content, and provide recommendations on what type of content works best within them.

What's an accordion?

Accordions are clickable headers that reveal or hide content (as the name suggests), making them a popular choice for compressing and organising long or complex pages. While they can make a page look less overwhelming, there are important factors to consider when deciding if an accordion is the right choice for your site.

3 Benefits of Using Accordions

1. Simplifies Long Content

Long web pages can sometimes feel overwhelming to users. Accordions help by grouping content into manageable sections, giving users control over what they want to view. This reduces the feeling of information overload and makes the page appear shorter and more organised.

2. Reduces Scrolling

Although most users are comfortable scrolling, especially on mobile, it is still a physical action that requires effort. By collapsing large chunks of content, you can minimise the amount of scrolling needed to navigate a page. This is particularly helpful on mobile devices, where limited screen size makes long pages even longer.

3. Improves Scan-ability

Many users don’t read web content word-for-word; instead, they scan pages for the information they’re interested in. Accordions help with this by displaying headers that act as quick, scannable signposts. Users can identify the sections they care about and expand only the relevant content.

TIP: “Table of Contents” style navigation can offer similar benefits without the downsides of hiding content.

3 Drawbacks of Using Accordions

1. Reduced Visibility of Content

While collapsing content into an accordion can simplify the page layout, it comes at the cost of reducing the visibility of that content. Important information hidden behind accordion headers may go unnoticed, as users need to actively click to reveal it. If users don’t open the accordion, they miss the content altogether.

2. Increased Interaction Cost

Using accordions adds an extra step for users. Instead of immediately seeing the content, they must scan the page, identify the right header, and click to expand it (sounds like hard work, right?!). This added interaction can slow users down, especially if they need to open multiple accordions to find the information they’re looking for.

3. Fragmented Information Flow

Accordions can break the natural flow of reading by dividing content into separate sections. If users need to click through several accordions to follow a sequence of information, it can disrupt their understanding and make it harder to grasp the overall message or theme.

3 things to consider

If you're thinking an accordion might be a good idea, consider:

Accessibility

Consider how accordion elements may affect usability for people with disabilities, including keyboard navigation and screen reader support.

SEO Impact

Hidden content may have implications for search engine optimisation, depending on how it is implemented.

Printing

Collapsible sections can be problematic when users attempt to print the page, as some content may remain hidden.

In summary

Accordions can be a useful tool for organising long or complex pages, but they come with trade-offs in visibility, user interaction, and flow.

It’s important to carefully consider whether the content you're hiding in an accordion is truly skippable, and whether the user experience would benefit from other layout solutions.