Chapter 10
Links
Links
Linking means that users will select and click on a hypertext link on a starting page (usually the homepage), which then causes a new page to load. Users continue toward their goal by finding and clicking on subsequent links.
To ensure that links are effectively used, designers should use meaningful link labels (making sure that link names are consistent with their targets), provide consistent clickability cues (avoiding misleading cues), and designate when links have been clicked.
Whenever possible, designers should use text for links rather than graphics. Text links usually provide much better information about the target than do graphics.
Research-Based Web Design & Usability Guidelines
10:1 Use Meaningful Link Labels
86
Relative Importance:
Guideline: Use link labels and concepts that are meaningful, understandable, and easily differentiated by users rather than designers.
Comments: To avoid user confusion, use link labels that clearly differentiate one link from another. Users should be able to look at each link and learn something about the link’s destination. Using terms like ’Click Here’ can be counterproductive.
Clear labeling is especially important as users navigate down through the available links. The more decisions that users are required to make concerning links, the more opportunities they have to make a wrong decision.
Sources: Bailey, Koyani and Nall, 2000; Coney and Steehouder, 2000; Evans, 1998; Farkas and Farkas, 2000; IEEE; Larson and Czerwinski, 1998; Miller and Remington, 2000; Mobrand and Spyridakis, 2002; Nielsen and Tahir, 2002; Spool, et al., 1997; Spyridakis, 2000.
Example:
Strength of Evidence:
Links
‘COOL’ refers to an application that allows users to search for all jobs within the Department of Commerce (not just the Census Bureau.) This link does a poor job in explaining itself. The other circled links aren’t as descriptive as they could be.
Research-Based Web Design & Usability Guidelines
10:2 Link to Related Content
87
Relative Importance:
Guideline: Provide links to other pages in the Web site with related content.
Comments: Users expect designers to know their Web sites well enough to provide a full list of options to related content.
Sources: Koyani and Nall, 1999.
Example:
Strength of Evidence:
Links
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
10:3 Match Link Names with Their Destination Pages
88
Guideline: Make the link text consistent with the title or headings on the destination (i.e., target) page.
Comments: Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page.
If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled ’First Aid,’ the next page had three options. One of them was again titled ’First Aid.’ The two ’First Aid’ links went to different places. Users tended to click on another option on the second page because they thought that they had already reached ’First Aid.’
Sources: Bailey, Koyani and Nall, 2000; Levine, 1996; Mobrand and Spyridakis, 2002.
Example:
Relative Importance:
Links
Strength of Evidence:
Link text in the left navigation panel is identical to the headings found on the destination page.
10:4 Avoid Misleading Cues to Click
Relative Importance:
Guideline: Ensure that items that are not clickable do not have characteristics that suggest that they are clickable.
Comments: Symbols usually must be combined with at least one other cue that suggests clickability. In one study, users were observed to click on a major heading with some link characteristics, but the heading was not actually a link.
However, to some users bullets and arrows may suggest clickability, even when they contain no other clickability cues (underlining, blue coloration, etc.). This slows users as they debate whether the items are links.
Sources: Bailey, Koyani and Nall, 2000; Evans, 1998; Spool, et al., 1997.
Example:
Strength of Evidence:
Links
These items appear clickable, but are not. This design may confuse users because the items are underlined and are demonstratively different, and thus attract the users’ attention.
This is a good example of misleading the user—blue text and underlined text placed at the top center of the page, and yet none of these are clickable.
Two of these graphics are not clickable—if a user mouses over one of them, they are likely to think that they are all not clickable. If one graphic is clickable, they should all be clickable.
10:5 Repeat Important Links
Relative Importance:
Guideline: Ensure that important content can be accessed from more than one link.
Comments: Establishing more than one way to access the same information can help some users find what they need. When certain information is critical to the success of the Web site, provide more than one link to the information. Different users may try different ways to find information, depending on their own interpretations of a problem and the layout of a page. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name.
Sources: Bernard, Hull and Drake, 2001; Detweiler and Omanson, 1996; Ivory, Sinha and Hearst, 2000; Ivory, Sinha and Hearst, 2001; Levine, 1996; Nall, Koyani and Lafond, 2001; Nielsen and Tahir, 2002; Spain, 1999; Spool, Klee and Schroeder, 2000.
Example:
Strength of Evidence:
Links
Multiple links provide users with alternative routes for finding the same information.
If the user misses the ‘Hours’ link in the left panel, they still have a chance to find the header in the content panel.
10:6 Use Text for Links
Relative Importance:
Guideline: Use text links rather than image links.
Comments: In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.
In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
Sources: Detweiler and Omanson, 1996; Farkas and Farkas, 2000; Koyani and Nall, 1999; Mobrand and Spyridakis, 2002; Nielsen, 2000; Spool, et al., 1997; Zimmerman, et al., 2002.
Example:
Strength of Evidence:
Links
The meaning of these three images are fairly clear, even if the accompanying text was not present.
The meanings of these two image links are not obvious at first glance.
10:7 Designate Used Links
Relative Importance:
Guideline: Use color changes to indicate to users when a link has been visited.
Comments: Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a Web site they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.
One 2003 study indicated a compliance rate of only thirty-three percent for this guideline; a 2002 study showed a compliance rate of thirty-five percent.
Sources: Evans, 1998; Nielsen and Tahir, 2002; Nielsen, 1996a; Nielsen, 1999b; Nielsen, 1999c; Nielsen, 2003; Spool, et al., 2001, Tullis 2001.
Example:
Strength of Evidence:
Links
A poor design choice. Unvisited links are in green, whereas visited links are in blue—users expect blue to denote an unvisited link.
A good design choice—unvisited links are shown in blue, and visited links are shown in purple. Note the conventional use of colors for visited and unvisited links.
10:8 Provide Consistent Clickability Cues
Guideline: Provide sufficient cues to clearly indicate to users that an item is clickable.
Comments: Users should not be expected to move the cursor around a Web site (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links.
Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability.
Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or push button.
Sources: Bailey, 2000b; Bailey, Koyani and Nall, 2000; Farkas and Farkas, 2000; Lynch and Horton, 2002; Nielsen, 1990; Tullis, 2001.
Example:
Relative Importance:
Links
Strength of Evidence:
A bulleted list of blue, underlined text. These are very strong clickability cues for users.
With at least seven non-traditional colors for links, the clickability cues for users might lead to confusion as to which links have been visited or not.
See page xxii for detailed descriptions of the rating scales
10:9 Ensure that Embedded Links are Descriptive
94
Guideline: When using embedded links, the link text should accurately describe the link’s destination.
Comments: Users tend to ignore the text that surrounds each embedded link; therefore, do not create embedded links that use the surrounding text to add clues about the link’s destination.
Sources: Bailey, Koyani and Nall, 2000; Bernard and Hull, 2002; Card, et al., 2001; Chi, Pirolli and Pitkow, 2000; Evans, 1998; Farkas and Farkas, 2000; Mobrand and Spyridakis, 2002; Sawyer and Schroeder, 2000; Spool, et al., 1997.
Example:
Relative Importance:
Links
Headings, Titles, and Labels
Strength of Evidence:
These embedded links are well designed—because the entire organization name is a link, the user does not have to read the surrounding text to understand the destination of the embedded link.
In this example, the user must read the surrounding text to gain clues as to the link’s destination. In many cases, users will not read that text.
Research-Based Web Design & Usability Guidelines
10:10 Use ‘Pointing-and-Clicking’
95
Relative Importance:
Guideline: ’Pointing-and-clicking,’ rather than mousing over, is preferred when selecting menu items from a cascading menu structure.
Comments: One study found that when compared with the mouseover method, the ’point-and-click’ method takes eighteen percent less time, elicits fewer errors, and is preferred by users.
Sources: Chaparro, Minnaert and Phipps, 2000.
Example:
Strength of Evidence:
Links
Headings, Titles, and Labels
The below site relies on users to mouse over the main links to reveal the sub-menu links (shown extending to the right in purple and black). The use of these mouseover methods is slower than ‘pointing-and-clicking.’
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
10:11 Use Appropriate Text Link Lengths
96
Guideline: Make text links long enough to be understood, but short enough to minimize wrapping.
Comments: A single word text link may not give enough information about the link’s destination. A link that is several words may be difficult to read quickly, particularly if it wraps to another line. Generally, it is best if text links do not extend more than one line. However, one study found that when users scan prose text, links of nine to ten words elicit better performance than shorter or longer links. Keep in mind that it is not always possible to control how links will look to all users because browser settings and screen resolutions can vary.
Sources: Card, et al., 2001; Chi, Pirolli and Pitkow, 2000; Evans, 1998; Levine, 1996; Nielsen and Tahir, 2002; Nielsen, 2000; Sawyer and Schroeder, 2000; Spool, et al., 1997.
Example:
Relative Importance:
Links
Strength of Evidence:
Text links should not wrap to a second line. They should be used to highlight a particular word or short phrase in a sentence, not an entire sentence.
Whenever possible, text links should only cover one line.
10:12 Indicate Internal vs. External Links
Guideline: Indicate to users when a link will move them to a different location on the same page or to a new page on a different Web site.
Comments: One study showed that users tend to assume that links will take them to another page within the same Web site. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.
Sources: Nall, Koyani and Lafond, 2001; Nielsen and Tahir, 2002; Spool, et al., 1997.
Example:
Relative Importance:
Links
Strength of Evidence:
Add URL addresses below links to help users determine where they are going. By seeing .gov and .com the user is also alerted to the type of site they will visit.
‘Exit disclaimer’ graphic informs user that the link will take them to a new Web site.
Clicking an outside link leads to this ‘interim’ page that warns users of their imminent transfer to a non-whitehouse.gov Web site.
10:13 Clarify Clickable Regions of Images
98
Guideline: If any part of an image is clickable, ensure that the entire image is clickable or that the clickable sections are obvious.
Comments: Users should not be required to use the mouse pointer to discover clickable areas of images. For example, in a map of the United States, if individual states are clickable, sufficient cues should be given to indicate the clickable states.
Sources: Detweiler and Omanson, 1996; Levine, 1996; Lim and Wogalter, 2000.
Example:
Relative Importance:
Links
Strength of Evidence:
Dramatically different colors delineate clickable regions.
The use of white space between clickable regions in this image map define the boundaries of each individual ‘hot’ area.
10:14 Link to Supportive Information
Relative Importance:
Guideline: Provide links to supportive information.
Comments: Use links to provide definitions and descriptions to clarify technical concepts or jargon, so that less knowledgeable users can successfully use the Web site. For example, provide links to a dictionary, glossary definitions, and sections dedicated to providing more information.
Sources: Farkas and Farkas, 2000; Levine, 1996; Morrell, et al., 2002; Zimmerman and Prickett, 2000.
Example:
Strength of Evidence:
Links
Clicking on a highlighted word brings up a ‘pop-up’ box which provides the user with the definition of the selected word.
The highlighted links below direct the user to a page with a definition of the word.
Research-Based Web Design & Usability Guidelines