Tabs and Accordions

Why Using Tabs and Accordions Correctly Matters

We want to create the best user experience possible. It matters especially when a user finds your page through a search result. Google will crawl your page content and will include accordion and tab content in a search result, but if the content the user was searching for is in a closed panel/accordion, they may have trouble finding what they expected. If the panel headings are specific (having a high "information scent") and the guidelines below are followed, a user should easily identify the category containing the information they were looking for.

Using Accordions the Right Way

Accordions are a useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. As a result, the design stays focused and displays critical information first, while everything else is easily accessible.

-Smashing Magazine

Accordions function with a panel heading, and panel content that is revealed upon clicking. It is important that your accordion panel headings have a high information scent, ie, they should contain enough information for the user to understand the content that will be revealed.

• Accordions should only contain specific information relevant to the header, like a word in a dictionary is relevant to it's definition. The content in accordions should always be concise. Large amounts of information should be deemed important enough to become their own page, and if not important, consider removal.
• Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read.
• Plain language should always be used (no technical jargon or acronyms).
• Accordion headings can be longer and be more descriptive, like a short sentence.

Tabs should never be placed in accordions

Creating an Accordion

• To create an accordion table:
• Click the snippets button

• Select 2x2 accordion
• Click insert
• Fill in your title and content fields
• Save your work

The snippet will then tranform from a table to an accordion. An example accordion created with the snippet is below.

Using Tabs the Right Way

A tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking the content’s corresponding tab control.

-Smashing Magazine

Tabs should be used to display items that are all relative to the same topic.

• Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place.
• Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.
• Use tabs only when users don't need to see content from multiple tabs simultaneously. If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.
• Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for a tab control.
• Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read.
• Make sure to limit the number of tab items for mobile consideration.

Accordions should never be placed in tabs

Creating a Tab

To create a Tab:

• Click the snippets button

• select the tabs snippet
• click insert
• fill out your tab title and tab content sections
• save your work

The snippet will then tranform from a table into tabs. An example of tabbed content created with the snippet is below.

• Tab Title
• Tab Title