We’ve had some back-and-forth discussion this afternoon in both the Design/IA committee meeting as well as on Twitter over whether hyperlinks should be underlined on a site design, or if we were far enough along with this whole “web” thing that this was no longer a usability requirement. The party line in usability (from the stodgiest usability expert on the block) has been for a long time that hyperlinks should be underlined and set in a color that distinguishes them from page text.

And so, when asked in the Design/IA meeting whether I thought we should remove some underlined hyperlinks from the page, I suggested that we should keep them… and that it’d be great to have the rest of the links underlined as well. Later, when asked whether adding underlines on mouseover (like the New York Times does) would work in place of having them there all the time, I said:

In my opinion, that’s a cop-out to try and back-door in the usability after the fact. If your cursor is already over a hyperlink on a page, you already know it’s a hyperlink so what does the mouseover behavior get you? Usability studies have consistently shown that effective links on sites have two features:

– They are underlined
– They are all the same color and that color is different from the color of regular type

The NYT site fails at both of these things, though they come close on the second as most of the links are that blue color, offset from the regular type. However, I didn’t know immediately whether the OPINION and TRAVEL links on the right were actually links. I had to mouseover them to find out and that’s lost time.

I know for a fact that our sites are not going to strictly adhere to these usability guidelines because it’s the belief of some that they lower the visual appeal of a page. But what we can get out of this is that using hyperlink underlining and color schemes for links are ways to highlight those areas of the site that you *really* want people to click on.

As I said in my blog comment in response to the designs, I’m no design expert and I’ll leave the little decisions like this up to the designers we hired to complete this project, but it does sadden me to know that the site won’t turn out to be as easy to use as it could be, in my opinion.

But Jakob’s usability advice was written in 2004 (though he does mention at the end that he echoed his advice at a conference this year). Has the reality of links on the web changed since then? It’s hard to say. Most of the usability guides out there simply echo Jakob, usually with a link back to him. Most mention that, at the very least, links need to be set in a different color than text and that this color should be consistent on the page. Another site advises that hyperlinks don’t necessarily need to be underlined, but they should have a style (other than just color) that sets them apart:

Style – There are many styles that can be applied to links: adding underlines, making them bold, changing font family, and more. A link should not have the same style as other elements on the page.

(emphasis mine)

Jason Pontius, the President of White Whale, the design firm handling our site mentioned on Twitter:

@imcbride @kristenbyers Often we like to only underline them inside paragraphs: p a { text-decoration:underline; }

This seems to agree with other advice that begins by stating what the convention has been almost since the first web site appeared:

The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple.

The most readable way to render most text is black on a white background, and making text hyperlinks blue (#00f) works very well on white. It is clearly distinguishable from regular black text, while still providing enough visual contrast to be readable.

But then continues with advice I consider spot-on:

I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page..

When the link text is close to other link text, underlining makes the text appear cluttered and hard to read, but when hyperlinks are set as part of a body of text or appear inline, adding the underline helps to distinguish them and set them apart.

I always interested to hear what others think about stuff like this, so if you have any good resources that expand on this issue, send them my way. On a more practical issue, given the information I’ve linked to above, should I change this blog’s theme so that the hyperlinks on the right are not underlined by default?