Tabs
Help users navigate between sets of information
Demo - Brief heading that motivates users to engage
A short heading that sets up your point
The first tab is always on screen. So make sure it contains the most important information and adds the most value to the user.
Be as concise as possible and avoid walls of text. It takes users more time and effort to read and understand dense or wordy copy. So use short paragraphs and use formatting options to make content scannable and easy to digest, such as:
- Bulleted lists
- Hyperlinks to related content, using text that makes sense in isolation
- Bold text where you want words or phrases to stand out (use sparingly, though)
This isn't the component for large amounts of text. If users have to scroll, consider an alternative component.
Don't hide content under tabs
The Tabs component should be used provide additional, related information for those who want to dig into more detail.
It's important that your page flows and still makes perfect sense without reading the information within the tabs.
If you're looking to include a call to action, such as a document download or contact, you can link to a form, PDF or mailto, for example. However, components with integrated call-to-action buttons are more visible and prominent (and easier to track, if you are monitoring leads).
Add up to six tabs
Sticking to no more than six tabs helps to maintain a simple browsing experience for users.
In-page tabs come into their own for organising and categorising distinct groupings of information without cluttering the page, allowing users to identify the information they need without feeling overwhelmed.
The function of this isn't to present information for comparison. If the user needs to compare information under different tabs, they would need to constantly alternate between tabs, or try to remember the information they've just seen. That makes a clunky, inefficient and frustrating user experience.
Explore other components that are better suited to comparison and help reduce cognitive load, such as Product Overview.
Are you headings meaningful and descriptive?
It's important to use headings that accurately reflect the content, for readability and SEO performance.
One you've populated this component, do some final checks across the tabs. Make sure that:
- Each tab follows a broadly consistent layout, length, and tone of voice, so moving between tabs isn't a jarring experience
- The content of each tab is scannable, so users can easily find the information they need without reading it all
- The most important or key Information is prominent and takes priority in the running order
Overview
Help users navigate between sets of information
Tabs are a useful way of letting users navigate between related sections of content without leaving the page. They can also help reduce page clutter and scrolling.
When to use
You can use tabs whenever you need to present multiple related but distinct topics and information.
A good use case is policy documents on a claims page. Users need a policy document to make a claim, but they may have different ones. Using tabs to display the various policy documents takes up less space, while allowing users to pursue their claim without leaving the page.
When not to use
Tabs shouldn’t be used if the user needs to compare information under different tabs, as they would need to click back and forth.
For example, tabs would be a bad choice for illustrating policy options. Instead, you should use a table or a product overview. Also consider if Editorial Block with Sidebar (with accordion) is more suitable option.
How to use it
Step 1: Add a heading
The heading sits above the tabs. You’ll need one to establish why users should read the content and motivate them to click through the tabs.
Step 2: Create the tabs
Add your tabs by pressing the ‘add tab’ button in the bottom left-hand corner of the component.
To ensure a simple experience for users, add a maximum of six tabs (any more than that can be difficult to keep track of).
Step 3: Name the tabs
Make the title of each tab short and descriptive. Make it as short as you can go to get your meaning across, particularly when using many tabs. Use no more than four words per tab title.
Step 4: Add your tab content
Use the Rich Text Editor to format your copy. You have a variety of options, including:
- Standard lists
- List wrappers (pastel-coloured list boxes)
- Bold and italics
- Tables
- Hyperlinking
Do's and don'ts
Do's
Keep your tab contents short
Longer content that requires scrolling would fit better in another component, such as Body Text.
Put your most important point first
The first tab is always on screen, so it should provide the most value.
Don'ts
Don’t write a big wall of text
Use short paragraphs to make use of white space.