Jay Goldman

If you’ve ever designed a user interface that has two tabs in it, you’ll have learned this lesson the hard way. It’s easy to tell which tab is in the front when you have a whole row of them — it’s the odd one out! — but when you only have two tabs it can be damn near impossible.

Take, for example, the Clean/Explicit toggle in the iTunes Music Store. I was browsing the listing for Talib Kweli’s The Beautiful Struggle album (), when I got confused about which version I was thinking of buying.

Clean version of The Beautiful Struggle on iTunes

Generally speaking, darker things are further away from you. To me, it looks like the Clean tab is behind the Explicit tab, especially since the Explicit tab is the same colour as the ‘grabber’ strip separating the description from the track listing (you can tell that you’re looking at the Clean tracks by the CLEAN label in the name column). Compare to the Explicit view:

Tallib Kweli explicit version on iTunes

It doesn’t help that the cursor changes to a pointer hand on both tabs, regardless of which one is in front. There’s a touch of the ‘ole cognitive dissonance between the Clean tab looking like it’s in front and the red EXPLICIT labels on each track (P.S.: how awesomesauce is an album that has an explicit warning on EVERY track?!).

We ran into this once at Radiant Core, doing the design for the Agoracom website. Our version isn’t up anymore (props to The Working Group on their beautifully executed redesign), but there used to be two big tabs at the top of the page labelled “For Investors” and “For Public Companies”. Through a bunch of trial and error, we finally settled on a system for drawing the tabs to make it clear which was in front. Here are a bunch of tips to help you out in your designs:

• Darker things look further away. Try making all of your tabs the same colour range, and have the front tab be a lighter shade.
• Add a strip to the bottom of the tabs. In the screenshots above, the grabber strip between the description and track listings looks like it’s almost part of the background tab. Use the reverse to your advantage and add a strip across the top of the content area, colour-matched to the front tab (e.g.: if the current tab is green, have a green strip a few pixels tall that runs across the top of the content area).
• Use reversed gradients. Instead of a solid colour for the tab backgrounds, try a light to dark gradient. Use a light to dark (top to bottom) gradient on the front tab, which will make it look like it’s leaning backward a little, and reverse it on the other tabs (or other tab if you only have two), to make it look like it’s tucked behind.
• Connect the current tab to the content area and cut off the others. A simple, one pixel black line running across the bottom of background tabs will cut them off and make it clear which tab is connected to the content.
• Turn off the clickability of the front tab. If you’re doing this in HTML and have styled the <a> tag in your tabs, don’t provide an href parameter for the current tab. If you’re doing this in a desktop app, make it not clickable. It’s almost always the case that you don’t want to have a link to wherever people currently are.

And, of course, if you’re making tabs in HTML, make sure you’re using the right semantic markup and build them on a list (unordered or data preferably). See HTML Dog’s CSS Tabs tutorial for more info.