Logo of online design school Sessions College

To Underline, or not to Underline? That Remains the Question

March 6, 2008
By

underlinedlinks.gif

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.

From the NoD Sponsor:

Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:

- Web design classes and web design Certificate Programs taught by renowned design instructors.

20 Responses to To Underline, or not to Underline? That Remains the Question

  1. Emily on March 6, 2008 at 6:44 pm

    In formal English (e.g. using MLA format), it is actually conventional to underline titles of certain items, such as: books, plays, movies (whether in body copy or a works cited). While it makes sense for this to change for online or interactive media where it could be confusing, it doesn’t work for formal English that is intended for print.

    Last I checked, that rule hasn’t changed.

    If you’re talking about emphasis; certainly that’s what bold and italics are for.

  2. Mike Madaio on March 6, 2008 at 6:58 pm

    Emily, though you are surely correct (I don’t actually know those guidelines), my assertion is that if those MLA rules have not been changed already, they should be. They were created before the web was ubiquitous, and thus are outdated now that underline means “link” to a large group of people.

    As the world becomes more and more interactive and we see more convergence of analog and digital technology (think Amazon’s Kindle), this will become even more important. (And which is why the MLA should take action NOW, not wait until it is too late!)

  3. yosax on March 7, 2008 at 4:05 pm

    With underline, people can see the difference whether it’s an emphasized words or links.

  4. future design on March 7, 2008 at 4:07 pm

    or, you can just bold the text, use different color to make people notice that it is a link.

  5. bathroombuzz on March 7, 2008 at 4:08 pm

    forget underline, I prefer using hover command

  6. Mike Madaio on March 7, 2008 at 6:26 pm

    Hey guys, if you’re going to take time to post a dissenting opinion, how about backing it up with some actual information? Its great that you “prefer using hover” or whatever, but I’ve put together a detailed explanation of why hover (or bold, whatever) is not sufficient. Can you rebuff it?

  7. Cyndee Haydon on March 8, 2008 at 3:55 am

    Great post – when I write in my blog I don’t tend to underline however I do highlight for better readability – do you find underlining is more effective than highlighting? Thanks!

  8. Mike Madaio on March 19, 2008 at 10:08 pm

    Underlining is the universal symbol for “this is a link, click here”, though highlighting certainly has its uses as well and will stand out to people. It does depend on the context as well.

  9. Website Design Elixirs on March 21, 2008 at 2:51 pm

    I generally agree that blue underlined links are the ticket. There doesn’t appear to be a consensus on the subject though.

    The top SERP for website design in Google (excluding Wikipedia and concentrating on firms offering design services) is split right down the middle. Half use underlined links, the other half do not.

    Of the 10 I looked at two of them really needed underlined links to improve scan-ability.

  10. elitezoom on March 31, 2008 at 7:34 am

    usually most of people notice if the blue text (bold or not) when they hover it, I think they will said it’s a link. commonly I suggest someone to see the cursor, if it change like a hand it’s a link, but if not or just like an arrow it’s not a link.

  11. Barry Cunningham on May 3, 2008 at 3:13 am

    I usually underline and italisize my text or rather keyword related words and phrases. Definitely seems to be helping.

  12. Robin on May 3, 2008 at 3:15 am

    I don’t like the hover but I use it for emphasis sometimes. As for underlining certain text, I am all for it as it brings attention to the point I am making

  13. Dave on May 8, 2008 at 2:14 pm

    What does ADA say about identifying links? Thanks.

  14. Jason Secor on May 21, 2008 at 8:43 pm

    One of the things that i find useful is bolding and/or underlining my keywords.

  15. Hunter Jackson on May 28, 2008 at 3:17 pm

    I always bold text rather than underline. It stands out more and looks more clean

  16. Ruth Ann Macklin on June 8, 2008 at 2:32 pm

    The average Joe surfing the net recognizes the blue underlined text as a link. I underline the link and bold my keywords.

  17. Jamie on June 18, 2008 at 7:13 am

    This was a good refresher for me- I bold my keywords, but need to go back to my sites and make sure my links are visible and obvious, so I may have some underlining to do.

  18. Dave Austin on September 2, 2008 at 12:21 pm

    Always Always underline. From a usability point of view, you want to underline. People have been trained to expect links with underlines. If you try to get creative, then people have to think to much. “Is it a link or Not”. I believe those milliseconds matter.

  19. Bobsen on August 28, 2011 at 5:28 pm

    Good to see that this college is going to do something about it

  20. Shaun Smylski on February 7, 2012 at 8:14 pm

    I’m against underlined links because it creates a blocky solid form that contradicts the otherwise organic nature of the letterforms and how they have been perfected to look legible and unified for centuries. Underlining is not seen in any bible or old published book all the way to printed novels of current day. Not in newspapers or magazines.

    Underlining is a holdover from the typewriter age. Typewriters have no bold or italic styling. So the only way to emphasize text was to back up the carriage and type shortcomings in typewriter technology. The Web does not suffer from this shortcoming.

    If you want to emphasize text you now only need to bold, italicize or change the color. Color is the most appropriate form for web because it does not change the word per line count on rollovers, where changing styles would. Easiest way to communicate a link to people is with color. Color is LIVE and LINKED, all other text is DARK and DEAD.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

 
graphic artists guild creative public Online design school Sessions College for Professional Design
graphics illustrations bilingual kids tshirts