As UI/UX designers, we all had moments when we had to introduce too much information, but we just didn’t know where. And we didn’t want to overwhelm the page because it would make it look bad. So, what can we do in these situations? Exactly, implement accordions in our UI design!
No, we’re not talking about the musical instrument. However, we could make an interesting parallel between the two. Both accordions – the musical instrument and the UI design element – share a common thread of controlled expansion and compression. The only difference is that one is for creating beautiful harmonies, and the other is for navigating information.
An accordion is a UI element that consists of a vertically stacked list of components that can be expanded or collapsed. This way, when triggered by an interaction, these elements will allow our users to see or hide the associated content as desired. In other words, the little box of text or images that appears when we click on a specific element or hover it with our mouse. And usually, accordions have a small arrow downwards or a “+” as visual cues.
A great example of an accordion is the navigation menu section on a website. Given the limited space, it would be impractical (and quite impossible) to include all the categories and subcategories we want to show in the navigation bar. So, the accordion design allows them to access subcategories or additional information as needed without cluttering the design.
One thing is clear – if used in the right context and for the right reason, accordions can make the difference between a UI design and a great UI design. So, when should you use an accordion? Let’s explore!
- Long Content: If you have content that is lengthy but not all of it is essential for all users, consider using an accordion to present the core information initially and let users expand sections if they are interested. FAQ pages usually use accordions since we can offer a wide range of questions and let our users quickly scan through the list of questions and choose the ones they are most interested in.
- Limited Space: Accordions are especially useful for mobile devices as it’s much easier to give our users an overview of the content rather than making them scroll endlessly. Think about it! How many times did you leave a page just because you couldn’t find specific information? I know I did multiple times! We want to avoid that!
- Step-By-Step Information: If we’re sequentially presenting information, we might want to use accordions to break down each step and maintain a clear flow of information. By revealing one step at a time, our users can focus on the current task without feeling overwhelmed by the entire process. This is good for onboarding processes, completing forms, and so on.
- Filters and Sorting: Imagine wanting to find only blue linen shirts, but you must go through all the other filters to select these two. Yes, it would be frustrating for everyone. But by introducing an accordion in our UI design, we can make sure that our users can expand only the desired sections to refine their filters without having to deal with other unnecessary filters.
Accordions can make or break a design – there’s no denying that. Although accordions have many benefits, using them might not always be a good idea. In fact, many designs are better off without them. So, let’s see when we should not use accordions in our UI design.
- Confusing Navigation: If our design relies on multiple levels of nested accordions, it could confuse our users and make the navigation process difficult. Think about it! Having to click multiple layers of expanding sections can only lead to frustration. We might lose track of where we are within the hierarchy and have to take time to understand the relationship between different sections.
- Limited Content: Yes, accordions might be a great addition to the way to the visual design. But if you don’t have the necessary content, introducing accordions might be redundant or even counterproductive. This doesn’t apply only to textual content but also to forms, filters, and so on.
- Primary Content: Avoid using accordions for content that is important or needs to be visible to our users. If you hide such information, our users might overlook it because they might not open the accordion in the first place. This can be especially problematic if the hidden content includes critical instructions, important announcements, or vital calls to action. Remember! Accordions are good for organizing additional information, but when it comes to core content, it’s better to keep it as visible as possible.
Yes, accordions have become a common UI design element when creating a new platform. However, users are still struggling to identify due to the variety of styles and implementations they have encountered. So, here are some tips on how to design accordions:
1. Ask Yourself – “Do I Really Need an Accordion in My UI Design?”
While accordions can offer an organized way to present our content, we shouldn’t use them just for the sake of using them or because they might look good on our UI design. Reflect on the specific content you’re dealing with. Are there multiple sections that need to be grouped together? Will it help our users access information more efficiently? Will it maintain clarity and intuitive navigation? Do I really need an accordion in my UI design?”. All of these questions will help you make an informed decision.
And remember! Our goal as UI/UX designers is to provide a great user experience. So, don’t overcomplicate things unnecessarily.
2. Use a Concise and Descriptive Header!
When it comes to creating the header, precision is key! The header serves as the gateway to the content within the accordion panel. So, it should be succinct yet descriptive enough to give our users a clear idea of what to expect when they expand the section.
Be careful with the words you use because the user should be able to determine whether the content is relevant to them or not from the header alone. And if your header is vague or too broad, our users might overlook the accordion because they don’t bother to open it. Think about it! If your accordion includes details about different subscription plans, a generic header with “Plans” might not be enough. Instead, try using a header like “Subscription Plans Overview”.
3. Use a Visually Distinctive Icon
The icon plays a pivotal role in indicating the expandable nature of accordion sections. It serves as a visual cue that prompts our users to click on the header to reveal or hide the associated content. So, opt for icons that are universally recognizable and associated with expandable content.
While using a highly creative or unique icon might be tempting, remember that familiarity and clarity are key. Our users should immediately understand the icon's purpose without having to think twice.
4. Use Visual Cues
Our goal as UI/UX designers is to create visually appealing and intuitive platforms. So, using visual cues becomes a must – especially when it comes to accordions. Whether it is through colors, spacing, background, icons, or even animations – the choice is yours.
To better emphasize the presence of an accordion, consider using colors to signify the different categories or sections – especially when it’s active or inactive. But what’s more important is to use some differentiators between the header and panel. It’s recommended to use different background colors to highlight the content within the panel.
5. Be Consistent!
Just like in any other UI/UX design, the most important thing we must do is to be consistent and have a uniform visual language throughout the interface! A good accordion design follows the same design principle. Whether your UI/UX design incorporates accordions for FAQs, product details, or content sections – the styling of headers, icons, and panels should align with the overall aesthetic of our platform.
But remember! Consistency extends beyond visual elements. When our users interact with accordions in different sections of our platform, they should encounter predictable and uniform behavior. And while we might want to be unique and improvise, try to remember that people prefer familiarity more than anything!
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
