(m)Tabs

< Pattern Library

Overview

Tabs let users navigate between related content sections, and show which one is currently selected.

Use of this pattern

• In general, avoid tabs as they hide content from users. Users may only see the content on the visible tab, and miss the others.
• Tabs can be used when there is related content that can be clearly separated into a few sections.
• Tabs can be used when those sections have very clear labels.
• Tabs can be used when one section is useful to the majority of users.
• Tabs can be used when there is no need for users to view all sections in order.
• Tabs can be used to simplify and reduce the amount of content.
• Tabs can be useful to keep the content on a single page, with clear headings.
• Use this pattern to help to consolidate information in one area and help to not redirect the user unnecessarily to other pages.
• Don’t use tabs if the user is likely to need to see all the content sections. For example to read a multi-page guide, or to navigate a step-by-step application process.
• If your service is for regular users of information-rich systems (administration systems), then tabs can save screen space and allow users to get to the information they need more quickly.

How it works

• Use clear labels. Because you're hiding content, the tabs need to make it very clear what the content is, otherwise users won't know to click on them.
• Order the tabs in a way that makes sense for users. The first tab should be the most commonly needed section. Order the other tabs from most to least commonly needed, unless another order makes more sense for your users.
• Don’t disable tabs. Disabling elements is normally confusing for users. If there is no content for a tab, remove the tab.
• Make sure tabs are accessible to users of assistive technology.
• Tabs on a Desktop/tablet should use text to indicate to the user of the content of the tab selection.
• Mobile tabs may re-place text with icons specific to the alternative of the text. (possibly change tabs to accordion style instead (v2?))
• Aa combination of a maximum of 6 tabs can be created on one module.

Research on this pattern

• https://paper.dropbox.com/doc/Tabs-5YrleqkRBNb6bbkFCGuyO

Related patterns

Other