This pattern is not yet in the Enterprise Code Library. See JIRA ECS-66 and JIRA ECS-79. Please email the Patterns Team for details and more information.

Accordions

Accordions are a pattern where the entire module can be expanded from, or collapsed to a single line of text (a Title).
See also: Types of Expand/Collapse

Also known as: Accordion menu

Design Specs

Desktop/Tablet

  1. The accordion title is T3 styling in #001733. There is 20px of padding above and below the title.
  2. The content background color is #eeeeee.
  3. Text inside the accordion is T4 in #001733. There is 14px of padding above and below the text. The down arrow icon is pulled from the Sears icon font library. The accordion background color is #eeeeee with a 1px bottom stroke in #d0d0d0.
  4. Links within the accordion and below the level 2 text line is T5 with link text styling. There is 20px of padding above and below the text and is indented 20px from the left and right edge. The line has a 1px bottom stroke in #d0d0d0.
  5. The accordion has a 1px bottom stroke in #d0d0d0.

Desktop/Tablet

  1. The collapsed accordion is 44px tall and has a background color of #ffffff. They collapsed states are separated by a 1px horizontal rule, in #d0d0d0, extending the width of the module. The content is indented 20px from the left and right edge and is centered vertically from the top and bottom horizontal rules.
  2. Collapsed label text inside the accordion is T5 in #001733. The down arrow icon is pulled from the Sears icon font library and has 20px of padding between the arrow and the title text.
  3. The expanded content background color is #eeeeee. There is 14px of padding above and 20px below the content. Content within expanded section is generally separated by 14 or 20px of spacing.

Mobile

  1. Accordions sit on a white card over a zero layer background. There is 10px of padding to the left and right of the card with a 2px stroke along the bottom in #d0d0d0. The accordion boxes have 10px of padding on all sides while sitting on top of the card.
  2. Text inside the accordion is T4 in #001733 with an optional subtitle in T6. There is 20px of padding above and below the text and 10px of padding above the subtitle text. The down arrow icon is pulled from the Sears icon font library. The accordion background color is #eeeeee with a 2px bottom stroke in #d0d0d0.
  3. The expanded content has a 1px bottom stroke in #d0d0d0 along the top section of the expanding box which separates the title from the content. There is 20px of padding above and 20px below the content.

Production Examples

  • Sears
  • Kmart

There are styling variations of the accordion pattern depending on the instances in which it is being used.

Mobile

An example of collapsed accordions on mobile. Shown with and without subtitles.
An example of an expanded accordion on mobile.

Desktop/Tablet

An example of a primary accordion - in the collapsed, default state.

An example of a primary accordion - in the expanded state.
An example of a secondary accordion - in the collapsed, default state.
An example of a secondary accordion - in the expanded state.

More Production Examples

There are styling variations of the accordion pattern depending on the instances in which it is being used.

Mobile

An example of collapsed accordions on mobile. Shown with and without subtitles.

An example of an expanded accordion on mobile.

Desktop/Tablet

An example of a primary accordion - in the collapsed, default state.

An example of a primary accordion - in the expanded state.

An example of a primary accordion - in the collapsed, default state.

An example of a secondary accordion - in the expanded state.

More Production Examples

When Do I Use This?

Use when you need to break large amounts of content into distinct, consumable modules. When collapsed, it provides the user focus on the exposed page content, and clear section titles. When expanded, it provides on-demand access to hidden (secondary) content or features. Unlike tabs, they are placed vertically, and a single module does not have to be selected by default.

Usage Guidelines

1. Accordions are collapsed by default.

If open by default, it's because of UX decision that its content needs interacted with. If open by default, consider whether the ability to collapse is likely to provide the user a benefit.

Example of a proper default state of a primary accordion.

Example of an incorrect default state of a primary accordion.

2. The trigger element is the entire title row, including a caret.

The caret is the affordance of the behavior of this element.

The entire row, including the caret, is the trigger affordance for accordions.

Do not use any other icons to indicate the ability to expand or collapse a row. A caret is the proper icon to use for accordions.

Do not remove the caret trigger element or change the title styling to indicate a link.

3. On click, accordions should either collapse completely to title or expand open completely. No partial collapse or expand.

A fully expanded secondary accordion.

Always fully expand the content within an accordion when triggered. Do not partially expand the content or use any visual affordance to hide parts of the expanded content from a user.

Always fully expand the content within an accordion when triggered. Do not partially expand the content or use any visual affordance to hide parts of the expanded content from a user.

4. Can contain UI elements (i.e. buttons, checkboxes, etc) or informational content.

An example of an accordion with UI elements.

An example of an accordion with UI elements.

5. Copy guidelines: the title row should function as a title, or display the current selection.

The content of the title row should be one line and function as a title for the module in its default and expanded states. Alternately it can display the current selection, much like a dropdown list.

ADA Compliance

There are two prime objectives to ensure this pattern is accessible: keyboard only users must be able to tab through the widget with relative ease, and screen readers must be able to read out all the content within the widget. The status of an Accordion tab is defined as expanded/open or collapsed/close. Therefore, while the user is navigating through the Accordion tabs, they should be properly acknowledged if any one tab is open or close. This ensures a user is able to navigate to the content panel of the tab. While sighted users can easily tell if an expanding section is open or closed, screen-reader users need to be alerted when a section's state has changed.
Useful Links:

Rationale

Expand/Collapse is an effective technique for keeping the UI clean and simple without sacrificing functionality. It allows focusing on the essential, but makes it easy to access additional features and content when needed.

SHC rationale:

The solution and guidelines were informed by an SHC audit, followed by efforts to clarify and provide distinct patterns for each use case - see all expand/collapse

The caret and the padding around the title are the primary affordance. The caret points in the direction of movement on-click. It is placed on the left, which provides a visual cue to the user, which is understood faster than words. The color of the caret aligns to the title.

Sears.com checkout uses Accordions prominently, and has proven to test well. Baymard called us #2 in checkout usability in 2015. On close study it is examplary: it adheres to best practices and fundamentals, and avoids pitfalls

Research

Form Usability: The Pitfalls of Inline Accordion and Tab Designs

Worth reading through entirely. One quote: "When the [primary/submit] button is placed within the active sheet, it suggests only that sheet will be saved when it’s clicked. However, if the button is placed outside the form element, things get a little more complicated. "

view article

Where to Place Your Accordion Menu Icons

Refers to 2 studies about placement and icon choice.

view article

UI: Proper Indicators for Hidden Elements

Article about using effective indicators to ensure user comprehension that hidden content exists. Arrow direction is mentioned.

view article

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.