Pay attention to where and how you place hyperlinks in text on the screen. Here are guidelines, with dead-link examples :
First, be sure your style makes the link look like a link.
- Use a distinct color. Nielsen and others advocate for keeping it the browser-default blue; I don’t see anyone getting confused by a link style that is not blue, as long as it’s consistent and stands out from your text, headlines and backgrounds.
(Note: Be consistent throughout your site; the different examples I’m presenting here are intended as independent examples — although it’s a useful lesson in how different-color links can be confusing.) - Underline it. Users know that underlining equals link; don’t take that away from them. Also, different people see colors differently; without the underlining, color’s all you’ve got to let them know where the links are.
- Mouseovers can be nice. I like to change the background color on the a:hover attribute so that when you mouse over a link, the background lights up. I think it helps indicate to the user that they’ll be able to do something here.
Second, consider placement of the link.
- Make the link over relevant text. All too often, I see links like “For an application, click here.” But I’d prefer “Follow this link to request an application.” (The words “request an application” have more meaning, as they represent a description of the link’s action; while “click here” is an unnecessary explanation of how to activate a link.)
- Place the link at the beginning or end of a line. Glance over the preceding paragraph, with all its varied links. Is that easy to read?
- Be consistent in your placement. If you’ve got multiple links on the page, use similar placement. Where possible, be consistent throughout your site.
