Five Guidelines to Make Your Website's Links More Usable

One of the most important features of the Internet is the ability to link from one document to another. It’s one of the core benefits of the online medium. In the beginning, links were indicated using bright blue, underlined text. After you had visited a page, the link changed to a purple color. While this treatment is very usable, it’s not necessarily beautiful, especially for a site design with incompatible color palettes.

I’m sure if you asked some designers, they would say that links of any kind within the text of a page are a bit of an eyesore. However, it’s important that the design of the site doesn’t hurt the functionality of the site. To that end, here are some guidelines I’ve been using when styling links on the sites that we build.

1. Navigation should be clear and obvious. Many of the links on a page will actually be a part of the main site navigation. There is a lot more flexibility with how you can style these links, but the most important consideration is that it should be obvious that the section as a whole is meant to be navigation. If you want to emphasize a word or phrase that is not intended to be a link, it may be preferable to make it bold or italicize it.
2. Links within content should be underlined. This is a fundamental design standard of the web, so you should only break this rule in very rare cases. Furthermore, you should never used underlined text for anything other than a link. We've been trained to understand that underlining = link online. Breaking this rule in either direction leads to a less usable site. The exception is links within a menu or in an obvious clickable context, like a button.
3. Link text should be descriptive, not generic. Try not to add links to generic terms, such as “click here” or “read more”. This requires the visitor to scan the context of the link to discover where they will go when it is clicked. It is much more useful and scan-friendly to use descriptive text, such as "view our portfolio" or "email us".
4. Links should react when you hover over them or select them with the keyboard. Because the active, clickable area of the link is sometimes unclear, it’s helpful if the link reacts when it is hovered with your mouse. Even more important, when links are selected with the keyboard, usually by using the Tab key, it’s important to visually indicate which link is selected. Both of these behaviors help users to avoid misclicking.
5. Strongly consider changing the color of visited links. This advice is often the most controversial, since links of different colors can look messy on the website. It might not always be useful to indicate visited pages, but (especially when there are long lists of links) it can often help users avoid revisiting the same page accidentally and serve to keep a record of where a visitor has been. If we think that visited links should be styled differently, we usually change the color to be a little less vibrant than the normal link color, which indicates that the link has been used.

By following these guidelines, you’ll make it much clearer to visitors what is clickable on your website, which leads to a much better browsing experience.

To get our latest articles when they are posted, please subscribe by e-mail or RSS.

Filed Under: web