k3

Tab rows at a glance

Site Genre: Pattern Group k

magnify imageFigure K3.1 Well-designed tab rows provide visual cues that help customers recognize and use them more effectively.

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.

Close

PROBLEM

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

buy the book to find out more

SOLUTION

magnify image Figure K3.6 Use tab rows to let customers navigate through different categories of information.

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

Other Patterns to Consider

Create your tab rows graphically with a LOW NUMBER OF FILES (L1) and FAST-LOADING IMAGES (L2), or use HTML POWER (L4) to build them with HTML. If there are too many tabs, consider combining your tab row with a JUMP MENU (K16). If you’re modifying an older Web site that still uses HTML tables for layout, you can use SEPARATE TABLES (L3) to download the tab row portion of the page first, giving the impression that the page is loading faster than it really is. For newer Web sites, we advocate using XHTML and STYLE SHEETS (D11) to create tab rows.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.