It’s about affordance: giving visual clues to the function of an object. I would postulate that wether the link is red, blue, green, black, or white does not make much difference as long as it is distinguishable from non-clickable content. It is not the color of the link alone that makes it recognizable as a link: the color is not the pattern, a different color and underlining is.
Consider the image below. It has snapshots of 7 different sites, where only one features blue link color. Still, it is not harder to spot the where the links are located in the other 6 snapshots.
If anything should be said about the visual design of text links, a number of principles can be listed:
- A color different from the color of the main content enhances the link’s distinguishability.
- Choosing a color that is brighter than- or at least in contrast to- the main text color enhances the link’s distinguishability.
- Underlining a link enhances the links distinguishability.
- Any mouse-over behavior should have a highlighting effect.
- Links with different targets (for instance target=“_blank” for external links) should be clearly distinguishable.
- Title attributes should be descriptive as to where the link will take you.
toxboe
Anup
16 Jul, 2009
Nice post. I wonder if it is worth adding as a consideration that reliance on color alone isn’t always ideal — underline (or even bold, maybe???) or something else that helps with people who are color blind or have some other visual deficiency may be useful.
MDX
18 Jul, 2009
I agree with Anup. If users had at least 2 ways to distinguish a link it would be an almost fail safe method for displaying links.
Dilini
15 Aug, 2009
I agree with Anup as well. I was also wondering how you suggest distinguishing links with different targets. Many sites now use an icon to show external links. What’s your view on that?
Web Redesign
27 Aug, 2009
The title attributes are important not only from an SEO perspective but also from a usability perspective. Can the titles be styled as well?
Josh Johnson
27 Aug, 2009
Yeah, the idea of differentiating based on target seems a little ‘off’, because there may be a variety of reasons to change the default target. The more interesting differentiation for most users is whether or not the link leaves the current site, and that’s the case I commonly see where the link has an icon. If a site had an internal link that pops up in a new window/tab, I think it would surprise most users if that was given the same treatment as a link that goes to another site.
Anders Toxboe
27 Aug, 2009
@Dilini and @Josh Johnson: In regards to distinguishing between different targets, I was especially thinking about the “external” icon that for instance wikipedia uses. There could of course be situations where you would use a target=“_blank” for staying on the same page -and that might be ok. It all depends on the context.
The only thing that matters is that the user has a good idea about what is going to happen once he or she clicks on a certain link. It’s about not surprising (and frustrating) the user.
Josh Johnson
2 Sep, 2009
Yep, surprises are good on your birthday, but not in your UI designs. :)
Brad Pyne
27 Oct, 2009
I agree, the only thing that matters is how distinguished it is from the content.
22i
12 Nov, 2009
So how would you clearly distinguish links that are targeted to _blank?
22i
12 Nov, 2009
Also how would you automate the coding of external links so that a content manager doesn’t have to manually add, for example, the image to an link opening in _blank whilst not appending it to internal links?
Jason
3 Dec, 2009
I’ve been debating about this for a few hours now – playing around with css file sheets. Blue seems to be the “universal link color” – but, I wanted to do something more unique. Your post gave me some clarity and I just wanted to leave a note to say thanks.
Regards,
Jason Lanier
Patrick Kallie
10 Dec, 2009
This is something that I have been debating for sometime now, I think your link should be a color that stick out. So people will have no problem with were your links are. I usually use a brighter color, when I was using a color that was similar to my text my click through ratio was way down.
You will have a much better click through when you have a link that is bright color. Do some experimenting to see which ones have the better click through rate, this will tell you which one you should use. Hope this has been help full.
Patrick Kallie
AJ
18 May, 2010
Agreed. If it looks different than the normal text it is most likely a link. Whether it is blue or green is irrelevant. It really depends on your site’s design.
Tom
12 Jul, 2010
Why has US english become standard english all of a sudden?
Who invented the english language?