This excerpt is made available according to "Fair Use" guidelines for educators and the "TEACH" act. You are not allowed to retain or redistribute this excerpt.
I haven't been able to prove it (yet), but I strongly suspect that Leonardo da Vinci invented tab dividers sometime in the late i5th century. As interface devices go, they're clearly a product of genius.
Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. Like the tab dividers in a three-ring binder or tabs on folders in a file drawer, they divide whatever they're sticking out of into sections. And they make it easy to open a section by reaching for its tab (or, in the case of the Web, clicking on it).
In the past year, the idea has really caught on, and many sites have started using tabs for navigation.
And...
I think they're an excellent navigation choice for large sites. Here's why:
It's a cheap trick, but effective, probably because it's based on a visual cue that we're very good at detecting ("things in front of other things"). Somehow, the result is a stronger-than-usual sense that the site is divided into sections and that you're in one of the sections.
As with many other good Web practices, Amazon was one of the first sites to use tab dividers for navigation, and the first to really get them right. Over time, they've continued to tweak and polish their implementation to the point where it's nearly perfect, even though they keep adding tabs as they expand into different markets.
Eventually, they were forced to push the tab metaphor to the breaking point, but even their short-lived two-row version was remarkably well-designed.
Anyone thinking of using tabs should look carefully at the design of Amazon's classic tabs, and slavishly imitate these three key attributes:
To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it. This is what makes the active tab "pop" to the front.
The buttons at the top of each page look like tabs, but they act like ordinary buttons.
Color coding of sections is a very good idea—as long as you don't count on everyone noticing it. Some people (roughly i out of 200 women and i out of 12 men—particularly over the age of 40) simply can't detect some color distinctions because of color-blindness.
More importantly, from what I've observed, a much larger percentage (perhaps as many as half) just aren't very aware of color coding in any useful way. Color is great as an additional cue, but you should never rely on it as the only cue.
Amazon makes a point of using fairly vivid, saturated colors that are hard to miss. And since the inactive tabs are a neutral beige, there's a lot of contrast—which even color-blind users can detect—between them and the active tab.
Amazon had to create the Welcome tab so they could promote products from their other sections—not just books—on the Home page. But they did it at the risk of alienating existing customers who still think of Amazon as primarily a bookstore and hate having to click twice to get to the Books section. As usual, the interface problem is just a reflection of a deeper—and harder to solve—dilemma.
