Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Organize your content and structure navigation to tell your visitors where they are, what is available to them and how to access it, using tabs.
Interview and survey users to learn about their information needs.
For example, ( Am I in the right place? Do they have what I am looking for? Do they have anything better (if this isn’t what I want)? What do I do now?).
Group all the content you would like on your site in a way that is logical, expected and clear to visitors.
following existing prototypes (e.g., SaaS sites, eCommerce sites).
Use tabbed navigation as a main system or use it beyond the primary or secondary navigation levels such as below the fold.
Don’t try tabbed navigation when you want people to compare content. The tab should be connected to the content area it controls so that the scope of the tab is clear. The selected tab should be prominently marked to indicate current location. Unselected tabs should not be so muted that they are forgotten or overlooked, however.
Your tabs should follow existing prototypes. For example, SaaS sites are often chunked in a specific way while ecommerce sites are often chunked in another.
Use tabbed navigation if you have between two and nine similar categories of content (and this number is unlikely to change on a regular basis).
Don’t use a “home” tab, even if you’re using tabbed navigation for your entire site. Instead, have your logo take visitors to the homepage. A consistent tab order should be maintained from page to page so that the order of your tabs is meaningful and logical.
Fit tabs in a single row with category names one or two words long in plain english.
Avoid using all caps as it makes the tabs more difficult to read. The entire tab should be clickable, not just the category name (text).
If you use sub-categories (i.e. a second horizontal bar below the tabs) visually connect the bar of subcategories below to the selected tab.
Be sure the amount of sub-categories you use is not overwhelming: condense and simplify.
Allow people to navigate tabs using the “Tab” key on their keyboard and to select a tab using the “Enter” key. This improves accessibility.
Indicate which tab is selected using an alternative method. For example, you can include a title attribute with the word “active”.
Have the inactive pane contents written inline in the HTML document, and then use CSS and JavaScript to style and hide the pane visually.
When using tabbed navigation as the main navigation, you need to avoid page reloads when switching in between the panes to speed up navigation.
Run usability tests to answer these questions:
- Do they find it difficult to use?
- Are they navigating the site properly?
- Can they find the most important elements of the site?
If there are many costly issues you will not be able to fix, experiment with another navigation system. You can also use your digital analytics to figure out if your tabbed navigation is creating problems for your visitors.
Run usability tests if you want to try vertical navigation and/or use icons with text descriptions.
Last edited by @hesh_fekry 2023-11-14T15:55:22Z