When to Apply Accordions by Patrick Pentz on June 04, 2019

Summary

An accordion menu is a list of headers that can be clicked to expose content. It's useful for progressively revealing information by highlighting the most important details and then empowering the users to cherry pick the content that is most relevant to their needs. This can help complex web pages seem less daunting and reduce the need for scrolling, making them great for mobile. However, while it does reduce the perception of complexity, it also increases the interaction cost by requiring users to decide on topics.

Takeaway

While accordions have their advantages, they also come with some drawbacks.

• Forces people to click more, especially if users need to see many topics to understand the full story.
• Hides content that may never get seen if headings aren't clear and descriptive enough.
• Increases development effort.
• Not ideal for printing documents.

It's important to weigh out the pros and cons of accordions when considering them as a solution. They're most suitable if end-users only need a few pieces of content to complete their goal or task.

• Accordions for Complex Website Content on Desktop

• Accordions on Mobile