Formatting Links for Usability
Links are how people navigate your site.
Which is why it’s crucial that you follow 3 basic link usability guidelines: 1) underlining links, 2) coloring links, and 3) keeping link styling consistent throughout your site.
If you break any of these 3 guidelines, you will leave your visitors guessing about how to navigate your site.
1. Underlining Links
Underlined words are instantly recognized as links.
If you see an underlined word or sentence in a text online, you immediately conclude that it’s a link. This is how links have looked from day one on the Internet and everyone (subconsciously) grasp this fundamental principle.
So why would you divert from this principle? Because “it’s ugly”. Which is true, it’s not always visually appealing to have a link stand out in the middle of your beautifully crafted page. On the other hand, that’s also the very reason you underline links: to make them stand out and not look like the rest of your text so it’s clear that “this word” and “this sentence” can be clicked.
If you actually want people to click on your links, then you have to make it obvious that they can and should be clicked. Underlining text is the most universal way to indicate.
Links in menus are the exception. When you have a list of links where every single item in the list is a link, it’s OK to remove the underline. Convention has taught people to realize this and people will quickly decode the text as links. However, this requires that you at least color the links consistently.
2. Coloring Links
Blue words will typically be recognized as links.
The default link color is blue. While you should feel free to play around with different shades of blue, you should keep your links blue if you want to make it easy for your visitors to spot and recognize them as links. Especially if you don’t underline them.
When a visitor comes to your site, one of the first things he’ll do is to scan the page – especially if it’s a site where the user is to perform an action. Many users even scroll down the page and then up again to quickly get an overview. If you have ever done web usability studies sitting next to the test subject you might have noticed this tendency to scan pages.
When users are scanning your page, they will immediately be able to spot your links if they are blue, even if they don’t actually read the link text or even stare directly at the link. If you use another non-standard color for the links on your website, users won’t necessarily connect this color with “links” for the first few pages of surfing (which is often all you get from a first-time visitor).
Your users will have to learn to recognize your non-standard color as the link color on your site. You can shortcut this by using blue for your links because people mentally map this color to links.
If you do decide to break this guideline just be sure to have good reasons for doing so, like color coded menus or if you have a set of links on your page but you don’t want to call attention to such as footer links. And finally, if you do break this guideline, it will become increasingly important to follow the other link guidelines (underlining and consistent formatting).
3. Consistent Styling of Links
If you do decide to break any of the two above guidelines, then make sure that you’re at least breaking them consistently. Use the same non-standard styling on all pages.
This way your visitors will be able to learn what to perceive as links on your website and what they can regard as normal content after they’ve surfed around on a couple of pages on your site.
Green and washed-out gray text is links. The strong black text is not.
A great example of how wrong it can go when you’re styling links inconsistently, without underline or the standard blue link color, is AudioJungle.net (see picture to the right).
Here, when you first see the list you have no clue as to which words can be clicked and which are just normal text. In fact, you may believe all of them can be clicked, although subconsciously, following normal design principles online most users would probably expect the washed-out text not to be links – to be “disabled”.
Turns out this is not the case. On mouse hover you find that both the green and washed-out grey text represent links, whereas the strongest text in black can’t be clicked.
No Learning Curve
While all this might seem as small details they are all link conventions that have a great impact on how quickly and easily visitors can start interacting with all the great content and features on your site. And they are all guidelines that you see broken repeatedly throughout the web.
By following these 3 simple guidelines you’ll dramatically improve the usability of your site and your visitors will never have any doubts about how to navigate your site (at least not due to design decisions, bad information architecture will of course leave visitors confused).
Share your thoughts in a comment.
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Related Articles
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 93 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 8,400+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 582 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 info@baymard.com
LeonAugust 19, 2010
It’s an old subject but it’s worth revisiting…
I think users’ expectations may have shifted so that conventions are a bit more flexible. However, I’d say your links need to be one of blue or underlined.
It’d be quite interesting to see how these conventions have changed over time. You could <em>perhaps</em> argue that it’s now “acceptable” to not colour or underline blog titles that are links to the full post.
Obviously, you can do a bit with the underline to counter the ‘ugliness’ (or dissonance if you want to argue that it has an effect on reading), perhaps by using
border-bottom: 1px dotted #336699;or something.If you’re consistent you’ll be more able to play around with the convention.
Ivo BosmaAugust 19, 2010
The internet consists for an important part of links, so a litte extra attention for this subject is good.
Concerning your article: an added dimension is the visited state of a link; the principle that an already visited link gets another color (purple would be the ‘standard’ color).
This can be a helpful clue to the user which pages he already visited, and therefore help him in it’s goal.
IanAugust 19, 2010
Personally I think it’s fine to not have them blue. Make them stand out, yes, but feel free to use any colour you require.
Consistency is the key.
Tom HenrichAugust 19, 2010
I agree that links need to be set off differently than regular text if you want people to recognize them as links, but I don’t think requiring them to be underlined and blue is the right answer.
As long as they’re visually distinct, I think that should be sufficient. I tend to underline my links, but the web has evolved past black-text-on-white-background webpages, and blue just doesn’t fit in with a lot of color schemes anymore. I’ve seen perfectly usable and understandable themes that go with all-caps or small-caps links, or bold/italic links, etc. And they all work just as well.
MarkAugust 19, 2010
I think the days of making sure links are underlined and blue are fading away, so many websites now use different colours for links – meaning that if you do make them stand out from the surrounding text colour, a user will get that its a link.
CharlesAugust 19, 2010
Consistency is the key factor.
The other two, underlined and blue, are not so easy to justify. For many websites, there are so many links on a page that if each link were blue and underlined, the whole page would be blue and underlined and would not be presented in a manner that would not be delightful or usable. For instance: latimes.com
I really like the way techcrunch presents its content. Everything is very consistent, the links are visually distinct and identifiable with color (green) and weight (bold), and you get a nice hover effect (an underline) which helps to confirm you are hovering on a link. It’s a delightful user experience. Well done, techcrunch.com folks!
Sreeraman Mohan GirijaAugust 19, 2010
I have a big problem with underlining the links especially when it is a content site with a lot of links. It creates a lot of clutter. Imagine the tag links listed below an article. How would it look when all of them are underlined. Some people argue that in such cases the underlining can be avoided as people are already aware that they are links but then isn’t that contradicting one of the most important rules of usability – CONSISTENCY. Personally I go for a color that sets a link apart from the rest of the text in the site and apply a good Hover effect.
Sarah RinkAugust 19, 2010
Definitely agree with being more flexible.
And: “This is how XXX have looked from day one on the Internet”
What?
The Internet moved on. So should we.
I was interested in the article because – coincidently – I am looking for best practice in link design for touchable interfaces. How do we deal with that? Anyone?
Best example – given by Charles – is a news website. Should a news site like the latimes.com really have all headlines blue and underlined? How does that make the experience better?
While I agree consistency is sacred, I really think we need to give credit to users and believe that in the last decade of internet people have learned about what is clickable and whatnot.
StephenAugust 19, 2010
I think that some of the comments here are missing the point of this article. Yes, you can break from the default of making links blue and underlined (only if you keep them consistent), but we’re talking about usability here. The association of blue + underlined = link is a strong one, and has consistently been reinforced over time (think about search results).
Most users will be able to figure out your unique (but consistent) link style, but the question is should you make them figure it out? It may take only a fraction of a second, but it can still impact your overall user experience.
Jamie, Baymard InstituteAugust 19, 2010
Thanks for all the comments!
This post was written to provoke a debate about this topic and so it made a few strong claims.
If you have a good reason for breaking these conventions, then by all means do so (but keep it consistent). Just don’t do it because you’re personally tired of looking at the conventional blue, underlined words (I am too sometimes!). You should be able to explain why you chose the non-standard way of styling your links and why it’s better.
Stephen is spot on in explaining the meaning of my post, so I’ll repeat it here:
“Yes, you can break from the default of making links blue and underlined (only if you keep them consistent), but we’re talking about usability here. The association of blue + underlined = link is a strong one, and has consistently been reinforced over time (think about search results).
Most users will be able to figure out your unique (but consistent) link style, but the question is should you make them figure it out? It may take only a fraction of a second, but it can still impact your overall user experience."
Once again, thanks for all the input – lots of very valid arguments and ideas.
timyeoAugust 20, 2010
One thing we haven’t seemed to talk about is HOW we name our links. To this day, I still see “To read more about XYZ, click here”, where “click here” is made the link to XYZ.
The problem with this approach is that people don’t read BEFORE they find what they’re looking for; they scan the page for words and things that interest them. Even when they’re on the page they’re looking for (e.g. the article page), they will probably scan the page as well.
Using “click here” links prevent users from scanning a page and picking out the topic of the links that interest them. They’ll notice the “click here” link and will have to backtrack the paragraph of text to see what it refers to.
Very painful.
Christian, Baymard InstituteAugust 27, 2010
Great point. There seem to be “two camps” on this:
1) One that argue what you does, which from a usability point is better because it provides information scent and make the visitor able to scan the page.
2) Another that sees it from a copywriting angle where “click here” is an action word that encourages the visitor to click the link – hence in some cases resulting in a better conversion.
I personally agree with you and prefer links with information scent. But you can of course a/b split test if option 2 really converts better.
Julian August 23, 2010
Timyeo comments on the practice of writing “To read more about XYZ, click here”, where “click here” is made the link to XYZ.
I favour something like "For more information about XYZ, see ", where is the link. Combine that with a short description appearing when you hover to make it clear to the reader whether they need to follow the link.
markAugust 23, 2010
You left out a couple. One that you are guilty of.
1) Multi-line links should bet one big clickable region. Your links on the right have whitespace between the lines and I clicked and missed the link. Plus hovering over them flashes them quite annoyingly.
2) Hovering over links should not ever cause them to move. Recolor or restyle them, yes, but don’t change their size or location.
Jamie, Baymard InstituteAugust 27, 2010
1) Well spotted! The click area has been increased so there is no “non-clickable” space on multiline links.
2) Very true. I mention this in one of my other posts about links, titled links and the hover state.
John CrumptonSeptember 23, 2010
So how about visited links? The recommendation for years have been to have a different colour for visited links, however many large sites like the Guardian don’t bother.
Jamie, Baymard InstituteSeptember 24, 2010
See my other article specifically about the link’s visited state
Augustine SouzaOctober 12, 2010
Despite what authors want, I, as a user, would like to have all unvisited links blue and all visited links purple and all other text black. That is consistency for me for all sites.
By using an elementary user css (with the Chrome browser) I’ve had success with the other text, but I have not managed to entirely fix my link issue. I don’t know much about css (and sometimes feel too old to learn new tricks), so I’m hoping that you could help me out.
What I have below is not enough to fix all types of links. For example, even on this page, at the end of the article but just before the comments section is a link in black and bold: RSS feed. How do I fix my user css so that even that link is blue?
This is part of what I have:
I am reconciled to losing a few features here and there. And, for certain essential work, I have another profile with no user css so that the author css rules.
I hope my post is not too inappropriate and thanks for taking the time to read it.
Jakob NeilsonNovember 2, 2012
You broke your own rule. Your related article links are black, not blue.
Iza BartosiewiczMarch 21, 2013
Interesting discussion on an important topic. I agree with Jamie, but would like to add a couple of points that haven’t been mentioned:
1. When changing link colours, please consider:
- aging eyes, vision impairments and environmental factors (e.g. glare) and use a decent contrast, particularly when the underline is removed.
- colourblind people (blue is the safest colour, but there are other colours that can be used)
Some handy tools: Color Oracle (http://colororacle.org/), Contrast Analyser (http://www.paciellogroup.com/resources/contrastAnalyser) and Contrast Checker (http://contrastchecker.com)
2. Do not remove on focus indicators on links. Many people rely on keyboard for navigation and you can’t do that easily if you can’t tell where the tab focus is. Try tabbing through few sites and see how you go.
The best links are those that are immediately recognisable and don’t leave you guessing where they are going to take you; we should be able to tell that from a link text alone. ‘Click here’, ‘more’, etc. will not make sense out of context, so they’ll be difficult to scan, will create problems for people using assistive technologies, and are not great for SEO either.
Try Link Context Checker (http://www.seowa.com/linkcontextchecker.php)