Tab Guidelines

Tabs are a form of navigation that allows the user to move between different subsections of a page.

Styles

There are 2 main wireframing styles of tabs that you can use.

Border

The border style clearly contains the content belonging to it.

Line

The line tab style is less contained than the border style and arguably more modern.

---

Tab orientations

Depending on the style or type of product/website you are designing, you may want to align your tabs differently.

Top

Tabs oriented towards the top are the most common type you’re likely to find on the internet. This positioning allows the user to scan through what they’re looking for quickly.

Left

When there are many tabs, left-aligned tabs are often used instead of top-aligned tabs as there is usually more vertical space available than horizontal space.

Bottom and Right

Right-aligned and bottom-aligned tabs are seldomly used, except in games and online activities.

---

Labels

Tab labels should let the user know what’s inside each pane.

Plain text

Tab labels should always be as simple to understand as possible. Avoid icons and jargon.

Maximum of 2 words

On a tab label, there is limited space. To accommodate for this, you should only use one or 2 words.

Sentence case

Using all caps makes it harder for your users to read the tab titles. It also makes the length of the tab component longer, making it more challenging to fit everything in.

---

Interaction

Tabs should clearly let the user know which tab is selected and which are not.

Selected

When a tab is selected, the content attached to it should be visible to the user.

One of the tabs should always be selected by default when the user lands on a page. The selected tab should always be clearly indicated and look like it is part of the pane.

Unselected

An unselected tab means that another tab is currently selected. An unselected tab should always be visible to the user, but it should also be clear that it isn’t currently active.

---

Tabs uses

While tabs have many uses, the 2 most common are for grouping information and as a filter.

Using tabs to group information

Tabs are a great way to separate different types of related information. You could have all the information underneath each other without tabs, but it would be difficult for the user to navigate.

When information has been grouped using tabs, users will be able to jump between related but different information quickly.

Using tabs as a category filter

Tabs are often used on browse or search pages to help users find what they want more quickly. You can break up these category filters by genre, popularity, type, etc.

Tabs vs. main navigation

Main navigation, like tabs, groups information. However, the main navigation is used to group parts of a website, whereas tabs are used to group pages.

When you should use main navigation:

• If you are grouping large portions of the website.

Tabs vs. accordions

Like tabs, accordions should be used to break up sections of content into manageable groups. Unlike tabs, they should only contain a few sentences.

When you should use an accordion:

• If the content groups are small.
• If you expect the labels to be longer than a word or 2.

---

Best practices

There are a few best practices when it comes to tabs.

Always have one tab preselected

When a user lands on a page, there should always be one tab preselected. This should usually be the leftmost or topmost tab. This should also be the tab that the user will use most often.

Tabs should group related content

The content within tabs should be similar or related to that of other tabs in the same set. If you don’t expect this to be the case, instead use the main navigation component.

Only have one row of tabs

When you have too many tabs and they start to stack on top of each other it can confuse the user. Rather have fewer tabs, or use another navigation method.

Limit the number of tabs you have

The more tabs you have, the harder it is for your user to remember what they have or haven’t clicked on yet.

Arrange tabs in an order that makes sense

Arrange your tabs in order. This order could be alphabetically, numerically, what you expect the user will use most often, or just what makes sense.

Avoid nested or sub tabs

Nested tabs can create a lot of confusion for users. First of all, it can be hard to tell if they’re nested or part of the same component. Secondly, it can be challenging for the user to track what is currently active and where they have been.

Tabs on mobile

When creating tabs for mobile, it’s imperative to keep your labels as short as possible. If you have too many tabs, consider allowing the user to side scroll through them.

---

Variations

You can use different types and styles of tabs in your wireframes.

Controls included in Balsamiq

Balsamiq offers a wide range of pre-made button controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Vertical tabs or V.Tabs: The vertical tab component allows you to left- or right-align the tabs.

Tabs bar: The tabs bar is the most common type of tabs, and it allows you to align the tabs at the top or bottom.

DIY symbols

You can make your own custom tabs Symbols in Balsamiq.

Menu bar: When styled correctly, you can use a menu bar as tabs.

---