Tabbed Navigation: When to Use It, and How to Optimize It

One of my favorite UX quotes comes from Chikezie Ejiasi, Head of Studio and Design Systems at Google.

He wrote: “Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met—so it’s important to be clear and precise. Thus, well-structured navigation and content organization goes hand in hand with having a good conversation.”

Can tabbed navigation be clear and precise? Of course it can, which makes it a valid form of navigation and content organization.

What matters, as with most things related to UX, is how you implement it and how you optimize it.

What is tabbed navigation?

Tabbed navigation is a navigation and UI style where information is organized in tabs, which separate content into different sections.

Generally, when looking at tabbed navigations, you’ll notice some common characteristics:

1. Rounded tab corners;
2. Separation of tabs, whether it’s space or a single line;
3. Hover effects on tabs;
4. Gradient to add depth and dimension to the tabs.

Tabbed navigation is based on the folder metaphor, which anyone who works in an office or watches television should be familiar with. Just like Mifsud of UsabilityGeek explains…

Because the metaphor is so common, it’s important that you’re careful of implementation. Tabbed navigations have a strong prototype, so they must look and work exactly the way they’re expected to.

Like any good navigation system, tabs allow you to:

• Meaningfully separate content into different sections;
• Show people what content is available to them and how they can get to that content;
• Show people, visually, where they are within your site.

When is it a good idea to use tabbed navigation?

Generally, it’s a good idea to use tabbed navigation when…

• You have between two and nine different categories of content.
• Category names are relatively short and predictable, both in terms of position and copy (i.e. they match the prototype).
• The number of categories is unlikely to change on a regular basis.
• The categories are similar in nature; it makes logical sense that they’re tabbed together.
• The categories fit in a single row.

As Jakob Nielsen of Nielsen Norman Group explains, when tabbed navigation grows so complex that it requires multiple rows, problems begin to arise…

Multiple rows also create visual hierarchy issues. When there’s a second row, it may signal to the user that the tabs in the second row are sub-categories or, at least, less important than tabs in the first row.

Generally, it’s not a good idea to use tabbed navigation when:

• You want people to compare content simultaneously. This strains memory and increases cognitive load substantially.
• You find yourself considering adding a “More…” style link.

Of course, these are just basic guidelines. You could match with all the “you should use it” rules and find that it doesn’t work for your audience. It’s ultimately something you’ll need to test.

Remember, you can use your digital analytics to figure out if your tabbed navigation is creating problems for your visitors. From there, you can either make changes to fix the issues or experiment with a new type of navigation.

The controversy

While modern design practices have a lot of sites looking like this…

…some people do use tabbed navigation as their main navigation.

As Luke Wroblewski of Google chronicled years ago, Amazon really pioneered this trend…

Here’s a look at how Amazon used tabbed navigation in the earlier days…

As the site grew in popularity, so did the number of tabs Amazon needed…

In 1999, Jakob called this “a bad design and an abuse of the tab metaphor”:

I maintain that tabs would be better used for switching between alternative (but related) views than for navigating to unrelated locations.

You should use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place

Jakob Nielsen

Still, many sites followed Amazon’s lead and the definition of tabbed navigation started to shift from Nielsen’s “switching between alternative views.”

While using tabbed navigation as a main navigation system has gone a bit out of style, it can work. As with most things, your primary concern should not be what Nielsen says about tabbed navigation, but what your audience says.

Do they find it difficult to use? Are they navigating your site properly? Can they find the most important elements of your site? Conduct usability testing to be sure.

How to implement tabbed navigation

Air Canada, along with most major airlines, uses tabbed navigation well…

When implementing tabbed navigation yourself (at any level), here are some things to keep in mind:

• First, design the information architecture (IA) of your site so you can make smarter tab-related decisions.
• The entire tab should be clickable, not just the category name (text).
• 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.
• The tab should be connected to the content area it controls so that the scope of the tab is clear.
• Category names should be one or two words long and written in plain English. Avoid using all caps as it makes the tabs more difficult to read.
• Don’t stack multiple rows of tabs. If you must, use sub-categories (i.e. a second horizontal bar below the tabs) instead. If you do use sub-categories, make sure there is a visual connection between the selected tab and the bar of subcategories below. Be sure the amount of sub-categories you use is not overwhelming; condense and simplify.
• 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.
• A consistent tab order should be maintained from page to page so that the user fully understands how the tabs relate to one another.

Jakob explains why this type of consistency is important…

1. Recognizability. When something always looks the same, you know what to look for and you know what it is when you find it.

2. Predictability. When something always works the same way, you know what will happen when you act on it.

3. Empowerment. When you can rely on your past knowledge of all the available features, you can easily compose a set of actions to achieve your goal.

4. Efficiency. There’s no need to spend time learning something new or worrying about the effect of inconsistent features.

Jakob Nielsen

Examples of tabbed navigation done right

The best way to understand tabbed navigation, especially since it can be used in so many different ways, is to look at some examples.

1. Album Art Collection

Album Art Collection is a rather popular example of tabbed navigation…

Two things are interesting here…

1. The navigation is vertical, not horizontal.
2. The navigation includes icons.

Typically, you’ll find tabbed navigations presented horizontally. This is in part due to design prototypes. Since it is common, people tend to look for navigations in the horizontal space below the logo.

Of course, that doesn’t mean you’re restricted to using that space for navigation. Just be sure to use user testing. You don’t want moving your navigation for stylistic reasons to impact the ease of use of your site.

Note that while Album Art Collection uses navigational icons, they do not abandon text-based descriptions. Icon usability testing is an article of its own, but more often than not, text-based descriptions are more usable than icons alone. Jacob Gube of Six Revisions explains…

2. The Invoice Machine

The Invoice Machine is your basic tabbed navigation as a main navigation example…

However, they do include a “Home” tab, which is redundant. Note how the selected tab is brought forward and the tabs are connected to the content area.

3. Buffer

Buffer was one of my favorite examples of tabbed navigation. In the past, they had an offering for individuals and an offering for businesses, so they use tabs to separate their content below the fold.

Here was the start of the content for individuals…

And here was the start of the content for businesses…

This allowed them to speak to two different audiences without creating an entirely separate site or experience.

Later on, Buffer’s product page underwent deep changes, with Publish, Reply, and Analyze among other offerings (all quite self-explanatory). Here’s the tab navigation they used for their pages:

Aside from different pricing plans, these product-based tabs displayed a different testimonial, relevant to the product on the tab:

As David Leggett of UX Booth explains, tabbed navigation is relevant beyond primary and secondary levels of navigation. They can even be used below the fold, as in Buffer’s case…

3 best practices to remember

Before you experiment with tabbed navigation or decide it’s not working for you, consider these three factors: accessibility, chunking, and speed.

1. Accessibility matters

You want your site to be accessible to those with disabilities or limitations. In order to do that with tabbed navigation, you’ll have to…

• Allow people to navigate tabs using the “Tab” key on their keyboard.
• Allow people to select a tab using the “Enter” key on their keyboard.
• Indicate which tab is selected using an alternative method. For example, you can include a title attribute with the word “active.”

Making your site easier to use for more people will never hurt conversions.

2. Chunking matters

With tabbed navigation, how you decide to organize and chunk your content is incredibly important. That’s why my first implementation recommendation above was related to the information architecture of your site.

Justin explains why proper organization is vital…

Consider all of the content you would like on your site. Then, group that content into four to five buckets. Likely, you’ll be able to repeat this exercise and end up with two or three different buckets. That’s good. Conduct user testing to see which people respond to and navigation with better.

Above all, you’ll want to ensure…

1. Your content is chunked in a way that is logical, expected and clear to visitors.
2. The order of your tabs is meaningful and logical.
3. Your tabs follow existing prototypes. For example, SaaS sites are often chunked in a specific way while ecommerce sites are often chunked in another.

3. Speed matters

We’ve written about the importance of speed time and time again. So, it shouldn’t be surprising that speed plays a role in the effectiveness of tabbed navigation as well.

Jacob explains it quite well…

This advice does not apply to those using tabbed navigation as their main navigation, but those using tabbed navigation the way Air Canada and Buffer are should take note.

Conclusion

Tabbed navigation can absolutely result in “a good conversation” with your visitors. If implemented properly, it’s clear and precise enough to tell your visitors: exactly where they are, exactly what’s available to them, and exactly how they can access what’s available to them.

With the help of usability testing and optimization, that conversation improves even more.

As with anything, however, be sure to conduct your research (in this case, your information architecture research) and test, test, test.

In summary…

1. Tabbed navigation can be used as a main navigation system as well as beyond the primary or secondary navigation levels.
2. Try tabbed navigation when you have two to nine solid, similar categories with short names that fit in a single row.
3. Don’t try tabbed navigation when you want people to compare content or find yourself thinking about adding a “More…” link.
4. You can follow implementation best practices, but…
5. What matters is your data. Do your visitors find it difficult to navigate your site with tabbed navigation? Conduct usability testing to find out.
6. Fix the issues that pop up. Or, if there are many costly issues, consider another navigation system.
7. Accessibility, chunking and speed all matter when it comes to tabbed navigation, so pay close attention.

Working on something related to this? Post a comment in the CXL community!