Blooper 59: Dead or Alive: Active Buttons Look Inactive

< Day Day Up >

There is one specific use of color differences that most Web users, because they also use desktop software, are accustomed to: inactive controls that appear "grayed out." Graying controls to indicate that they are inactive is a longstanding convention in desktop software. Websites and Web applications can exploit this convention, and users' familiarity with it, to their advantage. The flip side is that websites and Web-based applications that violate this convention risk confusing and confounding their users.

There are two ways to violate the convention:

Active controls and links that look inactive (grayed)
Inactive controls and links that look active (ungrayed)

In practice, many websites commit the first violation, and few commit the second. Therefore, the focus here is on examples of graying controls and links that are active.

Before a recent site upgrade, Erlbaum.com used gray on its navigation bar to indicate pages other than the current page. The current page's link in the navigation bar was solid black, and the links to all other pages were gray. The image shown is from the home page (Figure 8.28). The link colors falsely suggests that the home-page link is active, and the others are inactive. In fact, all the links are active. Ironically, the only link that looks active in this navigation bar is the one that should be inactive (see Chapter 3, Blooper 20: The Circle Game: Active Link to Here).

Figure 8.28: www.Erlbaum.com (Feb 2002)-Navigation bar suggests that only link to Home is active, but all the links are active.

Erlbaum.com's convention for making the current page stand out might make sense in isolation. However, the Web doesn't exist in isolation. It exists in the context of personal computers and desktop software. By violating the GUI convention, Erlbaum.com violates users' expectations.

Travelocity.com uses color saturation to focus users' attention on buttons that continue the current transaction. Buttons that continue the transaction appear bright, and those that cancel or diverge from the transaction appear pale. The Flight Search page has two buttons: Search All Airlines and Cancel (Figure 8.29[A]). The Cancel button looks as if it is inactive, but it is just as active as the Search All Airlines button. It is pale to show that it doesn't continue the transaction. On the Search results page, the Buy Now and Hold/Save buttons are fully saturated , and the two buttons at the bottom of the list of flights are pale, making them look inactive (Figure 8.29[B]).

Figure 8.29: www.Travelocity.com (June 2002)-Pale buttons are intended to indicate "off path ," but in fact suggest "inactive." A- Buttons from Flight Search page. (b) Search results page.

Again, Travelocity's convention wouldn't be bad, except that the pale buttons can easily be perceived as inactive.

Erlbaum and Travelocity at least have a clear rationale-albeit a misguided one-for graying links and buttons. In contrast, RadioShack's website uses gray-looking buttons for reasons that to an outsider are obscure. RadioShack.com's home page has several navigation bars for different subsections of the site. In most of them, the buttons appear fully saturated (Figure 8.30[A]). However, in the Special Features navigation bar, the buttons appear grayed-inactive (Figure 8.30[B]).

Figure 8.30: www.RadioShack.com (Jan. 2002)-Two navigation bars on home page. Buttons in Special Features navigation look inactive.

Finally, we have an example of a site in which some buttons look inactive simply because of their color. Monterey.com's home page is festooned with buttons (Figure 8.31), most of which are bright and saturated. Two, however, are pale blue. A visitor to this site might assume they are inactive and not bother to try them. That visitor would be wrong, but when people are wrong about what something on your website means, it's not their problem, it's yours.

Figure 8.31: www.Monterey.com (Jan. 2002)-The last two buttons (lower right) are paler than the others and so could be misinterpreted as being inactive.

Avoiding the Blooper

At least until PCs are replaced by Web appliances as the dominant vehicle for surfing the Web, designers need to recognize that most Web browsing occurs on a PC ^[7] surrounded by desktop applications. Therefore, GUI software convention that inactive controls are grayed should be followed-or at least not blatantly violated-on the Web.

As an example of how the convention can be applied to the Web, I modified the Erlbaum.com navigation bar (Figure 8.32[A]) to follow the convention. It still shows that we are on the home page, but its colors have been reversed : The link to the home page is gray; all the other links are black (Figure 8.32[B]). This works because since this is the navigation bar for the home page, the Home link should be inactive and all the others should be active.

Figure 8.32: Correction of blooper at www.Erlbaum.com - A- Before. (b) After. Home-page link appears inactive because it is; this is the home page. All other links appear active and are.

Similarly, fixing the blooper at Travelocity.com requires making all active buttons look fully saturated, while marking on-path buttons in some way that doesn't make them look more saturated (Figure 8.33). I marked the Search button by giving it a thick black border. This is similar to how desktop GUI software marks "default" dialog box buttons-the ones that will be triggered if the user presses the Enter key on the keyboard (Microsoft, 1999). That similarity is not an accident : Although Web pages can't have default buttons, on-path buttons are the ones most likely to be clicked.

Figure 8.33: Correction of blooper at www.Travelocity.com -Both buttons are fully saturated and so appear active, but on-path button is highlighted in addition.

^[7] I am using "PC" here to mean any personal computer, regardless of whether it runs Windows, MacOS, Unix, Linux, or any other operating system.

< Day Day Up >