Design Accordion Web Component: All you need to know — Ep.1
Accordion the ultimate design component for progressive disclosure.
What are accordions?
Just like the name suggest, it is inspired by the nature of the musical instrument — Accordion. The web component accordions are probably something you’ve seen before in mobile and web designs. It is a vertically stacked list of headers that, when clicked, reveals or hides the content associated within them. Instead of overwhelming consumers with longform content, accordions are employed in designs to deliver content to users in a more progressive manner. Moreover, since it minimizes the amount of scrolling required by users, it is useful when building mobile apps.
User experience is improved by accordions because they provide readers more control over what they read. Users can scan the header and determine what they want to read while ignoring what they believe is unimportant.
However, accordions hide content from users, as a result, if a user is likely to read all the content, avoid using accordions as it would be bothersome for users to repeatedly click on the headers.
Source: Accordion by Carbon Design Systems
Anatomy
1- Header: This is where the section title is displayed. It controls whether the content in the panel is visible or hidden.
2- Icon: The icon displays if the panel is open or closed.
3- Panel: The content related to the accordion header appears in this section.
How to design an accordion?
Alignment
An accordion’s header is often aligned to the left, while the icon is commonly aligned to the right of the header. However, the icon may rarely be aligned to the left, followed by the title. Although both of these alignments are acceptable, it is always preferable to use the standard alignment technique.
Placement
Accordions can be included into a main page’s content or into a container like a side panel or tile view.
Contents of an accordion
An accordion’s title and body copy are its primary contents.
Title
The title must be short, yet relevant and descriptive because the user chooses whether to read or disregard the content based on the title.
Body copy
This is the content associated with a title in an accordion. The content may consist of just one paragraph or may be divided into several paragraphs. If necessary, a subheading may also be included.
Scrolling content
The entire accordion should be vertically scrollable if the content is longer than the viewport. A panel’s content shouldn’t be scrollable within the individual panel. Furthermore, an accordion’s content should never scroll horizontally.
States of an accordion
The collapsed and expanded states are the two possible states of an accordion. The state that the accordion is in is indicated by the chevron icon. The chevron icon denotes the collapsed state when it points downward, and the expanded state when it points upward.
An accordion’s content panels are all closed by default. The users are given a high-level overview of the information presented when the content panels are initially collapsed. Users have the option of opening one content panel at a time or several panels simultaneously.
Source: UI cheat sheet: Accordions by Tess Gadd
Accessibility factors
Keyboard interaction
Here are several keyboard interactions that can be employed to activate accordions in order to increase accessibility.
Space or enter: This keyboard input will cause the related panel to expand when the focus is on a collapsed accordion panel. The associate panel would collapse if the focus was on an extended panel.
Tab: switches the accordion’s focus to the following focusable element.
Shift + tab: switches the accordion’s focus to the previous focusable element.
Down arrow: Move the focus to the following header if an accordion header is in focus. When the last accordion header is in focus, either nothing happens or the focus switches to the first accordion header.
Up arrow: Move the focus to the previous header if an accordion header is in focus. When the first accordion header is in focus, either nothing happens or the focus switches to the last accordion header.
Labeling and states
The icons should clearly show the collapsed and extended states of the accordion panels, and the accordion titles should be concise and relevant.
Correct heading hierarchy
To promote accessibility and retain hierarchy, accordion headers need to be assigned suitable heading levels.
Alignment best practices
Accordions often have their icons aligned to the right, as previously discussed in this article, but left-aligned icons are easier for those with limited vision. This is because the titles and icons are placed close to one another, which makes it simpler for low vision users to identify if a panel is collapsed or expanded.
A few tips for UI development
When developing accordions, there are a few things that must be taken into account. By visiting the link below, you may gain a more in-depth understanding of these development aspects.
Source: Accordion (Sections With Show/Hide Functionality) by W3C
When to use an accordion?
Only when they are used wisely and with the right content can accordions enhance user experience. Here are two instances where accordions can be employed.
- Use accordions when users only need a little amount of information and do not need to read the entire page. This will make it easier for users to find what they need. Users visit FAQ sections to get answers to one or two questions, hence accordions are frequently used in these sections.
- Accordions can be utilized if you’re having trouble fitting a lot of content onto a small screen, such as a mobile device. This will lessen the amount of scrolling required by users while also assisting them in getting an overview of the content on the page.
Source: Accordion Design: UI Best Practices & Examples by Anna Fitzgerald
Real world examples where accordions are used
Here are some popular applications that has used accordions in the correct manner.
Vestiaire Collective
In order to organize the various clothing products they offer, the designer fashion marketplace Vestiaire Collective uses accordions.
Airbnb
The popular company Airbnb employs an accordion in their mobile application to display the frequently asked questions received by their travelers.
Booking.com
Online hotel reservations can be made through the Booking.com app. To present the frequently asked questions their users have regarding their loyalty program, they have implemented an accordion in their application.
The social media platform twitter employs an accordion to display the range of topics available to users.
Fiverr
Fiverr makes use of accordions, which, when extended, provide the user’s current order’s details and summary.
Wikipedia
The articles in the Wikipedia application are displayed using an accordion. Each sub section of the article is an accordion header.
Ground News
Ground News searches through a variety of news sources and assists users in spotting false information. This app uses an accordion to differentiate between a range of news topics.
Conclusion
Accordions can significantly enhance user experience, particularly on mobile devices. Users can choose what they want to read and what they want to ignore because it provides a high level overview of the information on the screen. As employing accordions for crucial content can conceal information from users, they should only be used when it is less probable that a user will read the entire content on the page. As a result, it’s critical to comprehend accordion usage and apply it appropriately to the relevant content.
Some useful resources for you
Accordion by Carbon Design Systems
Designing The Perfect Accordion by Vitaly Friedman
UI cheat sheet: Accordions by Tess Gadd
Accordion (Sections With Show/Hide Functionality) by W3C
Accordion Design: UI Best Practices & Examples by Anna Fitzgerald
