Link appearance and usability

On this page: By changing the appearance (colour, underlines) of your links, you may compromise the usability of your web pages. In this article, Lois discusses why, and how to mitigate this. Don't mess with links!

Background on link appearance

Since the earliest browsers, there has been an unwritten convention for what links look like:

In the early days of the web, this was always what links looked like. Later versions of HTML (e.g. 3.2) allowed page authors to change the link colours by attributes on the <body> tag, and with the advent of stylesheets, you can now remove the default underline too.

Why not change link colours and styles?

You mess with this convention at your peril! Users have come to expect what links will look like, and by changing them, you can compromise the usability of the page. Many users already find the web a confusing place, so by changing one of the few constants, you just make then feel more uncomfortable. (The same is even more true of the #1 usability sin - breaking the Back button.)

Research has shown that users often scan a page for headings and links to see what's there, rather than reading all the text. If you make it difficult to find links - if you change the colour, and especially if you remove the underline, you can make scanning slower and more unrewarding. See this page for example: link to external site an Alertbox on how users read web pages from Jakob Neilsen.

Users rely on being able to tell the difference between visited and unvisited links to navigate in a site - without this distinction, they may go around in circles. However carefully you crafted the navigation model of your site, remember that you are an expert in it, while most visitors aren't, so give them all the help you can.

image of printer, to show link border only(Of course, for graphic links, they don't usually see this difference. Very few pages use coloured borders on images these days: see the example left. On usability grounds, we probably should use borders - but for a corporate or e-business site, this would destroy the carefully crafted image. A useful alternative is to provide text equivalents.)

When is it OK then?

Of course, there are exceptions to the rule of not changing the link defaults, for example:

(The rule really applies to links in text paragraphs; text links in a navigation bar, for example with rollover colours, are commonly expected to look different, and probably safe.)


For links in text: