Visualization of hyperlinks

Last week I read Jared Spool’s richly illustrated article on the ever-returning question: “Do links need underlines?”.

Spool’s analysis is on point, but too subtle for some. He concludes: “When the designers switch back and forth, between having some links underlined but others not be underlined, that makes even more work for users. Work that doesn’t add any real value. We think the visual design element of the underline is not required, but it is cruel to make users work extra hard because you can’t decide.”

The first reaction on the article (“UIE’s Jared Spool explains us why we should always use underlined links, even though we don’t like them.”) and my experience that even some professional web designers still manage to forget (or ignore) hyperlink basics, encouraged me to elucidate the lessons in designing hyperlinks.

In my opinion, there are four* rules regarding hyperlink markup:

  • Use a style that is constrasting with any other style in the layout.
  • Let the markup change when the mouse pointer hovers above the hyperlink.
  • Use the hyperlink style consistent. Don’t use multiple hyperlink styles unless (a) you have a very good reason, or (b) for the main navigation pane.
  • Never underline non-linking text.

* next to general rules like the web accessibility guidelines etc.

Goal of these rules is to maximize ‘recognizability’ (is that a word?), as one of the three usability factors of hyperlinks. Everyone must be able to:

  • recognize the link;
  • predict where it leads to;
  • click on it.

Note:
I was just in the process of wrapping up this post, when I noticed Eve Léonard already wrote a similar article on her new weblog ‘Lucid Web’. If her future posts are going to be as interesting as those already completed, it will be a blog worth watching.