< Day Day Up > |
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.
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 Dice.com, 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).
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.
Underlined non-links are also seen in text written specifically for the Web. Enron.com and UPAssoc.org 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.
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 Comdex.com'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. Galor.com'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.
Similarly, Dice.com 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.
Graphic images that aren't links can attract clicks even without looking button-like or 3D. An example is OfficeMax.com. 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.
Web designers can avoid non-links that look like links by following two simple rules:
Don't underline non-links.
Deemphasize nonclickable graphics.
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.
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 > |