Boycot the underline
Written February 3, 2009. 8 comments.
To many people the humble underline has been used as a form of emphasis, and while once upon a time it was OK, the advent of the web browser has made this practice a usability no-no.
When we’re online, the underline is indicative of a link, a way to communicate to the user that this is something that is actionable – in this case being to reveal more information. How the information is revealed may vary. It may be opening a new web page, an AJAX function that shows more information on the same page, or in the olden days, to launch a pop-up. What’s important though is regardless of the technical implementation, the concept is still the same – to indicate that this is something you activate.
Here’s an example of why it’s confusing to use the underline for emphasis in the content of web pages.
Your cat has fleas, so do not play with your cat!
If you know how to interact with a web page, instantly you believe the words “do not” must link to a page about something related to this sentence. Passing your mouse over those words and trying to interact with it reveals this to be false. This not only momentarily annoys the user, but also casts doubt to the integrity of all underlined words on the rest of your site.
If you want to place emphasis on words, the Internet Gods have kindly provided us with 2 very good suitable means – good old fashioned italic and bold. Or you can do something fancy with CSS.
With this in mind, I’ve always made it a point to remove the ability for my clients (and contributors on my other blog) to use underline by completely removing the option from the Content Management System.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
I prefer to just use a standard blue colour via css (with a nice orange when on hover) to indicate links, and ditch the underline altogether. Not that I love blue, but I think ditching two link standards at once is just a step too far for most people :)
When there is a grey text with one red word and another word that’s underlined. Which one would you click first? :-)
Problem rectified.
Instead of using an underline for emphasis why not use either a block of nice complementing colour, bottom dashed border or coloured text?
Makes it easier for users to see the actual links and allows the bots to index properly
Regards
Craig
For instance, if you’ve got black text on a white background, and it’s clear that all of your links are underlined and turquoise blue, then an occasional black underline used on black text here and there wouldn’t throw people off too much, it seems to me.
There may be a larger question here, namely whether underlining text is typographically meaningful and aesthetically pleasing or not. But maybe the whole issue in question is common usage, which Mike addresses here.
It’s interesting to note that all versions of Windows from 95 and up (to my recollection) give the user the ability to underline links in Windows Explorer ONLY when hovered over. But it’s easy to see how that practice of hiding links until the user actually hovers over them can be a problem on the web.
The other issue that supports what Mike is saying here is users with troubles perceiving color on screen. Underlines work fine and are easily recognized by any user with color blindness, but simply changing the text color may not work for them.