K3 Tab Rows

K3 Tab Rows

Figure K3.1. Well-designed tab rows provide visual cues that help customers recognize and use them more effectively. On BabyCenter's site they look just like file folders (top), an image that is instantly familiar.

(www.babycenter.com, August 2001)


graphics/common.jpg Background

MULTIPLE WAYS TO NAVIGATE (B1), BROWSABLE CONTENT (B2), and NAVIGATION BARS (K2) show the value of providing clear and consistent navigation indicators. One type of NAVIGATION BAR (K2) is a tab row, which offers clear visual cues about what your customer can click on, as well as straightforward feedback about the currently selected item.

graphics/common.jpg Problem

Sites need to let customers navigate through categories of content and give them feedback on where they are. But to make tab rows work well requires including specific details in the visuals.

Tab rows are cues that people find familiar. They are reminiscent of tabs on file folders at the office and in school. When implemented well, they clearly indicate what is active and open, while showing customers which other sections they can access. This design provides a simple but powerful navigation aid to quickly orient visitors and give added visual appeal to a site. Making tab rows work on the Web, though, involves creating some specific graphical devices.

Clearly Identify the Active Tab

Customers need to be able to see which tab is active. Make the active tab stand out from the nonactive tab by giving it a different color and accentuating the contrast in brightness for visitors who cannot distinguish by color differences alone. Making a tab active, even when customers first come to a site, will be another visual clue that the row of rectangles is a collection of tabs. Use color, contrast, and preselection to make your active tabs stand out (see Figure K3.2).

Figure K3.2. Nolo's Web site differentiates the active tab by color and contrast, and the tab is preselected when a customer comes to the site.

(www.nolo.com, August 25, 2001)


Create an Indicator Line

To reinforce the illusion that the row of tabs is just that, and to bring content to the foreground, give visitors an indicator showing that the content of the page is controlled by tabs. Showing a line below the active tab in the same color—one that extends from left to right over all the content—indicates that the tab is not only a switch, but also a control over the content that customers see (see Figure K3.3).

Figure K3.3. On Amazon.com's site, the indicator line covers the width of the page, giving the impression that all content on the page belongs to that tab.

(www.amazon.com, August 25, 2001)


Tab Rows Have Limitations

Tab rows can do only so much. The number of categories that a tab row can effectively manage on one line is somewhere between 10 and 15, and when you use multiple rows of tabs the screen begins to look cluttered, where too much of it is consumed by tabs (see Figure K3.4).

Figure K3.4. This is an extreme (and fictional) example, but it makes a point: Too many tabs clutter the screen.

(www.amazon.com, August 25, 2001)


graphics/common.jpg Solution

Create tab rows using an active tab and indicator line, but with no more than 10 to 15 items, or whatever can fit on one line of tabs. Differentiate an active tab by color and contrast, as well as through preselection. Create an indicator line that extends across the page to create the impression that the whole page below the line belongs to the active tab.

Figure K3.5. Use tab rows to let customers navigate through different categories of information.


graphics/common.jpg Consider These Other Patterns

Create your tab rows graphically with a LOW NUMBER OF FILES (L1) and FAST-DOWNLOADING IMAGES (L2), or use HTML POWER (L4) to build them with HTML. To make downloading the page even faster, use SEPARATE TABLES (L3) to download through the tab row portion of the page first, giving the impression that the page is faster than it really is.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows