Links: Underline vs Colour change
15 Jan 2013 - 9:23am
11 replies
534 reads
Hi all,
I'm struggling to find any research on this so was hoping to create a dialogue about it, an hopefully even track down some theory/studies that might relate to it.
Underlines VS Coloured text, both in the context of a static link and a hoverstate. What are your thoughts?
Personally: I think it's pretty negligable - but if there's any data I'd love to see it.
Comments
Hi Nathan
I think that Jakob Nielsen (http://www.nngroup.com/people/jakob-nielsen/) used to recommend that all clickable links were blue and underlined, you also have to be careful as to which colours you choose with regards to colour blindness.
Relying on colour change (hoverstate) alone could be an issue with regards to touchscreen devices, unless you use the genius of media queries to change your link styles.
Here are some areas to consider:
Issues with using colour only to denote a link would be 1 accessibility (cognition that a link is in fact a link, and also colour blindness or macular disorders require sufficient visual difference between a link and non-link) as well as 2 deviating from the commonly understood pragmatics of the underline denoting a link.
For hoverstates, consider tablets and mobiles. How would users recognise a link with no hoverstate?
Who is / are the target users and what is the site for? E.g. A banking site Vs a music site coul call for different treatments to create an approproate experience.
If you use colour to denote a 'mechanical' link function, how will you create mood / reflect emotional brand values with typography?
I guess someone should point out the obvious, that this IXDA site reserves underlines for hover. It does help to reduce the visual weight of the page.
It is true that this is technically an accessibility issue but only in the very extreme case of total color blindness, not in the more common case of color deficiency where specific hues are confused. Even in the most extreme cases, if your text is black and links are colored, they will appear gray and therefore distinguishable. Also, user style sheets can overcome the problem, so as long as you don't conflict with that browser functionality I think it should be fine.
To unpack more, it's worth reiterating that colour blindness (or colour definiency) sits as one of some combined small issues which, In ensemble, can create an experience of some abiguity. This points back to user base which can affect level of accessibility you decide to go for. As a case study, this site doesn't, in all likelihood, have a user base who are cognitively impaired or who have poor online literacy so the interface language can be subtle.
You can download plugins to simulate the effects of colour blindness - protanope, deuteranope and tritanope. As Mike points out, tritanope is severe so you get greys, blues yellows and pinks. The others are less severe in terms of colour shift, but in between there are different gradations of severity. Colour blindness is mainly a man thing (recessive chromosome) and fairly uncommon.
Cognitive impairment and low reading age are some if the forgotten accessibility issues, as is interface literacy. So how you use colour / underlines is a context / audience thing again .
Lots of blah on accessibility!
Brand, as I metioned before can affect what you might choose to do. This site uses two colours, so using a colour to differentiate links from copy (and using pictos/icons to enhance meaning) is a simple task. If the site used a load of colours to push / follow brand identity requirements, differentiating links from non-links is trickier.
"arguments based on color deficiency issues are a stretch"
Not really a stretch, it rather depends on level of accessibility you need to aim for. W3C gives guidance.
"arguments based on color deficiency issues are a stretch"
Not really a stretch, it rather depends on level of accessibility you need to aim for.
W3C gives guidance which is a good fixed point of reference, based on the original request.
I've been involved in usability testing sites for years. Going back to the initial question, I've seen issues with links that are both too bold and too subtle.
We're now at the point where a traditiional blue underlined link, while technically proper, looks old. I've had some test subjects call me out on that. On the other side, I've also seen regular-sighted users have problems identifying links because the color choices and/or rollovers were too subtle.
This is somewhat anecdotal, but these are my four key takeaways I've had from seeing users react to links in so many tests:
Hello everyone,
I'd just like to thank you all for laying down your thoughts here, very interesting reading and I appreciate the time taken. On the most part I think that my assumptions have been verified - but there are definitely a few extras to consider here.
I think the point about links being 'too obvious' is an interesting one. It's something I've come into contact with regarding large CTA's; it's often hard to convince a stakeholder that making their button smaller may increase engagement - but it's often true.
I also agree that blue is a good colour choice, not just because of familiarity but because of the accessibility advantages it brings over other colour choices. This was originally an accident, but a fortunate accident none the less!
Nathan
I agree with Chassy's comment, "Make a link too big, or too graphically treated, and users will scan right past it. They're generally expecting something roughly the same size as the text around it."
The main reason people tend to ignore links that are too graphically treated (large call to actions), is because when the user scans the page they often asscoaite large graphical links as an advert, and therefore ignore it.
Hi Digital Crusade - I'm guessing your comment was posted before mine was moderated (IxDA make conversation very challenging in this forum for some reason) - but yes, 'banner-blindness' will definitely be a factor - seen it quite a bit myself with huge CTA's - people adapt and what worked 5 years ago won't neccessarily work now.
EDIT: I appear to be out of the moderation bubble now - so hopefully no more disjointed convo :)