Blooper 52: Click Here : Burying Links in Text

---

Blooper 52: "Click Here ": Burying Links in Text

Many professionally developed websites look as if they were developed by amateurs. One thing that really conveys that impression is links embedded in prose text. The oftseen "click here " is the most familiar example, but there are others.

Amateurish

It is common to see such links in personal and family websites. For example,

Our family trip this year was to Yosemite National Park in California. For photos, click here . For photos of our previous vacations , click here .

When I see "click here" links in a professionally designed website, I consider it a blooper. In my opinion, such links are too informal and amateurish for a professionally developed website.

For example, the College Reading & Learning Association has on its home page a link labeled " please click on this link " (Figure 7.29). Link labels don't have to say they are links, and they needn't say "click me." When links look like links, Web users know what to do.

Figure 7.29: www.CRLA.net (Feb. 2002). Link embedded in text instead of just having the label "Bylaws Change" be the link.

Buried

Not only do such links give site visitors an impression of an amateurish design, they can be hard to spot. Earlier in this chapter, we saw a nonunderlined "click here" link at WiesnerBros.com that was very well hidden (Figure 7.3).

Pitsco-lego-dacta.com also has a hidden "click here" link. The site begins with a splash page (Figure 7.30). The link from there to the home page is easily missed. It would make much more sense to make the entire logo-maybe even the entire page-a link to the home page.

Figure 7.30: www.Pitsco-lego-dacta.com (Feb. 2002)-Link from Splash page to home page is hard to spot.

Even when links are underlined or colored differently from the surrounding text, they can be hard to spot. Try to find the link to buy a bus ticket at Greyhound.com (Figure 7.31[A]) or the link to a list of speakers at SDExpo.com (Figure 7.31[b]).

Figure 7.31: "Click here " links. A- At www.Greyhound.com (Jan. 2002), the link to buy tickets is hard to find. B- At www.SDExpo.com (Feb. 2002), the link to the faculty list is buried.

Uninformative

Most importantly for usability, even when embedded "click here" links can be spotted in the surrounding text, they are uninformative. People usually scan a Web page for information or links matching their goals. If they spot a "click here" link, all they see is that they are supposed to click there. The link label doesn't say what the link does. Users must read the surrounding text to determine that.

Look at an example from Yale University's alumni subsite . In a small font are some very wordy instructions with a "click here" link (Figure 7.32; see also Chapter 6, Blooper 41: Too Much Text). Try to figure out quickly where the link goes. This blooper occurs despite Yale's excellent Web style guide (Lynch and Horton, 2002), which says that the link should be on the heading.

Figure 7.32: www.aya.Yale.edu (June 2002)-Long instructions with "click here" link.

Also forcing users to read around the links, Stanford University's website uses verbose bulleted items with "click here " links (Figure 7.33). It would be much more effective to list-and link-only crucial phrases: "Register for more courses, " "Register another person, " " Drop a course."

Figure 7.33: www.Standord.edu (Jan. 2002). "Click here" links in bulleted items.

Avoiding the Blooper

Websites of companies, nonprofit organizations, and government agencies should be less chatty and verbose than personal and family websites. With the exception of articles that comprise a site's primary content, such as news articles or member postings, prose text should be minimized so people can scan pages easily (Krug, 2000; see also Chapter 6, Blooper 41: Too Much Text). Sites should be designed for maximum clarity and usability.

"Click here for details" is poor Web design. Instead, the link should consist of just the most important word or phrase, for example, " Details. " More generally , links should not be buried in prose paragraphs. There is one exception, discussed later, after some examples of avoiding the blooper.

Northwest Airlines' website provides a nice before/after contrast. In February 2002, NWA.com's Map Center page included both a "click here " link and several heading-style links: "Seat Maps," "Maps and Directions," and so on (Figure 7.34[A]). The "click here " link was in fact a "stealth duplicate" of the "Maps and Directions" link; that is, it went to the same place. Later that year, NWA.com eliminated the "click here " link (Figure 7.34[B]; see also Chapter 3, Blooper 17: Deceptive Duplicate Links).

Figure 7.34: Eliminating a blooper at www.NWA.com . A- Feb. 2002- "Click here " link at lower left goes to the same place as "Maps and Directions" link in middle of page. B- May 2002- "Click here " link is gone.

The Macromedia website's Contact Macromedia page shows how links should be done (Figure 7.35). The page could have stated "For directions to Macromedia Headquarters, click here ." For the different categories of contact information, they could have put the link on some words in the brief description. Wisely, they didn't. The headers are the links. The links stand out, so the page is easy to scan.

Figure 7.35: www.Macromedia.com (June 2002)-Links to directions and to the various categories of information are presented as headers, not as "click here " links.

Table 7.1 provides additional examples of this blooper, along with alternative designs that avoid it.

Table 7.1: Examples of Embedded Textual Links, and How to Avoid Them

Instead of	Make Links Stand Out
Click here for a description of this collection.	Employee Skills Collection	Description
If the item you want is not listed above, check the next 10 or the previous 10 items.	Previous 10 items	Next 10 items
House: 3 BR, 2 BA, near public transit. Asking $123,000. Click here for details.	House: 3 BR, 2 BA, near public transit. Asking $123,000.	Details
Your shopping cart currently contains 3 items, with a total cost of $76.45.	Shopping cart: 3 items Total cost: $76.45	View Cart Contents
Click here for information on priority settings and response time.	Priority settings and response time

Exception: Links between Documents

The only links that don't cause usability problems when embedded in text are cross-links between documents.

These are links between elements of the information content of sites, rather than links for navigating the site." ^[4] The following are some examples:

• Terms to their definitions

• Names to corresponding illustrations

• Text to comments on that text

• Cross-references between online manuals or help files

^[4] Sometimes called "hypertext links," but that term is potentially confusing, because it sometimes refers to all links on Web pages.

---