Most are familiar with tabs found in files and folders. But tabs are also a metaphorical way for users to navigate through content. A tab navigation should function and behaves like real tabs. This means that users should be able to see which tabs are showing and 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.
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
Book
Affiliate
Would have been great to see what you thought were some examples of badly done tabs, for comparison’s sake.
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.
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.)
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.
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.
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.
Whoa, whoa. Ouch.
It is true that the active “Comments” 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”.
Surprised to see a reply like this from a fellow UX Designer, who should be an expert at taking criticism. 🙂
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.
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 ?
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.
so what you’re saying is you can’t have anything blue as it would look like the default unstyled blue link colour?
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).