Let your hyperlinks shine

Posted December 1st, 2008 by David Hamill

Hyperlinks are what holds the web together. Without links, the web would not be a web. An important part of good web site design is the visual treatment of your hyperlinks. You’ll be doing your users a favour by making your hyperlinks instantly noticeable.

Allow your users to quickly understand what their options are on each page and they are less likely to miss the content they want. Some websites have subtle or camouflaged links that might look nice, but they don’t really help.

Making the most of your trigger words

In a previous post, I explained the concept of trigger words. Using trigger words on your links will pull users to the content they want. Of course your trigger words are of little use if nobody sees them.

It’s something I’ve seen a bit of in testing. In one instance a participant said “It would be good if there were more charts available” without seeing the ‘more charts’ link below the chart they were looking at. The link had the same visual property as normal text, only with a small arrow to the left of it.

Users don’t read all of the text on a page. So don’t make them work too hard to find their options.

Avoiding conflicts

Avoid using the same properties of your common hyperlink properties on anything that isn’t a link. I suggest choosing a colour for your links that is not used for anything else. On my site it’s pink. Everything on the website that is pink can be clicked.

Some websites make the mistake of using the same colour for both links and sub-headings. In such cases it’s possible to mistake links for headings and vice versa.

Don’t underline text that isn’t a link either. People will think it is a link and try to click it. Emphasise words using emboldening instead. Of course you then need to avoid using plain bold text as your hyperlink property. You can then use emboldened text to improve the scanability of your text without affecting the visibility of hyperlinks.

An arrow is not enough

In my earlier example I mentioned the link text that went unnoticed had an arrow to the left of it. Arrows can help tidy up the appearance of your links. But the arrow alone is often not enough to indicate a hyperlink. So if you’re going to use an arrow then make sure you indicate the link in some other way as well.

The quick test

Good links catch user attention. Bad links wait for the user to read them and then presume that they must be a link. You can check the visibility of your links by blurring your eyes a little when looking at the page. Can you see where the links are? If so, you have visible links.

Let your hyperlinks shine (not literally, that would be silly) and you allow your users to make better progress through your site.

Tags: navigation, trigger words