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.

image-description

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

Previous

Awwwards Conference SF 2019 Recap

More posts by Patrick Pentz

image for Some Parting Thoughts
https://d33wubrfki0l68.cloudfront.net/9eaf6a77c2b4b75ff22088cec2566e5f85b35980/e5691/images/headshots/pentz-patrick-h.jpg

Some Parting Thoughts

2 Min Read

Liferay.Design

Part of Liferay, IncPowered by Gatsby and Netlify