Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
We used to reply ASAP
Looking for a custom design based on our Figma templates? We are ready to customize any of our UI kit personally for you and create custom design based on your brief, wireframes, outdated UI or online call. Please, fill the form below or drop us a line at hello@setproduct.com
Your e-mail
Pick a design system for your project
Pick a project size
Describe in a few words (optional)
For browser-based applications
For iOS & Android mobile apps
Whats your budget, USD
Please, provide the approximate number. The total price depends on the amount of templates in your order
1000
10000

Accordion UI design

The exploration for component styles, states, samples and use cases for desktop & mobile viewports

September 2021 · 6 mins to read

by Roman Kamushken

Heya! Roman's here.

I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct.com to assist designers, developers and organizations to suit their apps with trendy and clean UI and save time and resources.

Working for 20+ years in graphic design, last years I've been browsing thousands of apps, screens, components, and layouts almost DAILY to gather the most complete ebook of how to design components, templates, and entire apps.

Fortunately, I've started with the 1st chapter related to the State of Avatar. Glad I was listed on some popular design resources and got a bunch of retweets and mentions. Which makes me decide to continue my explorations.

Thanks to myself for this idea — I realized I should question my readers was the content useful or not. It was easy to track with a ready-made polling widget, which I've plugged in at the very end of a publication:
Quite inspiring results, personally! Now we know, at least 44 visitors got a full-read. And at least 2 of them got no idea of what they doing here :)

With all that said, now prepare for the tiny UI details, you won't notice till you get too close.

Let's get it started!
THE STATE OF COMPONENT
Accordion UI design. Styles, States and Usage exploration

What is Accordion?

Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
    Accordion UI design tips

    Table of contents

    Anatomy
    • States
    • Chevrons
    • Additional icons
    Styles & Themes
    • Expanded item
    • Contained Accordion
    • Separated Accordion
    UX & Usability
    • Using subtitles
    • Using badges
    • Helper text
    • Mobile & desktop patterns

    Anatomy

    States

    Default states for Accordion are:

    • collapsed
    • expanded
    • onhovered
    • focused
    • disabled
    Accordion UI design tips
    Chevrons placement

    Chevron icon represents the opportunity to expand/collapse Accordion item. Once Accordion was clicked, the chevron rotates to indicate the successful expansion. Further collapse returns the chevron to a previous position.
      Accordion UI design tips
      Instead of a chevron, you may use the following symbols:

      • Up / down caret
      • Plus / Minus
      • Up / down arrow
        Accordion UI design tips
        Additional icon

        In the case of right-sided Accordion, you may place additional icons to strengthen the meaning. Use wisely not to overload the component.
        Accordion UI design tips
        In some cases, you may apply colors to visually separate the items:
        Accordion UI design tips

        Styles & Themes

        Expanded item

        Highlight expanded state to let a user recognize what is opened in case of multiple Accordions. There are several possible styles for the highlighting:

        • Elevation shadow
        • Background fill
        • Outline stroke
        Accordion UI design tips
        While the elevation works well on both smooth gray and white surfaces, you may fill the Accordion expanded item's background with 8–12% opacity fill. Fits good for white surfaces. Add outline stroke, if necessary.
        Accordion UI design tips
        Contained Accordion

        Use contained Accordion for most of the cases. Separate its items by a slightly visible divider. This placement either saves some vertical space.
        Accordion UI design tips
        Separated Accordion

        There are some cases when you can separate Accordions with whitespace. Use this method to divide when it's needless to save vertical space.
        Accordion UI design tips

        Accordion UX & Usability

        Subtitle to pre-know

        Enable a subtitle to inform your users about what to expect when Accordion expands. This either helps to display the user's pick when everything is collapsed.
        Accordion UI design tips
        Badge to pre-know

        Either use a badge to indicate the selection hastily, while Accordion is collapsed.
        Accordion UI design tips
        Helper text

        Enable a helper text for Accordion to ergonomically show up a user's pick when collapsed, especially for mobile viewports.
        Accordion UI design tips

        Mobile patterns

        Full-width usage

        On mobile devices use only full-width Accordions.
        Accordion UI design tips
        Side menu

        Implement Accordions into the navigation drawer to reveal submenu items.
        Accordion UI design tips
        Filters

        Use side panels with Accordions to utilize multiple filters, properties, etc
        Accordion UI design tips
        Want to have our next post delivered to you?
        Setproduct newsletter with updates, ideas, inspiration and special offers — once per month

        Desktop patterns

        Side menu

        Analogous as mobiles, you may implement Accordion-driven side navigation for desktop apps, dashboards, etc.
        Accordion UI design tips
        Filters

        Depending on the desktop layout structure, Accordions (e.g. as Filters) could be placed as both left or right-sided.
        Accordion UI design tips
        This is all you need to know to design better Accordions.

        If you looking for those Accordion cards - Duplicate for Figma

        Hope this exploration will help you to improve your in-app UX. The next chapter is for the App Bars, probably. Stay tuned!

        Have I missed something? Please, drop me a line at kamushken@gmail.com

        Related links

        More to ☕ read

        Show more