Categories
Best Practices

Designing the Accordion: Best practices

View the original post

Designing Accordions: Best practices

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

👋 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.

Contents

  • 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.

Badge as a foreknow info

The badge is another way to show the info of how many items are selected while the Accordion is collapsed.

Helper text

This feature is useful for displaying user selections organically when the Accordion is collapsed. It’s especially relevant for mobile viewports.

Patterns for Mobile viewports

Full-width use

Usage of full-width Accordions is the most common practice.

Side menu

In order to open the submenu items, integrate the Accordion into the Navigation drawer.

Filters

Usage of sidebars along with Accordions is the most common pattern for implementing filters, properties, and more.

Patterns for Desktop viewports

Sided menu

Similar to mobile viewports, you can perform Accordion-based side navigation for dashboards, desktop applications, and so on.

Filters

Based on what the desktop structure of your layout is, Accordions (such as filters) can be positioned on the left or right.

And that’s it for today. I hope that you find this information helpful when designing Accordions.

And if you want to use those Accordion cards that are presented here — feel free to ⚡Duplicate them for Figma

I hope that this research was useful in making your UX for apps better. In the next chapter, we will talk about App Bars. So, stick around!

Did I miss anything? Please, 💬 below.

I am here 👉 Dribbble, LinkedIn, Reddit, YouTube, Twitter


Designing the Accordion: Best practices was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.