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.
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 email@example.com
Product of the Week ⭐ 40% off for Figma Website Templates
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 46 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 (akaExpansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Table of contents
UX & Usability
Accordion use cases
Default states for Accordion are:
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.
Instead of Chevron, you may use the following symbols:
Up / down caret
Plus / Minus
Up / down arrow
In the case of right-sided Accordion, you may place additional icons to strengthen the meaning. Use wisely not to overload the component.
In some cases, you may apply colors to visually separate the items:
Accordion container styles
Highlight expanded state to let a user recognize what is opened in case of multiple Accordions. There are several possible styles for the highlighting:
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.
Use contained Accordion for most of the cases. Separate its items by a slightly visible divider. This placement either saves some vertical space.
There are some cases when you can separate Accordions with whitespace. Use this method to divide when it's needless to save vertical space.
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.
Badge to pre-know
Either use a badge to indicate the selection hastily, while Accordion is collapsed.
Enable a helper text for Accordion to ergonomically show up a user's pick when collapsed, especially for mobile viewports.
On mobile devices use full-width Accordions.
Implement Accordions into the Navigation drawer to reveal submenu items.
Use side panels with Accordions to utilize multiple filters, properties, etc
Want to have our next post delivered to you?
Setproduct newsletter with updates, ideas, inspiration and special offers — once per month
Analogous as mobiles, you may implement Accordion-driven side navigation for desktop apps, dashboards, etc.
Depending on the desktop layout structure, Accordions (e.g. as Filters) could be placed as both left or right-sided.
This is all you need to know to design better Accordions.