<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Guidelines for link design (Jakob Nielsen's Alertbox)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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" type="text/css" />
  <script type="text/javascript" src="anchorlink.js"></script>
  <link rel="start" href="http://www.useit.com/" title="Home page for Jakob Nielsen's website" />
  <link rel="contents" href="http://www.useit.com/alertbox/" title="List of all Alertbox columns" />
  <link rel="parent" href="http://www.useit.com/alertbox/" title="List of all Alertbox columns" />
</head>
<body>
  <div id="wrap">
    <div id="navbar">
      <div id="breadcrumb"><a href="http://www.useit.com/" title="Home page for Jakob Nielsen's website"><span class="useem">use</span>it.com</a> » 
      <a href="http://www.useit.com/alertbox/" title="List of all Alertbox columns">Alertbox</a> » May 2004: Guidelines for link design</div>
      <div id="search">| <a href="http://www.useit.com/search/">Search</a></div>
    </div>
		
    <div id="content">
        <h2>Jakob Nielsen's Alertbox, May 10, 2004:</h2>
        <h1>01 | Guidelines for link design</h1>
        <p class="summary">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.</p>
		
        <p>This Alertbox's Permanent Link: <a href="http://www.useit.com/alertbox/20040510.html">http://www.useit.com/alertbox/20040510.html</a></p>
		
        <dl>
          <dt id="a"><span class="useem">01a</span> | Use strong, contrasting colors with some form of underline.</dt>
          <dd><img src="a.gif" alt="Use strong, contrasting colors with some form of underline." class="thumb" />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.</dd>
			  
          <dt id="b"><span class="useem">01b</span> | Use different shades of the primary link color for visited links.</dt>
          <dd><img src="b.gif" alt="Use different shades of the primary link color for visited links." class="thumb" />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.</dd>
			  
          <dt id="c"><span class="useem">01c</span> | Use bold or italics for emphasis with text that’s not a link.</dt>
          <dd><img src="c.gif" alt="Use bold or italics for emphasis with text that’s not a link." class="thumb" />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.</dd>
				  
          <dt id="d"><span class="useem">01d</span> | Reserve primary link color for links only.</dt>
          <dd><img src="d.gif" alt="Reserve primary link color for links only." class="thumb" />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.</dd>
				  
          <dt id="e"><span class="useem">01e</span> | Keep hover effects simple.</dt>
          <dd><img src="e.gif" alt="Keep hover effects simple." class="thumb" />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.</dd>
				  
          <dt id="f"><span class="useem">01f</span> | Use [title] to help predict where a link will lead.</dt>
          <dd><img src="f.gif" alt="Use [title] to help predict where a link will lead." class="thumb" />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.</dd>
				  
          <dt id="g"><span class="useem">01g</span> | Use large font sizes for primary links.</dt>
          <dd><img src="g.gif" alt="Use large font sizes for primary links." class="thumb" />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.</dd>
				  
          <dt id="h"><span class="useem">01h</s
pan> | Provide an ample amount of text and whitespace for links.</dt>
          <dd><img src="h.gif" alt="Provide an ample amount of text and whitespace for links." class="thumb" />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.</dd>
        </dl>
		  
        <p><span class="useem">Related quickcards:</span> <a href="#">02 Link Content</a>, <a href="#">03 Graphical Buttons</a>, <a href="#">08 Design Matters</a></p>
		
        <hr/>
        <p>» <a href="http://www.useit.com/alertbox/">Other Alertbox columns</a> (complete list)</p>
        <p>» <a href="http://www.useit.com/alertbox/subscribe.html">Sign up for newsletter</a> that will notify you of new Alertboxes</p>
    </div>
  </div>
</body>
</html>