73

Have you noticed that more and more websites have removed underlines from hyperlinks? For example, the current beta test of Google doesn't have underlines on the search results.

google search no underline

Google, along with other big name websites, have slowly weeded out underlined hyperlinks over time. Why is this happening? When should we remove underlines from our designs?

Personally, I think the undecorated links on Google search results are harder to parse. The underline used to guide my eye while reading the title. Now the title and description mush together. I also felt this way when ux.stackexchange unbolded and lightened the thread titles. The titles have no prominence anymore so it's harder to scan. Who knows what's making me think this way... it may be human nature's aversion to change or it may be a genuine UI concern.

Improve this question
14
  • I'm not sure why, but I see something different when I do a search on Google. Anyone else sees it like this? PS: Don't vote down if you don't, that is silly! :) !Google search result
    – Marian
    May 13, 2011 at 7:57
  • Hey Rahul, I am not sure how to place the image in a comment, this is why I posted an answer. Probably you are right about the beta, though I see exactly the same thing, except the underline. So it seems strange to have a beta with only one difference, the underline.
    – Marian
    May 13, 2011 at 8:04
  • 3
    Google are constantly A/B testing, so this may explain how people have different views (They are underlined for me too). Perhaps Google themselves are trying to find an answer the OPs question by A/B testing underlines vs no-underlines to see which users prefer.
    – JonW ♦
    May 13, 2011 at 8:07
  • @Jon W I wonder how the A/B testing is done in this case. How do they measure the success/failure? I am really disgusted with the undecorated links but am I to switch away from Google now? I'm just stuck and cannot voice out :P
    – kizzx2
    May 13, 2011 at 9:36
  • 2
    @Phil exactly. It's all well and good just to assume underlines are better but at least Google are testing that assumption to see if that is true. It's not just brand-new conventions that should be A/B tested but old established conventions to see if they are still relevant.
    – JonW ♦
    May 13, 2011 at 11:19

8 Answers 8

Reset to default
54

Underlined links can have a negative effect on readibility, according to this 2003 study comparing text readibility for plain text, standard blue hyperlinks and overlay link markers.

A later study comparing different link visualisation techniques found that at that time (2004) the common web user was conditioned to underlined blue links, but couldn't indicate an optimal visualisation technique.

Microsoft's guidelines about links are clear and show examples of what works for different functional patterns:

The fundamental guideline is users must be able to recognize links by visual inspection alone—they shouldn't have to hover over an object or click it to determine if it is a link.

Blue underlined text is just one of many ways to indicate that a link is a link (but because it's been the convention for so long, you really shouldn't use blue underlined text for non-links). Besides having an appropriate visual styling, other factors are context, link text and consistency across the interface.

The way I see it, the main problem with the Google test is that without the horizontal lines, the different items blend together and the visual rhythm is broken, so it becomes more difficult to scan the list. This is a basic list styling problem with many solutions (for example the iphone way of displaying lists).

Improve this answer
6
  • Marielle's response is spot on. Basically all links should have an affordance for clickability - i.e. they should be distinct/different enough from normal text for the user to instantly identify them as links, and the visual cues to the user from the style used (e.g. different colour for visited/non-visited links and interactive style changes on mouseover) should also be consistent throughout your website or app. If you use this approach I would argue underlining is then not necessary - especially given the legibility reasons Marielle references (which is why I rarely use it)
    – Tom
    May 13, 2011 at 9:53
  • 3
    +1, I really wish more answers cited references and research like this.
    – Kevin Peno
    May 13, 2011 at 15:06
  • 5
    According to your first source, users don't like to read text with blue underlined links. This is no surprise because traditional links stand out in large blocks of text and break the flow of reading. But what about designing for scannability, not readability, such as the Google SERP? Arguably, the web should be moving away from designing pages like books and more for fast information finding.
    – JoJo
    May 13, 2011 at 22:06
  • @Jojo, you have a good point that scannability and readability are not the same concepts. I'd guess that underlined text is more difficult to scan as well, since underlining interferes with word shape and scanning text relies heavily on shape recognition, but that's something you'd have to test in practice to be sure.
    – Marielle
    May 13, 2011 at 22:26
  • @JoJo + Marielle, Regardless of scannability or readability, ugly is ugly and users avoid ugly sites even though they may not readily admit that.
    – Pacerier
    Feb 27, 2015 at 7:34
11

Two things to have in mind when using color only to style links:

WCAG 2.0 states (for Level A!):

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

So if you want your site to be accessible, you'd have to add another visual cue to your links. This could (but not has to) be an underline. However, if the contrast is high enough and you provide a different focus behavior, color alone could be sufficient. See also G182 and F73.

If you don't use some kind of line or background to style links (in addition to text color), users will have the problem to distinguish adjacent links. How do they know if two or more words are linked to one page OR two or more pages? They'd have to hover/focus the link(s) to be sure. If they already clicked (and didn't recognize the partly styling change after hovering/focusing), there may be a chance that they recognize a partly 'active' style.

Improve this answer
10

I haven't used underlined links for at least 5 years unless it was a stylistic decision. From an aesthetic perspective they are just plain ugly, but from a usability perspective I find that my eye tends to jump from link to link making it difficult to read the full text.

This does mean that I spend an inordinate amount of time playing with styles, weights and colours to get a meaningful contrast between body text and links that isn't as jarring as blue underlined links, but it makes me happy!

Improve this answer
2
  • 2
    Sometimes you do want people to jump from link to link. I personally hate reading. When I'm searching for something, I usually just focus on the links because one of them must take me to what I'm looking for. It's the same with Google SERP. How often do you read every single word? Don't you jump from title to title AND THEN read the description if you're still uncertain whether a particular result is good?
    – JoJo
    May 13, 2011 at 21:46
  • 4
    well, sory to put it bluntly, but the fact that you personally hate reading is your personal issue and you should not transfer your personal problems into your design. The plain fact is that immense amount of the material on the web is basically textual information, that is intended to be read. Links are just an attribute of a text that should indicate a possibility of finding out more details about the highlighted text. As such, readability should in most cases be the primary overriding goal, indication of clickability should be the close second though...
    – Roland Tepp
    Aug 31, 2011 at 6:44
7

It's probably best to always underline your links. There is not enough evidence of links' effect on readability (the study that was linked earlier shows almost insignificant effect of underlining links on readability - and one study isn't enough to make such an important design decision anyway).

The point of underlining links is to signify their functionality, so that the user always knows if a part of text is a link. This can actually be done in several ways, but underlining links is best of them at the time.

You can, of course, use color to signify the functionality of links. This, however, greatly limits your choice of color, since all links must be of the same tone. No grey links if you chose blue as the link color! Otherwise, nothing will signify the functionality of links (if a link can be not only blue, but also grey, then why not some other color?

But that's not all. Consider the fact that your website isn't the only one on the web. A user can't be sure that link color is consistent throughout your website. A user just can't know if that is so.

So, underlining links is actually the most convenient way to signify hyperlinks' function. Users are accustomed to it. It can also be aesthetically pleasing, if done right (for one, line-height should be sufficient). As for it's effects on readability, it's an open question. Note that the Hamburg University study suggests that underlined links affect readability negatively when links are spread throughout a block of text. But even if they do lower readability, I think their positive effect on usability outweighs the possible lessening of readability.

Improve this answer
1
  • Underlines, particularly defaults that are too close, cause crowding and visual clutter that negatively impacts readability. When an underlined link may be more beneficial is outside of text blocks. A balance is needed regarding what is more important: the content being read (i.e. the main article) or reference and navigation. Not all content should be treated the same for contrast or link underlines. The content purpose is what should be driving design decisions.
    – Myndex
    Nov 3, 2023 at 2:10
4

You'll notice that most of the links on this page aren't underlined. :)

I do like to use dotted underlines to indicate AJAX links, which open in the current page (and which can't be middle-clicked). Fog Creek uses that for their links in Kiln:

Kiln underlined links

But I can't say it's a widely used style.

Improve this answer
5
  • Dotted underlines?? I never realized that was a convention. Do most users differentiate?
    – Ray Mitchell
    May 13, 2011 at 19:35
  • 1
    I didn't know dotted underlines were a convention either. What I do to differentiate Ajax links is to not make them hyperlinks in the first place. I always make Ajax links as buttons. Whenever I see blue links, I put on my programmer cap on and think "will this link take me to a new page and wipe out all my work or is it an Ajax link?". I hover over the link and check the HREF to figure out. Do you really want to subject normal users to go through this scary process?
    – JoJo
    May 13, 2011 at 21:56
  • Unfortunately, in an AJAX-heavy application it's impossible to make everything a button. (Even the "help" link to the right of the comment box suffers from this.) And with solid links it's impossible to tell just by looking. (I can't tell you how many times I've futilely tried to middle-click stuff in Gmail - some links work, some don't). Dotted links save powers users that grief, while still looking "clickable".
    – Phil Cohen
    May 13, 2011 at 23:08
  • Seems like the dotted underline is used for something else originally, but the visual styling has been hijacked for another use. w3.org/wiki/HTML/Elements/abbr
    – Michael Lai ♦
    May 23, 2013 at 7:02
  • I though this was a convention too, for a long time actually (since the "WEB 2.0" days). @MichaelLai to me, the same color + dotted = abbreviation; hyperlink-ish color + dashed (or dotted) = dynamic ajax link.
    – ᴍᴇʜᴏᴠ
    Jan 12, 2017 at 16:35
2

The important thing is that the links are blue and that they stand out from the rest of the text - that's enough to tell users: "this is a link". Check the links on the right side of this page - I don't mistake them as regular text even though they lack underlines. It's all an aesthetic thing, underlines breaks the clean flow of a text. To further enhance the feedback that the text is a link, one can put an underline when hovering the text.

Improve this answer
2
  • I don't know if it's right to say that we just need things to be blue...we care about colorblind people, right?
    – Brian Schroth
    May 13, 2011 at 17:02
  • 2
    The wast majority of the color blind people are red-green color blind, so they don't have problems with the blue links. Total color blindness (when one's vision is basically grayscale, or the blue cone is missing) is very rare (about 0.003%). It's like considering Commodore64 users today when developing a cross platform application.
    – Calmarius
    Jul 5, 2012 at 9:43
1

In addition to the good points other answers have made about the benefits of underlining links, another important consideration is the rise of mobile devices and other touch-based UIs, which lack hover functionality. On Wikipedia I frequently run into text like "President Truman". How many links is that? With the default stylesheet here lacking underlines for links, the answer probably isn't what you think, and if you blithely click on the word "President," you'll probably be taken somewhere you weren't expecting to go. (This, incidentally, is why I've modified my Wikipedia user spreadsheet to underline all links.)

Experienced desktop users know to hover over the text to see if an underline appears or, if the site owner hasn't added hover features to links, at least see if different URLs appear in the status area. But what of users on mobile devices or tablets? They're forced to tap randomly and hope for the best, unless they're sufficiently moved to long-press on different parts of the sentence to see if they lead to different URLs.

The bottom line: considerate UX designers take mobile users into mind when developing link styles.

Improve this answer
0

The matter is not when, as all hyperlinks must look the same on a site, but if they should be underlined or not, and that mostly depends on your graphical chart. What else is going to need to be underlined, how will it not conflict, etc.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.