Are blue hyperlinks still the “norm”?

This entry was posted on Tuesday, June 29th, 2010 at 1:04 am and is filed under Graphic design, Landing Page Optimization, Mike's Opinions, Web Design, online marketing.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

I’ve been reading an older book on web usability, and as I’ve heard many times, it recommends blue hyperlinks for all your links. The book being close to 5 years old, I started to question if blue hyperlinks are still the “do not break” rule of creating hyperlinks? Interestingly, yes and no.

In an extremely unscientific study, I thought I’d do a little investigating of how true this golden rule of hyperlinks is today. I started by looking at the top 5 websites, and here’s what I found:

Google: standard blue (#0000CC) hyperlinks. However, the purpose of google was and still is to get people to link, and has one of the most basic site designs on the web. Function above form, so there would be no reason for Google to even experiment with other color links.

Yahoo (home page): The majority of links on Yahoo are a blue, but not the once standard blue (#0000CC).

AOL (home page): The AOL home page is user customizable (something that I actually dislike greatly by the way), so this can change based on user.

YouTube: A slight variation on the standard hyperlink blue, You Tube uses #0033CC for most of their links. However, I don’t know that this color difference would be noticeable to common web users.

Facebook: For the most part, Facebook uses blue for their links, however it’s a colder blue than the standard.

Taking the test a little bit further, I visited the top 10 retail Websites (of 2009), and looked to see what they were doing in terms of hyperlinks:

Amazon: Like Facebook, for the most part, Amazon uses blue links, and again, a slightly cooler blue than the standard (although brighter than Facebooks blue).

Walmart: Again, blue is the primary link color, but a blue that’s slightly cooler than the norm, but still a bit brighter than Amazon. Interstingly, both Walmart and Amazon use an orange color for the rollover. Also, while different, Amazon and Walmart use very similar colors, but I don’t feel that the average shopper would notice the difference (coincidence? I doubt it…)

Target: Target is the first site on these lists that breaks from the norm, using dark greys, blacks and reds as their link colors. While I find the link colors work for Target, they also use the same red for other callouts that aren’t clickable. Target does seem to underline all their links (which is something else I question as the norm), which makes it easier to know, but I did find myself clicking on some items that were red that were not hyperlinks.

Best Buy: Best Buy seems to use 2 different shades of blue, one quite similar to the Amazon blue, and one more of a reddish blue (but not quite purple). The darker blue is for their main site navigation, the other tends to be used for links to or within the product. The color difference is subtle, #003399 vs. #333399, so I would imagine it was done on purpose, but you never know, could be an oversight?

Dell: Dell uses various colors for links, sometimes depending on where you are on the site, sometimes the promotions are offset with a different color. While you may think usability 101 would tell you to keep it consistent, it’s not as bothersome as one might think. However, there are some things I would like to see consistent (main nav, footer nav), but that’s really just my own opinion.

Home Depot: Like Target, Home Depot is another site that breaks away from the blue, and uses dark greys/blacks and the Home Depot orange for hyperlinks. It’s actually what I expected to see before visiting the site (again, like Target).

JCPenny: JCPenny uses a combination of link colors, but they primarily stick to blue (a colder blue than standard) and black. They also use the same color blues for things that aren’t links (like Target with the red), so there are some flaws in my opinion, but for the most part, I knew where to click.

Sears: White, grey/black, various shades of blue, and the standard blue are used for most of the hyperlinks on Sears.com. Interestingly, Sears seems to use the standard hyperlink blue for product specific information, and the colder blue for navigation throughout the rest of the site. While the different shades of blue are nicely used, once on a product page, it was the standard hyperlink blue that drew my eye more than the other blues. Maybe this was the intention, but I would think the push to buy should be more important than the additional product information (although I’d expect they tested this).

HP: Links aside, I didn’t really care much for the usability of the HP site, but sticking to this article, they used a blue for the links.

So, to sum it up, here’s my conclusion:

Yes, blue is probably the best color to stick with for hyperlinks. However, the standard blue (#0000CC) is probably not necessary (and I would say not common). Of course there are exceptions, but for the most part, I believe people still look for blue text to click on (and underlined by the way). In the same line, I also thinks it’s important to NOT use blue (or underline) for text that is NOT a hyperlink.