Designing Tab Navigation the Right Way

by on 01/02/11 at 3:36 pm

Color contrast plays an important role in design aesthetics. But for tab navigation, color contrast plays an important role in design usability. Tab navigation is a metaphorical way for users to navigate through content. Because a tab navigation functions and behaves like tabs, it should also look and feel like real tabs. When your tab navigation looks and feels like real tabs, your users will be able to effortlessly point out which tab is showing content and which tabs are hiding content. The key to achieving this effect is color contrast.

Foreground & background

In a tab navigation, the tab that is showing content should always highlight. The tab should look like it’s in the foreground. For this to happen, the color of the tab has to contrast with the color of the background.. The tabs that are hiding content should not highlight. The tabs should look like they are in the background. For this to happen, the color of the tabs have to blend with the color of the background. Applying color contrast to your tabs correctly will make your tab navigation easy to use.

In the examples below, it’s clear where the foreground is. This is because the tab that’s showing itself has a high color contrast to the tabs that are hiding in the background. This works the same way with a white or shaded background. As the user clicks each tab, the high color contrast between the foreground and background is kept. The tabs hiding in the background are still visible, but the color contrast is low. You don’t have to use the same color as the background for them, but the color you use should not compete with the color of the tab that’s showing. That way users can effortlessly point out which tab they’re looking at and which tabs they can click to.

Tabless labels

Another effective way to design tab navigation, is to only put a tab around the label that is showing content. The labels that are hiding content would have no tab around them. This makes the highlighted tab stand out more because there are no other tabs competing with it. Not only is the color of the highlighted tab distinct, but the shape of it too. The tab metaphor is not as strong with this approach, but it makes it clearer which tab users are looking at.

A good tab navigation is clear, distinct and allows the user to navigate effortlessly. A bad tab navigation is unclear, confusing and makes the user work to figure out which tab they’re looking at. By applying high and low color contrast to your tabs correctly, you’ll be able to design a tab navigation that suits your users.

Good tab examples


Light Resume Light Freelancer

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

13 Responses to “Designing Tab Navigation the Right Way”

  1. concept47

    Jan 6th, 2011

    Would have been great to see what you thought were some examples of badly done tabs, for comparison’s sake.

    • anthony

      Jan 7th, 2011

      A bad tab navigation is simply the opposite – high color contrast applied to the background tabs and low color contrast applied to the foreground tab.

  2. jeff

    Jan 7th, 2011

    Interestingly, there is an example of bad tabs at the top right of this very page. Your “Comment”, “Featured”, “Tags” links basically act as tabs. Yet the background is light and the active tab is dark. Just saying.

    (Note for people of the future: by the time you read this, my comment may be out of date if they upgrade their tabs.)

    • anthony

      Jan 8th, 2011

      Sorry, but I don’t think you quite understood the article, or read it correctly. The active tab is supposed to have a higher color contrast against the background. My tab box in the upper right follows this design principle, which is why the active tab is dark against the light background and the non-active tabs are light against the light background. This is clearly stated in the article and illustrated in the example.

      If i were you, I’d read things a little more carefully next time before criticizing others. That way you don’t look stupid. Just saying.

      • Stacia

        Jan 8th, 2011

        Now there’s a UX author who takes no crap!

        Anyway, I think another problem with the tabs in the upper right of this page that Jeff mentioned is that the selected tab doesn’t group its data.

        I know you didn’t mention this in your article, antony, but I find that typically examples of great tabs form a border around their data. They group the stuff they hold…instead of just a floating, differently-colored rectangle.

        • anthony

          Jan 12th, 2011

          I see what you’re saying, but a tab doesn’t necessarily have to have a border around it for it to look grouped. It can simply be grouped by proximity. Putting your elements close to each other and aligning them will make it look grouped too.

          The color around your content doesn’t have to match the color of your tab. It certainly can match it, but it doesn’t have to as long as the active tab is clearly highlighted with foreground contrast.

      • jeff

        Jan 10th, 2011

        Whoa, whoa. Ouch.

        It is true that the active “Com­ments” tab at the top of this page does contrast well with the background color.

        My point was that the background color of the active content within that tab matches the color of the inactive tabs.

        Your inactive tabs match the active content.

        In all of your “Good Tab Examples”, the color of the active tab extends below the tab, so that the color of the tab matches the background of the active content. The inactive tabs all have a contrasting color.

        I think I should have explained this better in my original comment, with more precise language regarding what I considered the “background”.

      • scott

        Mar 1st, 2011

        Surprised to see a reply like this from a fellow UX Designer, who should be an expert at taking criticism. :-)

  3. Spyros Rallis

    Jan 7th, 2011

    I don’t see why the last example is a “good one”.

    Although it follows the rules you outlined about colors and contrast, in my opinion is poorly designed; it fails on transmitting the “hey, this is a tab” message to the end-user.

    • Obelisk

      Aug 3rd, 2011

      I agree with you too.
      Besides, with the same length, the ribbon with dark color will look shorter than the one with light color and it make the area of tabs look not be aligned … And for that, the designer of the last example should replace the green line on top of each tab by something like a thin border goes around the tab’s rectangle … Maybe ?

  4. Michael FitzGerald

    Jan 11th, 2011

    Good article, but I think the first sample in “Good tab examples” is not a good example. That blue is too close to the conventional blue link colour, and it’s probably the only text that’s ‘not’ a link.

    • Janny

      Feb 26th, 2011

      so what you’re saying is you can’t have anything blue as it would look like the default unstyled blue link colour?

  5. gryg

    Jan 19th, 2011

    Hey, great article. I’m searching any information about efficient of ribbon menu (ex. MS Office 2007 style). Can you wrote something about it, ex. in order to tab navigation (which is simillar).

Leave a Comment