When and how to use accordions in design. Advantages and disadvantages.
There is one big issue with the flooding accordion design examples.
They are completely out of context.
We cannot say which one is bad and which one is good just by looking at an example you see in a Google search. Of course, there are best practices we can apply to the design. However, without knowing the context, and the problem the designers needed to solve, we cannot determine which design is good or bad.
An accordion is a vertically stacked list of headers that users can click to show or hide content associated with each header.
Accordions can be used to show content to users in a progressive manner because they allow people to have control over the content. And we know, giving people control is one of the top heuristics for usability, for usable design.
There are advantages of using accordions when it comes to content-rich pages for example:
- You can collapse the headings to reduce scrolling
- Headings can act as mini information architecture of the page
- Overall, the information seems less overwhelming to users
In theory, this sounds really good, right? Well…
The disadvantages of using accordions are:
- If users need to click to open all of these topics, then it can be time-consuming, and it can slow them down. Imagine if we have 10+ headings in the accordion. In that case, it might be better to show the whole content on the page instead of hiding information under headings.
- If we stay with the example of an accordion with 10 or more headings, it can be considered as a wasted effort from the user's point of view. Why do they need to click? Why cannot they have access to all information related to a topic?
- Another big downside of using accordion is accessibility. If we use accordions, we need to account for the additional development efforts. While if we expose the content on the page, it’s already accessible. It requires less effort from engineers. Some of the accessibility considerations:
-- Accordions need to be operated by a mouse click and by touch on smartphone, tablets, touch screens
-- They need to be operated by a keyboard for screen reader users.
A lot of websites implement accordions for the wrong reasons.
They assume users don’t scroll the page. While, in reality, people do scroll when the content on the page is useful and relevant.
They also assume people avoid web pages with a lot of content. But actually, we all have the ability to handle huge amounts of information, when it’s presented properly with the right page hierarchy.
To determine if accordions are appropriate in your design we need to understand our users and user scenarios.
The best use of accordions is when people need only a few key pieces of content on a single page. By hiding some of the content, users can spend their time on information that matters to them.
Another situation in which accordions are great is when you need to design for small spaces, for example, a mobile device.
Tip #1: I avoid using accordion when users need most of the content on the page to answer their questions.
Tip #2: I don’t worry about page length, and I structure the page in a way that users can consume the content easily by scrolling the page and scanning the headings.
Tip #3: When I do use accordions, I give people the ability to open multiple headings at a time so that different parts of the content are available. An item that is opened or closed should remain in that state until users change it.
Let’s have a look at a good example of accordion usage.
Well done Ableton to design (possibly) the most perfect accordion I’ve seen on the internet. Check out how it works by clicking this link.
I’ve recently started a new series on my YouTube channel, it’s called Tiny tips. It includes quick and actionable UX tips. Here’s the first episode in case you’d like to see more: