Jakob Nielsen's Alertbox, May 10, 2004:

01 | Guidelines for link design

With few exceptions, textual links should be colored and underlined to achieve the best perceived affordance of clickability. Following these guidelines for web site or application design will make it easier for users to immediately determine what links they can click, reducing the probability that they’ll overlook important links.

This Alertbox's Permanent Link: http://www.useit.com/alertbox/20040510.html

01a | Use strong, contrasting colors with some form of underline.

Links should stand out as much as possible on the computer screen as items that can be clicked. Underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.

01b | Use different shades of the primary link color for visited links.

Primary links should be vivid, bright, and saturated. Visited links should then look “used,” dull or washed out by comparison. Using different colors (e.g., orange and green) makes it difficult to understand the relationship between the types of links.

01c | Use bold or italics for emphasis with text that’s not a link.

If you are going to use underlines, reserve the technique for links. Underlines on the web have a general expectation in terms of behavior, and users will be confused or disappointed if underlined text doesn’t match this expectation.

01d | Reserve primary link color for links only.

You should generally avoid color for text unless it’s a link. However, assuming it differs enough from the primary link color, you can use colored text in things like a checklist summary, where you could show the word “OK” in green and the word “Error” in red.

01e | Keep hover effects simple.

Overly complex hover visualizations can make the page appear cluttered and busy as the mouse moves across the screen. In general, stick to simple hover states, like adding an underline or changing link color.

01f | Use [title] to help predict where a link will lead.

With modern browsers (Internet Explorer 5.5+, Netscape 6+, Firefox, Opera 6 and Safari), users can see [title] values by hovering over the links in this column. You should use this attribute as much as possible.

01g | Use large font sizes for primary links.

Use small fonts for links that few users will need (such as copyright info), as long as you place those links in a secondary location (such a footer) so users don’t feel obligated to read them.

01h | Provide an ample amount of text and whitespace for links.

This is particularly important for users with poor motor skills. If you target seniors or otherwise have a large percentage of older users, make your links appear in a larger sizes (12 pixels or more) and include enough text to make links easy to click on.

Related quickcards: 02 Link Content, 03 Graphical Buttons, 08 Design Matters

---

» Other Alertbox columns (complete list)

» Sign up for newsletter that will notify you of new Alertboxes