
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. (more…)