|< Day Day Up >|
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.
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.
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.
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]).
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.
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."
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).
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.
Table 7.1 provides additional examples of this blooper, along with alternative designs that avoid it.
Make Links Stand Out
Click here for a description of this collection.
Employee Skills Collection
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.
Your shopping cart currently contains 3 items, with a total cost of $76.45.
Total cost: $76.45
View Cart Contents
Click here for information on priority settings and response time.
Priority settings and response time
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."  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
 Sometimes called "hypertext links," but that term is potentially confusing, because it sometimes refers to all links on Web pages.
|< Day Day Up >|