It’s a question I was wondering for only few weeks despite I have been creating webpages for more than 10 years. You see what I mean? I’m talking about that:

Blue link

There must be a very good explanation. And I had to find an answer, this question sounded to me like the modern/tech version of: why the sky is blue?

 

Look back

You may remember some web site 15 years ago:

Ebay design blue links 1999 Google design blue links 1999
It is not very sexy indeed, but these pages come from a time where designers were more drawing chairs than UX.

 

Naive ideas

So why blue and why exactly this blue: #0000EE and why the underline is 1px thick and 2 pixels under the baseline of the text…?
I tried to answer these questions by myself first:
  • We obviously need a visual way to clearly identify the links because users need to understand what is clickable and what is not
  • Defining a default colour for links makes them consistant even from a site to another and users don’t need to learn how it works each time
  • Blue is the most consensually preferred colour in the world
  • This blue offers a good readable contrast with a white background
  • The blue colour is perceived as blue, or at least as different from other colours, by most people
  • And whatever it is or not, the underline emphasises the fact this is a link
  • It also helps to differentiate a link from just a coloured text

 

The non-explanation

We have to understand that this choice of underlined blue links, comes from the very first Web Browser. Actually, probably even before. From the first draft of the web standardisation when Tim Berners-Lee “kind of” invented the World Wide Web around the 90’s. And all the modern browsers have kept this style since.

What was he thinking about? Was he fully aware of those arguments? Did he study the question deeply and made a list like mine?

It appears that no. It seems a totally random and lucky choice. He probably just liked the blue colour like most of the people. But he definitely had the idea of an easy way to identify the actions of a page.

 

The blue links agony

With more technical possibilities (CSS) and more imagination, websites have progressively swapped from what could have been:

BBC website no CSS

to

BBC website with CSS

Nicer, less agressive, smoother for the eye, the actual version is so far from the blue link that there are even no difference between texts and links. With that kind of example and all the flat design trend, the line between content and action is so thin that it almost disappears.

 

Value the content

20 years ago, a person not familiar with a computer would have probably not guessed that this piece of blue text could lead to a new content. Why? Because there is no such absolute rule as “blue underlined text are clickable”. One would claim that it has a good affordance, but actually, if everyone knows that today, it’s because it became a convention.

Capture d’écran 2015-05-07 à 23.28.36OK, now let’s consider the same site again. There is no indication that the titles under the images are clickable, that the bullet items are or that the top and bottom navigation also are. But you would actually understand that naturally. Why so?

It may have become a new convention, you instinctually know you can click here because you are used to the way it works.

Because except on textual content where clickability has to be highlighted, before reaching that content, you have lists, images, menus… and everything is mostly clickable.

And finally the paradigm has changed: we come from an era where shapes and colours indicate the clickability  but now the content and its role dictates it. Why the title “US phone data collection ‘illegal'” predicts that it is clickable? Because it is not sufficient by itself, it’s just a title, we want to know more, it has to be clickable, no need to add an extra color, decoration or anything else. The content has become the clickability indicator.
 

And only the content?

No deep highlight on each link with a bold colour and an underline like in 90’s doesn’t mean all the links and buttons have to be visually neutral. Yes the site will seem visually lighter. But on an e-commerce site, should we read the full page to understand how to add to basket?

This is precisely on a very visually light website that high contrast on main actions (“add to basket”, “Send this e-mail”, “Publish this Article”…) will have more impact. And in that case, on a white and dark gray website, why not using the blue #0000EE to highlight your main action?

And you, what colour would you have chosen for the creation of the web?

 

Previous post

From architecture to UX

Next post

#Weekly shake: Inside Netflix, Facebook visual identity, Collaborative user research, Web in real life

2 Comments

  1. Caro
    5 June 2015 at 6 h 48 min — Reply

    Great!
    Carolabaronne

  2. 14 June 2015 at 22 h 39 min — Reply

    Good day! I could have sworn I’ve been to this website
    before but after going through some of the posts I realized it’s new to me.
    Anyways, I’m certainly delighted I found it and I’ll be book-marking it and checking back frequently!

Leave a reply

Your email address will not be published. Required fields are marked *