Blooper 60: Terrible Tabs

< Day Day Up >

In the mid-1980s, after GUIs had been invented but before they became dominant in desktop computer software, a clever designer got the idea of simulating tabbed pages onscreen, to let users easily switch between pages of information sharing the same screen space. Exactly who did this first is unclear, but certainly one of the first software products to use tabbed pages was Apple Computer's HyperCard, in its Help stack (Figure 4.34).

Tabbed panels are an on-screen simulation of tabbed cards such as those in a recipe box, or of tabbed pages in a notebook. Most computer users know how to use physical tabbed cards and pages. On-screen tabbed panels leverage that knowledge.

When a user clicks on a tab, the corresponding panel moves to the "front" of the stack, displaying whatever is on it. Tabbed panels allow a lot of information and controls to be organized into a compact space.

Web designers like tabbed panels for the same reasons that they are used in desktop software. However, tabbed panels-unlike radiobuttons , checkboxes, and pull-down menus -were not provided as a standard HTML control. Web designers had to "grow their own" tabbed panels. And so they did. Some more successfully than others. Furthermore, tabs are often used on the Web in ways for which they are ill suited.

I'll be blunt: Many tabs on the Web are atrocious. Just because a designer creates a horizontal navigation bar and calls it "tabs" doesn't make it tabs. In order to be worthy of that name , it must look and act like tabs. Many so-called "tabs" on the Web do neither and so fail to tap into users' prior knowledge of how tabs work. The result is at least uncertainty and hesitation, sometimes even confusion, in users.

Figure 8.34: HyperCard Help (1987)-An early use of tabbed pages in desktop graphical user interface software.

Three common flaws exhibited by tabs on the Web are as follows :

Labeled tabs are not separated from each other.
Labeled tabs do not appear contiguous with or connected to their corresponding panel.
The tabs don't show which one is currently selected.

Let's look at examples of each of these flaws in actual websites .

Labels Not Separate

A good example of tabbed panels with poorly separated labeled tabs comes from ITN.net. The Airline Reservation page has tablike controls for switching between three different reservation forms, each specialized for one type of trip (Figure 8.35). These "tabbed panels" are primitive; that is, the labeled tabs are not separated. On the other hand, these tabbed panels do indicate the currently selected tab, and the label is fairly well connected to the panel.

Figure 8.35: www.ITN.net (Jan. 2002)-"Tabs" are not physically separated.

The primitiveness of these tabs is difficult to understand, because at the top of the same page is another, better-designed set of tabs. They are for switching between various services of the parent company, American Express (Figure 8.36). They exhibit none of the three common flaws of tabbed panels on the Web. More coordination between designers could have improved ITN's poor tabs.

Figure 8.36: www.ITN.net (Jan. 2002)-Well-designed tabs.

Label Not Connected to Panel

In the "nice try, but no cigar" category are tabs that visually separate different labels and mark the currently selected tab but have no visible connection to their corresponding panel. Their designers tried so hard to create nice tabs, but overlooked one important detail: When a tab is selected, it comes to the front and appears physically connected to-that is, contiguous with-its panel. If it doesn't do that, it may be a reasonable switching control, but it won't be recognized by users as tabs.

Fedex.com provides a good example. The site's main navigation bar appears as a set of orange tablike buttons near the top of the page (Figure 8.37). Though "tablike," these are not tabs, because there is no visible continuity between the selected tab and the corresponding content page.

WalMart.com shows what Web designers sometimes do to create a visual connection between the tabs and the corresponding content panels. Under the labeled tabs is a thin strip in the same color as the selected tab (Figure 8.38)-sorry, not good enough. The colored strip is too thin to give an impression that the tab connects to the panel below.

Figure 8.37: www.Fedex.com (Jan. 2002)-Tabs don't connect to panel.

Current Tab Not Indicated

Possibly the worst tabs I have seen are those on the Acer America website, AAC.Acer.com. The main navigation bar is a set of "tabs" at the top of the content area of each page. The "tabs" commit both of the aforementioned flaws: The labeled "tabs" are all run together, and the selected tab does not appear connected to its corresponding panel. These "tabls" also commit the third flaw: The currently selected tab is not marked (Figure 8.39).

Figure 8.38: www.WalMart.com (Jan 2002)-Tabs don't connect to panel.

Figure 8.39: aac.Acer.com (Feb. 2002)-Tabs aren't separate and don't show which one is selected. A- Products page. (b) Buy Acer page.

One could argue that Acer America doesn't have tabs-just a poorly designed horizontal navigation bar. However, the site is clearly designed to match the main Acer site, Acer.com. Acer.com's navigation bar, though initially looking similar to Acer America's, looks much more like tabs when an item is selected (Figure 8.40).

Figure 8.40: www.Acer.com (Feb. 2002)-Currently selected tab is white and connected to its panel.

Avoiding the Blooper

A tabbed panel on the Web should look and act like tabs. Otherwise, it may be a horizontal navigation bar, but it isn't tabs and won't exploit people's experience with tabbed panels in desktop software and physical tabbed cards and pages.

Designing Tabs for the Web

Eventually, HTML or its successors should provide a standard tabbed panel component. It would be interpreted and presented by the browser, just as form controls such as radiobuttons are today. Until that day, Web designers will continue to have to "grow their own" tabbed panels.

Guidelines for designing tabbed panels that users will recognize as tabs can be devised simply by reversing the three flaws described earlier:

Separate labels. Labeled tabs should be visibly separated from each other.
Connect tabs to panels. Labeled tabs should appear contiguous with or connected to their corresponding panel. The best way to do this is to make the background of the panel the same color as the labeled tab and omit any visible line separating the tab from the panel.
Mark current tab. The tabs should indicate the currently selected tab. If the tabs are well connected to their panels, that may be enough (as it is in desktop software). However, additional ways of marking the current tab can't hurt, for example, increased size , boldness of label, and color.

The Ideal: Desktop GUI Tabs

Consider tabbed panels in desktop GUI software to be the ideal. Tabs on the Web should look and act as much like GUI tabs as possible. The less like GUI tabs they are, the less likely Web users will be to recognize them as tabs (Figure 8.41).

Figure 8.41: Microsoft Word document properties-Typical tabs in desktop GUI software.

Good Web Tabs

The best tabs I have seen on the Web are at AskJeeves.com and ESPN.com. The tabs at these two sites follow all three design guidelines and as a result look very much like the tabs computer users know from desktop software (Figure 8.42).

Figure 8.42: A- www.Askjeeves.com (Feb. 2002); (b) www.ESPN.com (Jan. 2002)-Well-designed tabs- separated labels, tabs connect to panels, current value is marked.

A Band Is Better than Nothing

Remember the guideline that labeled tabs should appear connected to their respective panels. Sometimes it isn't feasible for the whole background of a tab's corresponding panel to be the same color as the labeled tab. A way to approximate visual continuity is to have the tabs connect to a strip of the same color, hopefully with some data and controls on it. For the approximation to work, the strip must be at least 5 cm (1/4 inch) wide. We saw in the WalMart.com example (see Figure 8.38) that a thin, colored line below the tabs doesn't create the effect of visual continuity between the tabs and the panels.

An example of a fairly successful approximation to tabs can be found at iFilm.com (Figure 8.43).

Figure 8.43: www.iFilm.com (Jan. 2002)-Blue area below tabs provides required continuity.

< Day Day Up >