In the early days of the web, some of us were young and naïve enough to believe that links needed to be blue and underlined. As the browser default, it looked as though any deviation from this standard just created problems for the user.

 

It was, of all people, an astrophysicist who set the defaults in the first browsers. And everyone just followed suit.

 

Little did we know how much trouble we were causing because we picked blue, underlined links. Links are the most important parts of any web page, yet these attributes are the worst possible choices.

The color blue is the hardest for you to see. Because of a shortage of color receptor cones in your eyes, your brain has to work extra hard to perceive the color blue. As we get older, those few blue cones we have start to deteriorate quickly. Men older than 45 years, slowly lose the ability to discern different shades of blue. (It happens to women, but at a later age, because women are better made.)

Of all the text styling options in common use, underline was also a poor choice (as compared to something like bold or italics). Most humans (except those suffering from neuro-optical issues like dyslexia) read entire words or phrases at a time. The brain looks at the shape of the word to discern what it says. Underlined text changes the shape of the word, cutting off the descenders, forcing your brain to work extra hard.

Who would’ve picked this particular combination of blue and underline to highlight the all critical link? Well, it wasn’t a trained ergonomist, perceptual psychologist, or human factors specialist. Nope. It was, of all people, an astrophysicist who set the defaults in the first browsers. And everyone just followed suit.

 

Links can be any color they want, but they need to be distinct from the other stuff on the page to work.

 

Fortunately, we’ve learned that we can leave behind blue and “underlines”, introducing colors and text attributes that deliver delight and beauty to our web pages. We regularly find links that are green, black, and white, along with every other color in the spectrum. Our brains don’t mind, and we have no trouble navigating the site

On the John Deere Site, we find non-underlined links in the corporate green, along with white and black. The page looks professional and is easy to navigate.

However, all is not perfect when it comes to how we color our links. There are choices that make life harder for our users. It’s not related to a specific color, but the relationship between how we style the links and everything else on the page.


On the LA Times, it’s hard to discern what’s a link is what isn’t.

Look at this page from the LA Times web site. In the top story at the top, what’s a link? Is the headline a link? Is the subhead? The blue “Discuss” marker? The bullets? Is the photograph a link to something? How about the caption?

We can’t tell what’s there for us to read and what leads us to more about this story. The problem is more than just a choice of color. For the LA Times, it’s a lack of a visual language that helps the user know what they can do on the page.

Links can be any color they want, but they need to be distinct from the other stuff on the page to work.


The BBC uses the color red predominately on this page. By styling many of the links with a bullet, it becomes easy to figure out what you can click on.

This version of the BBC News’ headline page has a strong use of red. To compensate, the designers have chosen to put bullets in front of many of the headlines. The language becomes clear to the user quite quickly: the links are the things with the bullets.

When coming up with a visual language, styling and color can be your friends. The trick is to be consistent about it.


United’s Check-in Process uses blue to indicate what’s a link. Unfortunately, they also have black links and blue text that isn’t a link.

On United.com, the designers are almost consistent. For much of the site, text in blue (not underlined) is a link.

However, it’s not uncommon to encounter a page like the one above. Here, the “Print Help: Don’t have a printer?” black text is also a link. And the blue “Boarding Documents” and “Confirmed Flight(s)” headings are not links.

In our studies, users encountering this page show confusion over what they can do. Their attention is grabbed away from why they came to the page (to get their boarding pass) and focused on United’s inconsistent visual language.

Go ahead and change the colors all you want. But make sure you deliver a well thought out visual language to your users, so they know exactly how to get around your site.

Read more of Jared’s thoughts on links.
Do Links Need Underlines?
Lifestyles of the Link-Rich Home Pages
A Link Labeled “Product (or “Solutions” or “Clients”) is a Bad Idea


 

About the Author

Jared M. Spool is the founder of User Interface Engineering, the largest usability research organization of its kind in the world. If you’ve ever seen Jared speak about usability, you know that he’s probably the most effective and knowledgeable communicator on the subject today. He’s been working in the field of usability and design since 1978, before the term “usability” was ever associated with computers.

Jared spends his time working with the research teams at the company, helps clients understand how to solve their design problems, explains to reporters and industry analysts what the current state of design is all about, and is a top-rated speaker at more than 20 conferences every year. He is also the conference chair and keynote speaker at the annual UI Conference and Web App Masters Tour, and manages to squeeze in a fair amount of writing time. He is author of the book, Web Usability: A Designer’s Guide and co-author of Web Anatomy: Interaction Design Frameworks that Work. You can find him on Twitter and at UIE.com