Designing Accordions: Best practices

Collapsed & Expanded states. Styling & Colors usage. Accordion samples, templates, and UX cases for a smooth experience

Roman Kamushken

Published in

Prototypr

6 min readOct 1, 2021

👋 Heya! Roman’s here.

I am an online entrepreneur and UI designer. It’s been 3+ years since I started making UI kits for Figma. That’s how Setproduct.com was founded. This website’s mission is to help companies and freelancers to save money and time on a design by releasing their products much faster.

I’ve been working as a graphic designer for more than 20 years. For the last years, I have looked over thousands of different components, screens, apps on a daily basis. And I did this because I had a goal — to make a comprehensive book on designing apps and their components, templates, and so on.

I am very glad that I was able to finally start this process, thanks to which the 1st chapter about the Avatars, was published recently. It was nice to get positive feedback on various social networks, my article was mentioned in several popular design resources. This gives me the motivation to continue what I started.

I also got the idea of creating a poll where I asked my readers if they had benefited from the content. The results were easy to track as I used a pre-built survey widget.

https://setproduct.com/blog/avatar-ui-design

The results were quite inspiring! At least 44 users were interested in the article and they read it completely. And there were at least two users who did not quite understand what was happening 🤣

Okay, now let’s move on to the content of the article. We have a lot of little UI details here that we will reveal to you.

👇 Let’s get it started!

What is Accordion?

Accordion (as known as Expansion panel) is a list of options that are stacked vertically and that can be expanded/collapsed to show or hide additional related content.

Essentials
Styles of the container
User Experience & Usability
Case examples 📱/💻

Essentials

States

Default states for the Accordion component are as follows:

🔽 collapsed
🔼 expanded
🖱 onhovered
👀 focused
🚫 disabled

Placement of Chevron icons

After clicking on the Accordion, the Chevron rotates to indicate that the element has been successfully expanded. When clicked again, a collapse occurs, which returns the Chevron to its initial position.

You may also use these symbols instead of Chevron:

Caret
Arrow
+ / -

Additional symbols

In the situations when the Accordion is right-sided, you can use additional symbols to emphasize the meaning. But be careful, as it is possible to overload the contents of the component.

You can also sometimes use colors for visual separation of the elements:

Styles of the container

Expanded element

If multiple Accordions are used, the expanded state needs to be highlighted. By this, we help the user understand which Accordion element is opened. Here is how to stylize the highlight:

Shadow with elevation
Background fill
Outline border

Despite the fact that the elevation looks great on white and light gray surfaces, filling the expanded Accordion element’s background with 8 to 12% opacity is a great addition. Works well with white surfaces too. If necessary, you can add an outline stroke.

Contained Accordion

In the vast majority of cases, you might want to use a contained Accordion. Divide its items with a slightly noticeable separator. This approach will save some vertical space.

Accordion with separation

Sometimes Accordions can be separated by a substantial space. This approach is good when you don’t need to save vertical space.

Usability of Accordion

Subtitle as a foreknow info

Subtitling is a nice solution for informing the user about what to expect before he reveals the Accordion. By subtitles, you can also show the user’s selection when the Accordion element is collapsed.