Links: Underline vs Colour change

15 Jan 2013 - 8:23am
1 year ago
11 replies
1422 reads
Nathan Hornby
2011

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

22 Jan 2013 - 7:09am
Digital Crusade
2013

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.

28 Jan 2013 - 6:43pm
philipbrook
2008

 

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?

 

 

 

29 Jan 2013 - 12:39pm
Mike Sullivan
2008

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.

29 Jan 2013 - 2:06pm
philipbrook
2008

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.

 

29 Jan 2013 - 3:24pm
Mike Sullivan
2008
Philip, I was actually talking about monochromacy (where there is no color vision) which is even more rare than tritanopia (where colors are visible, but certain combinations easily confused). If a tritanope sees a colored link, but it's not perceived as you intended, it doesn't really matter. It's still a colored link. A monochromat would have a difficult time seeing that the link was colored at all. But we are in angels-dancing-on-pins territory here. The larger point is that there may be arguments for underlining links, but arguments based on color deficiency issues are a stretch.
3 Feb 2013 - 1:35pm
philipbrook
2008

"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.

3 Feb 2013 - 1:37pm
philipbrook
2008

"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.


29 Jan 2013 - 4:34pm
Chassy Cleland
2008

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:

  • A change in shade will go a long way, and avoids issues of detecting a change in color.   My trick is to squint my eyes and try to detect any change on rollover or click.  If I can see the change, most color-blind users can as well.
  • Try and keep some blue in your links.   Regardless of shade or underline, I think we all look for links by scanning for some form of blue.
  • 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.
  • Use link styling as an opportunity to colaborate with your art director.  There are a lot of solid creative solutions such as the above.

30 Jan 2013 - 4:06am
Nathan Hornby
2011

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

30 Jan 2013 - 6:26am
Digital Crusade
2013

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.

31 Jan 2013 - 10:13am
Nathan Hornby
2011

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 :)

Syndicate content Get the feed