Effective Use of Links

This topic focuses on the most common mechanism supporting website navigation: links. For the most part, the guidelines provide reminders that links should do what the user expects, rather than surprising him/her by leading to an unanticipated page.

Remember that if users become too confused, they will simply leave your site. Therefore, it's important to provide structural navigation aids as well, as discussed in the other topics under Navigation Aids.

Appearance of Links

Webpages use links in three different ways:
  1. To provide quick access to other parts of the site (these links most commonly occur in menubars or navigation bars like the one at the left)
  2. To point users to pages with more information about the text or graphic mentioned in the link
  3. To point users to an alternative source, in case the current page isn't what they're looking for (these are typically phrased as "See also")
Regardless of the purpose, users expect links to have a predictable appearance. As listed under Usability "Dos and Don'ts", all links should be underlined and use the standard colors of blue for non-visited and purple or magenta for previously visited links. Usability studies have shown conclusively that users dislike non-standard links - and make more errors using them.

An obvious corollary is that non-link text should never be underlined and should largely avoid the standard link colors.

Links should be formatted using upper- and lower-case letters, following the conventions for titles (see Use of Fonts. That is, nouns, pronouns, verbs, adjectives, and adverbs should begin with a capital letter, while conjunctions and articles should be all lower-case.

Where and How to Use Links

Link text must be chosen carefully, since their color and underlining automatically make links an eye-catching part of any webpage. Exploit this visibility. Links can be extremely effective when they visually highlight the most important words or concepts on the page at the same time as providing access to more information about them (see Helping Users Find Key Content).

All links should be self-explanatory without having to read any of the surrounding text. Avoid meaningless phrases like "Click Here" or "To See Information on" - they take up space and require time to read, without adding any significant content. Instead, give the user a short phrase that indicates why he/she should try the link.

To improve the readability of links, underline the words that really matter, not the whole title of a document or webpage. In general, that means keeping link text to 6 words or less.

Example: Compare how easily you can grasp the purpose of these paired links:

See the NEES CD Deliverables: NEES SI Training and Documentation Plan and NEES Consortium Development and System Integration Projects: Communications Agreement

See the NEES CD Deliverables: NEES SI Training and Documentation Plan and CD/SI Communications Agreement

To help clarify the purpose of links, include additional explanatory information, but not as part of the link itself.

Example: Here, the extra information clarifies what might be a meaningless title to someone not involved in the NEES program:

SI Project Execution Plan: How and when the information technology system to connect NEES laboratories will be developed

Special attention is needed when multiple links appear in a list. Group the links into categories, taking care that their titles (the underlined portions) clearly distinguish one from another. Within each group, order the links according to their importance to the casual user. Order the groups in similar fashion so that the first thing the user sees is the most important link of the most important group.

Links based on people's names should lead to short biographies or their own webpages, not to an email dialog. The implication of a link is that it will help the user find more information about the subject, not communicate with the subject. If you want to include an email link, show the email address rather than the person's name.

Improving User Efficiency

Locate alternative ("See Also") links at the top of the webpage, so users will see them as soon as they discover it's not the content they were looking for. Putting these links at the bottom of the page assumes that readers will scroll to the bottom even if the page isn't of interest - not a likely event.

Always refer to the same link target using the same URL, so that the browser can detect if the page has already been visited. If you use two different URLs (e.g., ./nav_links.html and http://www.nacse.org/NEESweb/usability/nav_links.html, this may not be possible.

When you want to link to a larger copy of an image, make the image itself be the link. The border around the image cues the user to the fact that it can be clicked on for a larger view, and you avoid cluttering the page with the name of an image file (which is usually pretty ugly). Alternatively, make the key phrase in the caption serve as the link.

Add an ending slash to any URL that refers to a directory (i.e., implictly to the index.html file). This improves performance slightly for each such link by avoiding the need for re-direction as the server tells the browser that the link refers to a directory.