Tabs are a form of navigation that allows the user to move between different subsections of a page.
There are 2 main wireframing styles of tabs that you can use.
The border style clearly contains the content belonging to it.
The line tab style is less contained than the border style and arguably more modern.
How to in Balsamiq
You can change the style of a tab control by simply checking or unchecking the Border checkbox.
Depending on the style or type of product/website you are designing, you may want to align your tabs differently.
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.
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.
How to in Balsamiq
You can change the orientation of your tabs by altering the Tab Position in the control panel.
Tab labels should let the user know what’s inside each pane.
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.
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.
Tabs should clearly let the user know which tab is selected and which are not.
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.
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.
How to in Balsamiq
Change the selection of the tabs by choosing an option from the Selection dropdown in the control panel.
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.
When to use the main navigation instead
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.
When to use an accordion instead
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.
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.
UX Law: Miller’s Law
“The average person can only keep 7 (plus or minus 2) items in their working memory.”
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.
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.
You can make your own custom tabs Symbols in Balsamiq.
Menu bar: When styled correctly, you can use a menu bar as tabs.