<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
<title>Design Guidelines for Visualizing Links (Jakob Nielsen's Alertbox)</title>
<meta name="keywords" content="hypertext links, perceived affordance, clickability affordances, linking, underling, underlines, link typography, hover, hovering">
<meta name="description" content="Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.">
<link title="Useit House Style" rel="stylesheet" href="/useit_style.css"
<link rel="start" href="/" title="Home page for Jakob Nielsen's website">
<link rel="contents" href="./" TITLE="List of all Alertbox columns">
<link rel="parent" href="./" TITLE="List of all Alertbox columns">

<table bgcolor="#ffff66" width="100%" class="navbar">
<a href="/" title="Home page for Jakob Nielsen's website"><strong><span class="useem">use</span>it.com</strong></a> <img 
width="13" height="9" align="bottom" alt="->">
<a href="./" title="List of all Alertbox columns">Alertbox</a> <img
src="/images/arrow_yellow.gif" width="13" height="9" align="bottom" alt="->">
May 2004 Link colors
<td align="right">
<small> | <a href="/search/">Search</a>

<p class="overline">
<strong><a href="/jakob/" title="Author biography">Jakob Nielsen</a>'s
Alertbox, May 10, 2004:</strong></p>
<h1>Guidelines for Visualizing Links</h1>

<blockquote style="background-color: #FFFFDD">
Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.


Here are the current usability guidelines for showing textual links:
<li>To maximize the perceived affordance of clickability, <strong>color</strong> and <strong>underline</strong> the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
<li style="margin-top: 0.5ex">Assuming the link text is colored, it's not always absolutely necessary to underline it.
<li>There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design <em>clearly</em> indicates the area's function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
<li>Exception: underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
<li>Exception: underlined links are important for low-vision users' <a href="http://www.nngroup.com/reports/accessibility/" title="Nielsen Norman Group report: Making the Web Easy to Use for Users With Disabilities -- 75 Best Practices for Design of Websites and Intranets, Based on Usability Studies with People Who Use Assistive Technology" class="old">accessibility</a>, so retain underlines if accessibility is a priority for your site or you have many users with low vision.
<li style="margin-top: 0.5ex">Don't underline any text that's not a link, even if your links aren't underlined. <strong>Reserve underlining for links</strong>. Because underlines provide a strong perceived affordance of clickability, users will be confused and disappointed if underlined text doesn't have an actual affordance to match this perception.
<li style="margin-top: 0.5ex">Use <a href="http://www.useit.com/alertbox/20040503.html" title="Alertbox, May 2004: Change the Color of Visited Links" class="old">different colors for visited and unvisited links</a>.
<li>The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out).
<li>The two colors should be variants or shades of the same color, so that they're clearly related. Using drastically different colors (say, orange and green) makes it hard for users to understand the relationship between the two types of links and to identify which color is the "used" version of the other.
<li>Shades of blue provide the strongest signal for links, but other colors work almost as well. 
<li>As always, when using color to signal information, you should provide redundant cues for color-blind users. Making unvisited links brighter and more luminous than visited links will usually accomplish this goal.
<li style="margin-top: 0.5ex">Never show text in your chosen link colors unless it's a link.
<li>You should generally <strong>avoid color for text unless it's a link</strong>. However, assuming it differs from the link color, you can sometimes use colored text without causing major usability problems. For example, in a checklist summary, you could show the word "okay" in green and the word "error" in red. (The fact that the word meanings are clearly different provides the required redundant cue for color-blind users.) 
<li>Don't use blue for non-link text, even if you don't use blue as your link color. Blue is still the color with the strongest perceived affordance of clickability.
<li style="margin-top: 0.5ex">There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen.
<li>Exception: if you've opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren
't underlined, you can make an underline appear while hovering.
<li>One useful hovering effect is to use <a href="http://www.useit.com/alertbox/980111.html" title="Alertbox, Jan. 1998: Using Link Titles to Help Users Predict Where They Are Going" class="old">link titles</a> to help users predict where a link will lead before they click it. (If you're using a mainstream browser, you can see this effect by hovering over the links in this column.)
<li style="margin-top: 0.5ex">Don't use tiny text for links. Don't place links so close together that users with reduced motor skills will have difficulty selecting them. These guidelines are particularly important to ensure <a href="http://www.useit.com/alertbox/20020428.html" title="Alertbox, April 2002: Usability for Senior Citizens" class="old">usability for older users</a>.
<li>Exception: It's okay to use small font 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.
<li>If you target seniors or otherwise have many older users, ensure that your links appear in a big font (12 points or higher) and that links include enough text to make them easy to click on.
These guidelines all relate to the textual link <em>appearance</em>. It's even more important that you carefully choose the link content (the actual words), but that's another topic. (For advice, see <a href="http://www.useit.com/homepageusability/" title="Book with 113 design guidelines for homepages" class="old">Homepage Usability</a>'s six guidelines for links, twelve guidelines for writing, and seven guidelines for navigation.) Graphical links are yet another story, but it's usually best to use text for most links anyway.
Following the usability guidelines for link appearance on your site will make it easier for users to immediately determine what they can do on each page and will reduce the probability that they'll overlook important links.

<hr size="1">
<span class="cssSmallGray">></span> <a href="http://www.useit.com/alertbox/">Other Alertbox columns</a> (complete list)
<span class="cssSmallGray">></span> <a href="http://www.useit.com/alertbox/subscribe.html">Sign up for newsletter</a> that will notify you of new Alertboxes