Chapter 7: Link Appearance Bloopers

< Day Day Up >

The next chapter discusses bloopers in the graphic design and layout of websites -how they are presented. Before we get to those, let's examine a specific type of graphic design bloopers: those concerning how links are presented. Links may be the most important aspect of the Web: They are the primary form of navigation. They are what makes it a web.

If links are the primary form of navigation on the Web, shouldn't link-presentation bloopers be considered a special type of navigation blooper? Yes. But didn't we just say link-presentation bloopers are a type of graphic design blooper? Yes, we did. There is no contradiction. Link-presentation bloopers are simultaneously graphic design bloopers and navigation bloopers. That is why link-presentation bloopers warrant their own chapter.

Blooper 48: Links Don't Look Like Links

Because links are the primary means of navigating on the Web, Web users should be able to tell what is a link and what is not. This is based on a more general design principle: Users of interactive systems should be able to tell at a glance what can be manipulated and what cannot.

Here, I discuss links that because of poor presentation mislead people into believing they are not links. The next blooper covers non -links that because of poor presentation mislead people into believing they are links.

Textual Links

All Web users and designers know the convention for displaying textual links: underlined , preferably in blue or a similar color . However, some websites ignore this convention. Let's look at some examples.

At Stanford.edu, textual links are not underlined. Instead, they are displayed in a bold, red font (Figure 7.1[A]). This is already a problem, because most Web users won't immediately recognize the red text as links. However, it gets worse : Non-link text is emphasized by making it - you guessed it - bold and red (Figure 7.1[B]). Users of Stanford.edu won't be able to tell links from emphasized non-links .

Figure 7.1: www.Stanford.edu (Jan. 2002)- A- Textual links not underlined; marked in bold, red font. B- Non-link text emphasized in bold, red font.

Poorly marked links can also be seen at Monterey.com and WisconSUN.org. At Monterey.com, the link "Site Guide" appears in a unique font (Figure 7.2[A]). It looks neither like other links nor like a heading. At WisconSUN.org, the links appear in blue but are not underlined (Figure 7.2[B]). They stand out less than the headings above them, which aren't links.

Figure 7.2: Unclear links- A- www.Monterey.com (Jan. 2002) "Site Guide" link is in a unique font, unlike other links. B- www.Wisconsun.org (Jan. 2002) Links are blue but not underlined. They are easy to miss .

A slightly different form of the blooper can be seen at the website of Wiesner Brothers (Figure 7.3). In the line of contact information at the bottom of the site's home page, nothing is underlined to mark it as a link. The street address (and the "click here" text following it) and the email address are links, but it takes peering closely at the small line of text to determine that (see Blooper 52: "Click Here ": Burying Links in Text, in this chapter).

Figure 7.3: www.WiesnerBros.com (Feb. 2002)-Address and email address are links but are poorly marked.

At Stanford.edu, WisconSun.org, and WiesnerBros.com, the links are encoded in ordinary link tags, but with attributes set to inhibit the default underlining and color. At Monterey.com, an image of text was used in place of a textual link. Why? A common excuse is that the default appearance of textual links clashes with the page's graphic design and color scheme. In other words, usability is often sacrificed for the sake of better graphic appearance. In my opinion, usability is more important than graphic appearance. However, even if we concede that graphic design considerations sometimes trump usability, one would have to make the case that the graphic appearance actually benefited from the trade-off. Except for the WiesnerBros site, I don't think it did. Thus, for at least three of these examples, usability was sacrificed for nothing.

Graphical Links

Graphical links can be "disguised" as non-links just as textual links can. By default, image links are surrounded by a blue border. In many websites, the blue border is turned off. Again, the usual excuse is that the blue border messes up the visual design. Never mind that turning the border off leaves users with few hints that the image is a link. ^[1]

As an example, look at these product offerings at Amazon.com (Figure 7.4). The pictures are links, but that isn't apparent from how they appear. In this case, the image links go to the same page as the nearby underlined textual link, so the consequences of this blooper aren't terrible. If, however, the images were the only links to their respective pages, the consequences of the blooper would be more serious, because some users would never find the pages to which the images link.

Figure 7.4: www.Amazon.com (May 2002)-The camera and film pictures are links, but that isn't obvious.

Buttons

Most "buttons" displayed on the Web are actually just image links or image maps divided into link areas. Only a small proportion of buttons on the Web are actual button controls, such as the standard browser form-submit buttons. Thus, Web buttons can easily be designed poorly, so they don't look like buttons.

As an example, consider HotelDiscount.com. Customers specify when they need a hotel room and what sort of room they want, and then send the site off to search for suitable rooms (Figure 7.5). I wonder how many visitors to this site set the search controls and then waste several seconds trying to find a "Go" or "Search" button. By a process of elimination , users might figure out that the blue area labeled "Display ONLY Available Hotels" must be the Search button. The odd label doesn't help: There is no option to display un available hotels, even if that somehow made sense.

Figure 7.5: www.HotelDiscount.com (Mar. 2002)-The blue area at the bottom is the form's Search button, but that isn't obvious.

Avoiding the Blooper

One could argue that Web users can distinguish links from non-links by watching the shape of the cursor as they move it around the screen. But that ignores the fact that most Web users, especially nontechnically trained ones, don't watch the cursor or notice changes in its shape. Furthermore, it is bad user -interface design to require users to move the pointer over components to check whether they are clickable. User interfaces, including websites and Web applications, should make the clickability of screen components obvious at first glance.

The easiest -and usually best-way to ensure that links look like links is to follow the conventions.

Underline Textual Links, Preferably in Blue

Amazon.com's home page shows how it should be done (Figure 7.6). There is no mistaking any of the textual links on this page. Even though Amazon uses other color schemes on other pages, the link colors remain the same: blue for not-yet-followed ones, magenta for already-followed ones. Usability is more important here than preserving a color scheme.

Figure 7.6: www.Amazon.com (May 2002)-Textual links are unmistakable because they all follow the convention exactly.

Graphical Buttons Should Look Like Buttons

Buttons constructed from images should look clearly like buttons. Monterey.com may not display textual links clearly (see Figure 7.2[A]), but buttons on its home page do look like buttons (Figure 7.7).

Figure 7.7: www.Monterey.com (Jan. 2002)-Buttons are clearly clickable.