Blooper 49: Non-Links Look Like Links

 <  Day Day Up  >  

Blooper 49: Non-Links Look Like Links

Having discussed the blooper of links not looking like links, we now turn to the opposite blooper: non-links looking like links. It's not clear which one is worse . Not letting people know where to click makes them miss things they might have found useful. Fooling them into clicking on things that aren't clickable wastes people's time and annoys them.

Underlined Non-Link Text

Because textual links on the Web are usually marked by underlining the link text, the most obvious way to trick Web users into clicking on text that isn't a link is to underline it. The text needn't even be blue to attract clicks: Even though blue is the usual color for links, textual links on the Web vary enough in color that experienced Web users tend to assume that anything underlined is a link.

At, a job-hunting website, text headings are underlined. If the heading is a link, the underlining is red; otherwise , it is black (Figure 7.9). This may seem reasonable, but since 10% of men have some sort of colorblindness, it is unwise to use simple color differences to mark important distinctions (see Chapter 8, Blooper 58: Shades of Beige: Color Differences too Subtle).

click to expand
Figure 7.9: (Jan. 2002) ” A ” Headings that are links are red and underlined. B ” Headings that are not links are black and underlined, creating potential for users to mistake them for links.

Misleading underlined non-link text is sometimes found in documents that were repurposed from print media to Web pages without adjustments for the Web medium. An example is a book review from Dr. Dobbs Journal that was put on its website (Figure 7.10). The irony is that underlining book titles is a leftover from typewriters, which were incapable of italics. It is no longer necessary, even in print media.

click to expand
Figure 7.10: (Sept. 2002) ”Underlined book titles look like links, but aren't. They should be italicized, not underlined.

Underlined non-links are also seen in text written specifically for the Web. and both underline some of the headings at their websites in blue, much like links are marked (Figure 7.11). Some visitors to these sites will mistake the headings for links.

click to expand
Figure 7.11: A ” (Apr. 2002); B ” (Apr. 2002) ”Heading that isn't a link is in blue and underlined. Link near it is blue and underlined. Potential for confusion? You decide.

Graphics Look Clickable, but Aren't

If graphic images attract users' clicks but aren't really clickable, we have another form of the "Non-Links Look Like Links" blooper. Like underlined text, graphical elements having a button-like shape and/or a 3D appearance will appear to most Web users to be clickable " buttons ."

Examples of misleading 3D graphics can be seen at the websites of the Comdex computer conference and Galor, a software company. On's home page (Figure 7.12[A]), the topic headings on the left side (e.g., "Upcoming Events") look like clickable buttons but are not. They are just display graphics intended to make the headings stand out. Similarly, the "Comdex Fall Countdown" heading is not a button. Home and Register are buttons.'s splash page (Figure 7.12[B]) has four "icons" that look like separate buttons but aren't. Together, they simply make up the company logo.

click to expand
Figure 7.12: Nonclickable graphics that look like clickable "buttons." A ” (Sept. 2001) Topic headings on left side look clickable but aren't. B ” (Sept. 2002) Splash page has "icons" that look like separate buttons but aren't.

Similarly, has an area on the left (headed in yellow) that looks like a secondary navigation bar subordinate to the top row of tabs (Figure 7.13). However, it isn't a secondary navigation bar; it's just a table of contents for the article on the right. Nothing on it is a link.

click to expand
Figure 7.13: (Jan. 2002) ”Table of contents on left looks clickable but is not.

Graphic images that aren't links can attract clicks even without looking button-like or 3D. An example is The "Browse" navigation bar on the left of product-category pages uses a magnifying glass icon to indicate that side-by-side product comparisons are available for certain product categories (Figure 7.14). However, at the bottom of the list is the same icon, with the same size and color saturation and the label "Click this icon to see a side-by-side comparison." Visitors to this site might take this instruction literally, clicking the inactive legend rather than the real icon.

click to expand
Figure 7.14: (Jan. 2002) ”Unclear which "icon" is clickable. The icon at the bottom left is not clickable. It is only a legend explaining the upper one.

Avoiding the Blooper

Web designers can avoid non-links that look like links by following two simple rules:

  • Don't underline non-links.

  • Deemphasize nonclickable graphics.

Don't Underline Non-Links

On the Web, only links should be underlined. Don't underline textual headings. Don't use underlining for ordinary emphasis. Don't assume that color alone is enough to distinguish link underlining from "ordinary" underlining.

When text written for other media ”print, electronic documents ”is "repurposed" for the Web, the conversion process should include changing underlined text to use other means of emphasizing text, such as HTML's <EM> or <STRONG> tags or emphasis styles. In printed text, titles of publications such as books and periodicals are often underlined, but only when italics is unavailable. Because italics is available on the Web, publication titles should be underlined only if they are links.

Don't Make Non-Links 3D

Graphic elements that are not clickable should not appear three dimensional (3D). On-screen items that are 3D attract clicks very strongly.

 <  Day Day Up  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson © 2008-2017.
If you may any questions please contact us: