Do Links Need Underlines?

Jared Spool

July 5th, 2006

During our recent Virtual Seminar on home page design, several people asked about whether it makes a difference if links are underlined or not. It’s a good question and one we get frequently.

Let’s look at some examples. The folks over at BLS.gov have decided to underline all of their links:

Bureau of Labor Statistics Home Page Links

Whereas the folks over at John Deere decided to display them without underlines:

Deere.com Residential Links

Are users less likely to find what they are looking for at Deere.com, just because the links aren’t underlined? Probably not. People are pretty adaptable and figure things out fairly fast.

But users are trained to click on underlined things. (Did you move your mouse over the underlined text in the previous sentence to see if it was a link? Don’t be concerned — so did I and I knew it wasn’t a link.)

Many people who use the web for a long time start to become conditioned to look for underlines. If you watch them with an eye tracker, you can see their focus dart from underlined-text to underlined-text when they first see a page.

In the case of the Deere page, where virtually nothing is underlined, the users would adapt quickly and find the links, often by waving their mouse around the screen, looking to see where the browser gives them “the finger.”

But what happens when you mix the visual style of links with text that isn’t a link.

This is what happened over at Analog.com:

Links from Analog.com

Here some of the text is a link, but the headers are not. Users were a bit baffled by this, especially since headers in a very similar style elsewhere on the page are links. This puts the burden on the user to seek out every possible link with their mouse, adding more to their cognitive workload for no particular reason.

We can see this more clearly over at the Dartmouth Hitchcock Medical Center home page. Here, all on the same page, we have a set of links with underlines:

DHMC.org News Links

Some without underlines:

DHMC.org Information Links

And:

DHMC.org Quality Reports Link

Resulting in some users wondering if the bullet text are or are not links:

DHMC.org PatientOnline Section

When the designers switch back and forth, between having some links underlined but others not be underlined, that makes even more work for users. Work that doesn’t add any real value. We think the visual design element of the underline is not required, but it is cruel to make users work extra hard because you can’t decide.

37 Responses to “Do Links Need Underlines?”

  1. Yud | Web Design and Marketing » Do link need underlines? Says:

    [...] UIE’s Jared Spool explains us why we should always use underlined links, even though we don’t like them. When the designers switch back and forth, between having some links underlined but others not be underlined, that makes even more work for users. Work that doesn’t add any real value. We think the visual design element of the underline is not required, but it is cruel to make users work extra hard because you can’t decide. [...]

  2. Paul Irish Says:

    I’ve always considered underlines to be unncessary in left, right, or top navs. Any area that is designated as navigation doesn’t need a redundant visual indicator. But within body copy or any other ambiguous content areas, underlines should be applied to all links.

  3. Weblogger.ch » Blog Archive » Est-ce qu’on souligne les liens? Says:

    [...] Jared Spool se penche sur la question… rien de nouveau, la coh

  4. lucide web » Doit-on toujours souligner les liens? Says:

    [...] Jared Spool, expert en utilisabilité, a écrit un article intéressant sur le sujet (anglais) et arrive à la conclusion suivante: Quoiqu’il ne soit pas absolument nécessaire de souligner les liens, ces points importants doivent être considérés : [...]

  5. lucid web » Do All Links Have to be Underlined? Says:

    [...] Jared Spool, a usability expert, has written an interesting article on the subject and concludes that, while it may not be absolutely necessary to underline links, these important issues must still be considered: [...]

  6. Christian Watson Says:

    I would suggest that you start by asking the question “Why shouldn’t these links be underlined?”

    If you can’t come up with a good reason not to underline them, then don’t do it. How simple is that? Oh, and making your site look prettier is not a good enough reason.

  7. Jared Spool Says:

    Christian,

    One good reason not to use underlines is they make the text more difficult to read. In many renderings, they cut off the descenders on the fonts, making it harder for the brain to discern the shape of the words (or for people suffering from dyslexia like myself, the letters).

    Underlines were a poor choice by the astro-physicists that decided on this convention, but we’ve learned to live with it.

    If you’re looking for reasons not to use underlines, they are pretty easy to come by.

  8. Peter Van Dijck’s Guide to Ease » Blog Archive » Should links be underlined? Says:

    [...] UIE Brain Sparks » Blog Archive » Do Links Need Underlines?: “But users are trained to click on underlined things. (Did you move your mouse over the underlined text in the previous sentence to see if it was a link? Don’t be concerned — so did I and I knew it wasn’t a link.)” [...]

  9. sasaeh Says:

    I totally agree with Paul Irish. Some elements are already considered navigation (top-left menu for instance) and they don’t require extra indications.
    Inside the body, every underlined element is considered a link, so it seems that the convention works very well and doesn’t imply any extra design work in my opinion.

  10. Christopher Fahey Says:

    My good friend Khoi at http://www.subtraction.com made a design decision to use bold for body copy links instead of underlines, for precisely the reason Jared gives above (underlines damage readability… and are typographically ugly). Khoi’s decision was bold (pun intended): by choosing to use bold for links, he has essentially forbidden himself from using bold for emphasis in his writing. This is analogous to how most of the rest of us now avoid using underlines for emphasis in our own writing. Of course, Khoi doesn’t use underlines either (for both the ugliness reason and for the confusing-web-convention reason) and I’m fairly sure he hates italics too… So what does he do for emphasis? Simple: he writes well.

    Anyway, I recently addressed the exact opposite of this question: Is it okay to use underlines as a false target when in fact everything surrounding it is a link?

    Finally, it’s interesting to see Jared reference the use of an eyetracker here, given his general hostility towards them. But it makes sense: he’s not recommending that you use it on your own site — he’s simply demonstrating that they can produce useful insights into user behavior in general.

  11. devlon duthie » Blog Archive » links for 2006-07-09 Says:

    [...] UIE Brain Sparks » Blog Archive » Do Links Need Underlines? During our recent Virtual Seminar on home page design, several people asked about whether it makes a difference if links are underlined or not. It’s a good question and one we get frequently. (tags: usability web design links) [...]

  12. Magus blog » To underline or not underline Says:

    [...] One of these rules is: Underlining should not be used within body text. The reason for this is that the user is so accustomed to the convention of underlining indicating a link, that using underlining anywhere else is bound to cause confusion. So, I was very interested to read Jared Spool’s recent article Do Links Need Underlines? [...]

  13. Ross Johnson Says:

    I agree with what was stated before. The main navigation, designed properly should be obvious with or with-out underlines. However, all links beyond that should keep the underline.

  14. Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Do Links Need Underlines? Says:

    [...] Do Links Need Underlines? (via Russ) [...]

  15. Thomas Passin Says:

    I always set my browser to not underline links, and to use different colors for visited and unvisited links. These colors are different from regular text but not garishly so.

    So mostly I can see where the links are easily enough without the visual distraction of seeing underlines, which really breaks into my reading attention (and are ugly besides).

    If I think there ought to be a link and don’t see one, then I can mouse around the suspect area. That doesn’t usually distract me, probably because I choose when to do it.

    What I DON’T want is for the page to override my no-underline setting. It can change the visited and unvisited colors, as long as they aren’t the same as plain text.

    So I say – don’t underline links, because my browser settings will take care of it for me the way I want. You can’t get it right for enough people no matter which way you go, so just leave them alone.

    In pages I design, I usually make the links a different color, and don’t specify underlining one way or the other. I often have the links’ background color change when they are moused over. IMHO, this is the best way to handle the subject.

  16. Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (19/7/06) Says:

    [...] Do Links Need Underlines? [...]

  17. ProClub Says:

    I think, sites that have too many things underlined are bad again. Too many of these “domain reservation” sites have a lot of underlined text and any site having a simmilarity with them strikes me as negative.

  18. Chad Mortensen Says:

    I think an interesting thing to take note of is that blue underlined links are becoming more and more of the minority on websites, with popular sites like AOL, MSN, Yahoo, etc. all going with a non underlined link approach. Also, with the web becoming more and more of an extension of your computer’s OS and people being online 100% of the time using broadband we start to loose that notion that we’re “on the internet”.
    Your desktop applications don’t use blue underline links for menus, should websites?

  19. Josh LaMar Says:

    I’m all for not underlining links. As Jared Spool mentions, it actually makes reading more difficult.

    If we do take out the underline, there must be some other visual cue to identify it as a link so that the reader is not confused as to what is a link and what is body text.

    Perhaps changing the font color and weight will do this just fine. I like steve Krug’s way of putting it-make it, “Obviously clickable.”

  20. links for 2006-08-01 at disambiguity Says:

    [...] Do Links Need Underlines? (UIE Brain Sparks) This is one of those articles that you *know* you’ll need to find again to explain to a client why links don’t *always* have to be underlined (as long as you’re consistent) (tags: links design usability underline) Share or Save this post:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

  21. Developer sandbox » To underline or not underline Says:

    [...] One of these rules is: Underlining should not be used within body text. The reason for this is that the user is so accustomed to the convention of underlining indicating a link, that using underlining anywhere else is bound to cause confusion. So, I was very interested to read Jared Spool’s recent article Do Links Need Underlines? [...]

  22. links for 2006-08-30 (Leapfroglog) Says:

    [...] UIE Brain Sparks » Blog Archive » Do Links Need Underlines? Spool argues that not underlining hyperlinks in your design is cruel to users. I can’t help but agree (most of the times)… (tags: underline links hyperlinks design usability accessibility) [...]

  23. Nigel Says:

    This is a subject I’ve been agonising over for a few weeks now. I’m fairly new to website design and my site is slowly evolving by trial and error. My links evolved to become dark blue and non-underlined, changing to brighter blue and underlined when hovered to give confirmation. I liked it, and for all the reasons already stated above regarding readability, cluttered appearance, etc. Then I read an article about why they SHOULD be underlined!

    One reason was familiarity. People are accustomed to blue underlined links and feel at home when presented with them. Hmm… I’m not entirely convinced.

    However, another reason was for the benefit of people with varying degrees of colour-blindness. That to me makes more of a compelling case for using them. So my dilemma – to design a pretty site for my benefit, or a more usable site for as many visitors as possible.

    I’ve considered using bold text, as mentioned above, but I think a lot of bold text can make a page look cluttered too. And does bold instantly say; “Click me”. If a page is to look cluttered anyway then maybe it’s as well to use conventional clutteredness.

    To aid visitors who initially scan web pages, I’ve included plenty of sub-headings and newspaper style inter-paragraph bold headings. I think adding bold links as well makes for a very confusing page.

    On a different though kind of related topic, that same article also stated that visited links should always be differentiated by a colour change. Personally, the only time I find that useful is with a list of results on Google. When I return I can instantly tell which links I’ve already followed against the million or so still to be investigated! Other than that, adding another colour just adds to the cluttered appearance of a web page. But again, should I be designing for my own aesthetic pleasure or for user-friendliness?

    By the way, the above points are all in relation to in-content links. I think it’s fairly obvious that text in navigation, site map, etc is clickable without the need for any additional clues.

  24. Le beau blog qui KTY veut faire » Doit-on souligner les liens? Says:

    [...] Lire l’article Do Links Need Underlines?   [...]

  25. MondoBlog » Blog » Fast SEO Links Collection - Num 4 Says:

    [...] Do Links Need Underlines? [...]

  26. Webkrauts » Usability-Konventionen: Grundlagen und Beispiele Says:

    [...] Ergänzung zur Unterstreichung von Links: Auch wenn Web-Usability-Experten wie Jared Spool auf die Erfahrung verweisen, dass Linkunterstreichung nicht erforderlich ist, solange Links als solche erkennbar sind, kann man Benutzern das Leben definitiv einfacher machen, wenn man eine solche alte, „native“ Konvention in seiner Arbeit als Designer oder Entwickler beherzigt. [...]

  27. Philip Morris Says:

    I’d say it’s ok to underline links with the following exceptions:
    1) Nav areas should not be underlined.
    2) Links in the body of your content should be pulled out into nav areas. That’s why you create nav areas in the first place.
    Take a look at your content, it should be quickly readable without emphasis put on any word(s) that don’t need it. If you want to show links to other sites noted in your content, create a nav area at the bottom as an appendix. Don’t get cute with in-line links and give someone a reason to link away from your site while they are in the middle of your content.

    That means, there’s no reason to underline links.

  28. Ferry den Dopper’s blog on User Experience » Blog Archive » Visualization of hyperlinks Says:

    [...] Last week I read Jared Spool’s richly illustrated article on the ever-returning question: “Do links need underlines?”. [...]

  29. Rief . Di Solo . Com » Do Links Should Be Underlined? Says:

    [...] (or maybe also in blue)?. There is a discussion about it on Cre8asiteforums and WebmasterWorld. Jared Spool also wrote about it and gave some samples to show how links are badly indicated by [...]

  30. Frank Topel Says:

    One thing to keep in mind when it comes to the question “underline or not” is that according to the WCAG/BITV (german “version” of the WCAG) color should not be used as the only distinctive property of links. This can not only be an abstacle to people with color blindnesses of the various kinds, but also a problem for users who stick with monochrome displays, or de-facto-monochrome displays like notebooks running on a minimum screen brightness to save energy.

  31. Spade Says:

    I simply don’t understand this apparent obsession with removing underlines from links. Why are we degrading site usability? Just because some people apparently think underlines are “uncool”?

    For those of us with color-deficient vision, it’s a slap in the face to expect us to decipher every website’s own unique link color scheme (assuming we can even discern the colors involved), hovering over everything to see when the mouse pointer changes and tells us what’s a link and what isn’t. (Not to mention internet devices like the iPhone, which don’t have any concept of “hover” and therefore render the whole no-underline hyperlink fad worse than useless.)

    If all the major browsers provided a simple option setting to force hyperlinks to always remain underlined, then I suppose site designers could go ahead and do whatever silly faffing about they please. Unfortunately, of the browsers I’ve used, only iCab has provided a simple checkbox option for this. In all the major browsers (Firefox, Safari, Opera, IE), I’m expected to know how to write custom CSS and add it to my browser in a way that forces the links to remain underlined at all times (and even then, it still doesn’t work 100% of the time). This poses significant usability problems for your average person with color-deficient vision and no CSS coding skills.

    Clearly, color-deficient vision is still one of those disabilities it’s okay to ignore when it comes to user interface design, as evidenced by fact that only two people in the comments section even mentioned colorblindness or color-deficient vision as a factor in deciding whether or not to use underlines for hyperlinks. Color-deficient vision simply isn’t on the radar of enough people making website design decisions. (Even the site I’ve linked to above, talking about “Ensuring Accessibility for People With Color-Deficient Vision”, doesn’t bother to properly underline their hyperlinks, despite the fact that it’s mentioned in the article at that very link!)

    The article-writer here seems to think that all underlines should be removed due to his issues with dyslexia (comment #7). While I can see where he’s coming from with this, I can’t see an underline being the sole deciding factor in issues with dyslexia, and from the other comments this clearly isn’t a deciding factor for anybody else. Forcing all links to be underlined has never “made reading more difficult” for me in any way, contrary to the blanket statements made by others in the comments.

    It’s distressing, but sadly not surprising, that those of us with color-deficient vision are mostly ignored when this issue comes up. Thanks to Nigel (#23) for at least mentioning it, and Frank Topel (#30) for finally making it the central point of consideration. I invite everyone else to carefully reconsider their opinions in light of the accessibility issues outlined here.

  32. Do It Myself Blog - Glenda Watson Hyatt » Can Your Blog Readers Find Your Hyperlinks? Says:

    [...] Do Links Need Underlines? [...]

  33. Ed Says:

    Is it ok not to underline image links? :)

    Personally, I usually don’t use underlining for links. I just don’t like the way they look, for some reason. But I make sure it’s fairly obvious what’s a link and what’s not with my layouts. I always make sure I underline links in the content areas, and I underline links in nav areas that also need non-linked text (such as categories).

  34. 6 Commonly Unanswered Web Usability and SEO Questions | ePublish Media Says:

    [...] Spool, a prominent speaker on web usability, explains why underlines are a best practice. Spool says: "The underline is not required, but it is cruel to make users [...]

  35. web design cardiff Says:

    This is a wonderful blog.Thank you for sharning this information with every one

  36. rob Says:

    As some others have stated it’s often colourblind people who suffer the consequences of removing link underlining, me included, though I agree that “obvious” navigational link elements don’t always need to be underlined if they are styled in a suitable manner, which thankfully most are.

    I’ve always seen this problem as more “designer vanity” than designers actually thinking and designing for the needs of different people who will be reading a page/article/document. The default link state is specified as underlined and blue (contrasting from black text) for a reason – accessibility. If you remove them you also remove some accessibility.

    What’s more important, designer vanity or accessibility? Your answer will demonstrate your commitment to an accessible web :)

  37. Underline websites | Swamishivanand Says:

    [...] Do Links Need Underlines? » UIE Brain SparksJul 5, 2006 … Your desktop applications don’t use blue underline links for menus, should websites? Josh LaMar Says: July 26th, 2006 at 6:55 pm. I’m all for … [...]

Add a Comment