Though it seems like something we should have figured out by now, it is amazing how often the subject of whether to underline or not underline links comes up in design process (or, alternatively, how often links that should be underlined are not underlined). From a design standpoint, underlining links, especially when there are quite a few of them, can create visual clutter and thus is often disliked from this perspective. Links, however, are the lifeblood of any website, so it is crucial — more crucial than a good design, in many cases — to ensure that these links are inherently obvious to users. And, despite the fact that most of us reading this blog are likely people who live on the internet and need little help determining what is a link and what is not, in many cases we still need to design for people who are only familiar with the most basic internet conventions (i.e. text that’s underlined is clickable) and/or use the web infrequently.

Guideline

If it looks like a link without an underline, it probably doesn’t need to be underlined. If it doesn’t look like a link, it probably needs to be underlined.

Though many qualified user experience designers can probably follow this vague-but-simple rule successfully, it may be beneficial to break down into more detailed guidelines, especially as a communication aid to use with designers who may be less familiar with user-centered principles.

Always Underline

When in Doubt: This may seem a tad obvious, but it’s worth repeating. If you aren’t completely sure, underline. It doesn’t look that bad, and it confirms for all users that this is indeed a link.
When You Can: Similar to my last point, if you can underline a link without causing too much of a design problem, you should. It never hurts to make things abundantly clear for your users.
Within Blocks of Text: Absolutely underline all links that are contained within sentences, paragraphs, etc. As users scan text (online, people rarely read from start to finish — they scan for key terms), underlines signify key works to read. Color is important too — but using both color and underline is the clearest, most obvious way to call out the links to users. If you just need to call out a word that isn’t a link, use bold or italics in the same color as the base text to reduce confusion.
Isolated Links: Links that are on their own within a section of a page should be underlined when possible.

Underline Optional

Groups of Links or Menus: Within a menu, like the left navigation of this blog, it is usually obvious that the list of items is also a list of navigational choices. Adding bullets of some kind, as is done here, helps clarify this. This can also apply to menus across the top or bottom of a page.
Promotional Images or Banners: The banner ads down the right side of this page don’t have underlined text, but most users would realize that these are clickable. Put more simply, when a user sees a picture of something they like, they tend to click on it.
Users are Sophisticated: This very blog violates some of my rules — links within paragraphs are not underlined, for example. They stand out (slightly) because they are blue, but would certainly stand out more if they were underlined. The designers of the blog, however, may have decided that the audience (web design and development professionals) are sophisticated enough to realize that the blue text represents a link. (Though this is probably true, I’d underline them anyway.)

In the end, it is important to note that every rule is made to be broken, and that different situations often call for different interpretations of guidelines. This, of course, often leads to the situations that confuse users most, so you’d better have a great reason to ignore any of the guidelines above. In the end, nothing is more important than testing and watching as many users as possible — any dispute over how clear links are on your site can be quickly resolved by bringing in a diverse group of users and watching them use the site.

P.S. This should go without saying, but NEVER underline something that isn’t a link, for any reason, even if the text isn’t written for the web. That’s what bold and italics are for.

This entry was posted on Thursday, March 6th, 2008 at 3:29 pm and is filed under Usability, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.