On link hovers

When it comes to text link hovers, some people prefer underlines while others prefer no underline rather a color shift. Typically, the designer-minded friends of mine prefer color shifts rather than underlines because they say the underlines “look too messy”. Then there’s the Google-esque approach which uses a constant underline and a blue link (the default for many browsers). Two very contrasting methods. So which is best? Or rather, which direction is best?

Part of designing a successful user experience is to eliminate confusion and cater to the user’s needs. Some users have vision disabilities and have difficulty reading text with low contrast. Links that are styled too similarly to the body copy won’t be seen and the site loses usefulness and becomes less usable. The web is, after all, a network of hyperlinks. Underlining links on over, or having them underlined all of the time, makes it immediately clear for everyone what is a link and what is not. It’s courteous and users will appreciate it.

This is not to say that I recommend keeping blue, underlined links all of the time, rather I’m suggesting that links be styled so that they’re clearly links, whether you use an underline or not. Keep in mind that some users can’t see certain colors so color shifting isn’t always the best approach.

What’s the best approach in my opinion? Links that are clearly styled differently from the body copy that underline on hover. This will leave no question to the user as to what is a link and what is not, and will cater to those with vision impairments. The way a site works should always take precedence over the way a site looks. The web is, after all, a useful and usable tool.