Accordion Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Accordion

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

The accordion component collapse content and make page length manageable in terms of scrolling. They lessen visual complexity and allow users to focus on the content most relevant for the current task. Accordions shorten pages and reduce scrolling, but they increase the interaction clicks by requiring users to decide on accordion labels.

When to use

When there is a lot of information and you need a way to organise the same.
When you need to cut short on page length and make information digestible, one at a time.
When there is less screen real-estate and you want to show long-form of content.

Anatomy

Label: contains the accordion title and designates the revealing content.
Icon: Indicates if the accordion is open or closed.
Expanded content: Reveals more information in form of text when in expanded state.

Best Practices

Use of Chevron icon: 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.
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.
Use dividers: In the vast majority of cases, you might want to use a contained accordion. Divide its items with a slightly noticeable separator.