Intelligent hyperlinking

March 19, 2009 FILED TO: Web Design

In the good old days, when the Internet first began, we had to train users how to use it. A standard was created which dictated that hyperlinks (links to another page) would be underlined. So Internet users were trained to recognise a piece of text that they could click on to go somewhere else. Somehow that wasn’t enough for amateur web page developers, though (and in those days, there weren’t any professional web designers) so the idea of a link was enforced with the words “click here”, often in big, bold, red, flashing letters. In the decade or two since, the Internet has evolved, and so has its users – they’ve been trained to recognise a link, even if it’s not flashing. They can also recognise a link without the words “click here”. And with savvy users, an industry built on search engine optimisation and businesses that exist only in the virtual world, it’s become more important to think about hyperlinks and the best way to present them.

Keep text readable – don’t say “click here”

If a link is removed from text, the text should still be legible; the hyperlink shouldn’t be extra text (such as “click here”) nor should it distract from the flow of the text. For example, consider these two sentences:

An article in the paper today suggests that one out of ten people…

An article in the paper today (click here to read) suggests that one out of ten people…

See how the first sentence flows nicely? The reader is not distracted with words by the fact that there is a hyperlink? And if the hyperlink is removed, the sentence still makes sense. Also, if you have a lot of text with many hyperlinks, the page is easier to skim without being cluttered with “click here” links. On a similar note, keep the hyperlink to a short phrase of words (I would recommend one to three words); this will avoid a paragraph looking like it has more linked text than unlinked.

There are other reasons for not indicating links with “click here”:

Text like “click here” looks silly on paper, when the page is printed
Readers with visibility problems, using screen readers need information about what a link is and where it’s going
Using descriptive text for links will aid with search engine indexing

Keep link text for a particular page consistent

Have you ever been to a website and clicked on different internal links, only to find that they lead to the same page? That’s what I’m talking about. Keep the message consistent. If you are linking to a photo gallery page and use the text “photo gallery” as the link, keep on using “photo gallery” – don’t link “slideshow”, “my work”, or “portfolio” to link to the same page, even if they mean the same thing. Also, try and keep the text consistent with the menu text. This will aid in giving the visitor an idea of the size and scope of the site. It can be very irritating to see lots of internal links, only to find that the site has only three pages.

Use consistent link decoration

Use a consistent style and colour for all links within text blocks (I think it’s ok to decorate them differently in menus but consistency is good). Underline is still the most understood style for a hyperlink but if you don’t use an underline, consider at least using an underline in the hover state. Try and keep the links as obvious as possible – a specific colour and bold style or a colour with an underline hover.

Don’t ignore link states

Back in the ol’ nineties when web developers were taught HTML, one of the first things they were taught was the difference between a normal link, a hovered link, an active link and a visited link. We were encouraged to use different colours for each of these states. Let’s break them down:

A link (a) – a normal link that is not in any of the other states
A hover link (a:hover) – when the mouse cursor is hovering over the link (here you can add an extra hint that the text is a link, but that should already be obvious)
Active link (a:active) – a link that points to the current page
Visited link (a:visited) – a link to a page in the user’s browser history – one they have already visited

The most important state here is “visited” – it tells the user which links they’ve already visited, giving them a sense of location and relationship of their current position within the site to the rest of the site. There doesn’t need to be a big difference between normal links and visited links, a hint of colour difference is enough, but they still need to look like clickable links.

Give links a title

The title property of a hyperlink is not only a handy way of giving readers an idea of what you are linking to (particularly if you are linking from an image) via a tooltip, it also helps search engine results by adding more context and more keywords to your page. You should use the title to give the name of the site that you are linking to. For example:
At 4.30pm today, residents of Melbourne experienced their <a title="The Age website" href="http://www.theage.com.au/national/melbourne-hit-by-tremor-20090318-91w6.html?page=3">second earthquake in a month</a>
which results in:
At 4.30pm today, residents of Melbourne experienced their second earthquake in a month

If you hover over the above link, you’ll see that the tooltip shows that I have linked to The Age website. You now know what to expect when you click on the very readable link. However, the title attribute should never contain any important information because many users will not see it for various reasons (including differences in implementation by browsers, text being too small and unable to increase, users not noticing).

Lists of links

The same rules above apply to lists of links, only here you can actually link the name of the site you are linking to as it is not contained within a sentence and hence won’t effect readability. See the list of links below.

If you have a small list of links, for example in a sidebar, consider using padded blocks for increasing the clickable area around a link, especially when the link text is wrapped over a couple of lines.