Skip to page content or skip to Accesskey List.
Search evolt.org
evolt.org login: or register

Work

Main Page Content

Should hypertext links be blue and purple?

Rated 3.11 (Ratings: 18) (Add your rating)

Log in to add a comment
(18 comments so far)

Want more?

 
Picture of Luc

Luc Carton

Member info | Full bio

User since: February 01, 2002

Last login: February 01, 2002

Articles written: 3

According to Gerry McGovern, hypertext links should be treated like traffic lights, and always use the same colors in a pre-established order: blue, followed by purple.

Obviously, for reasons of efficiency and, above all, safety, no one would ever dream of replacing the three colors of the traffic light system with colored neon lights, even if it did make them look better (Gerry McGovern "Web navigation: traffic light, not neon light design").

Both Gerry McGovern and Jakob Nielsen believe that it would be a mistake to use any colors other than blue for unvisited links and purple for visited links.

Although I agree with McGovern that the primary aim of site navigation features should be efficiency and that making them more flashy usually only confuses visitors, I don't believe that the colors chosen are all that important.

In my opinion, the main way of characterizing a link is not by using a particular color, but by underlining the text itself.

If the color was the main characteristic of a hypertext link, all we would have to do would be to make certain parts of the texts on our sites blue to let users know that they were clickable. Allow me to doubt the efficiency of this rather simple tactic.

In my opinion, the color means nothing if the text is not underlined. The color of a link can make users more aware of it, but it is only of secondary importance. Moreover, putting underlined links in bold can work just as well.

It is interesting to note that, on McGovern's own site, Nua.com, the links in the center of the page are indeed blue and then purple once they have been visited, but that blue is also the color of the site's left- and right-hand columns. Choosing the color blue for its links is therefore totally in harmony with the site's color palette, and works well esthetically.

However, we also noticed that, for readability purposes, the hypertext links in the left-hand menu are white on blue! What's more, they do not change color once they have been visited.

Like the menus on McGovern's site, the great majority of e-Commerce sites have now given up using the standard blue/purple colors for links.

This was one of the findings of our study of the homepages of the 100 top American eRetail sites ("Homepages that Sell").

The study sample is composed of sites with browser-to-buyer conversion rates of between 2% and 30.3%. These sites are visited by 120 million users every month and are therefore totally representative of Internet traffic.

The results of our study show that, as far as hypertext links are concerned, only 27% of the sites still use the "standard" blue color for unvisited links. In other words, 73% of these e-Commerce sites now use links that they have customized in their own colors.

Example of customized links on oneHanesPlace.com (old and new version of the site):

We can therefore conclude that blue/purple "standard" no longer exists - in any case as far as e-Retail sites are concerned.

My second reflection concerns the question of whether visited links should change color or not.

61% of the sites in our study do not use different colors according to whether the links have been visited or not. Worse, only 13% of them still use the color purple for visited links.

I'm not trying to say that these figures demonstrate that the standards championed by Nielsen and McGovern should be given up for good, but simply to point out that it is quite clear that users today are not disorientated and/or disturbed if sites don't use them.

Moreover, when a user visits a site selling clothes, for example, he probably does not need to be reminded whether he has already visited the menswear, sweater or tie sections: he is perfectly well aware which categories he has already looked at.

The same reasoning is true for many of the main "repetitive" pages habitually found in the navigation structure of a retail site.

This leads us to question whether we are offering users a real service by changing the color of visited links or whether we are not, in fact, making navigation more awkward for them.

In fact, I would go even further than this and say that it can sometimes be counter-productive for a site to change the color of its links for certain categories (Best sellers, for example): the user may not revisit links if their color has changed, although the site's commercial success may well depend on these categories being regularly revisited.

Admittedly, my approach goes further than the usability aspect alone, since it is mainly focused on the eShopability capacities of e-Commerce sites.

Choosing the color of links on a retail site and changing the color of visited links is no longer merely a question of adhering to standards, but of deciding whether or not they fit in with the site's commercial goals.

I'm not saying that Nielsen and McGovern are totally right or wrong, but quite simply that we should be specifically approaching the subject of retail site usability from a new angle: eShopability.

On an information, a press or a university site, for example, the function of a link is to let readers know that an underlined text will give them access to another resource, either on the site itself or on an external site.

This type of link corresponded perfectly to the needs of the first sites that appeared on the Internet. However, the aims of these sites were quite different from the aims of e-Commerce sites today.

In the "informative" context, changing the color of a link is totally justified: it effectively reminds the visitor that he has already accessed the information connected to that particular link.

This is particularly useful for searching the site's archives, for example.

However, the things that make this type of site easy to use do not necessarily work so well on e-Commerce sites.

That said, each approach has its own merits and the two can sometimes be used together in a complementary way.

There is no point, then, in discarding one system or the other; it is much better to use them appropriately, not automatically, according to the aim of each particular site.

I believe that Web standards should evolve as users' experience grows. If we try and freeze certain criteria, by likening them to traffic lights, I don't believe we will be doing much of a favor either to retail sites or to users.

Luc Carton - eShopability.com

Luc Carton
Author of Homepages that sell
http://www.eshopability.com
Bio: http://www.eshopability.com/biolc.htm
eMail: luc_carton@eshopability.com
Phone: 331 45 45 15 22
Fax: 331 53 01 32 68

Changing visited colours

Submitted by luminosity on March 21, 2002 - 02:23.

I agree with this article up to a point, however you seem to be saying that because site's will want some sections to be revisited, no active colours should be changed. Why not a compromise? CSS could specify it so that category links had no different colour designated for active, while normal links did. The user is prompted to revisit those sections, while not having a potential aid removed.

While overall, I believe that changing the visited link colours isn't all that useful, there are certain situations where it is extremely useful. For example, if you've just gone to a site and found a page you liked, and you're going back to find the url to give to a friend - with visited link colours you don't have to think, and can accomplish the task in minutes. Another situation would be browsing amongst a list of items - it's much easier to be able to look and instantly tell what you haven't visited than having to try to remember - and the computer's cache will be a lot more effective than memory in the vast majority of cases.

I agree 100% with being able to change the colours to fit in with your site, but I feel that removing a useful aid such as a visited colour is likely to annoy users - perhaps driving them to the competition.

login or register to post comments

Not Quite on the Mark

Submitted by Corsair on March 21, 2002 - 03:31.

The two persons(Gerry McGovern and Jakob Nielsen) mentioned at the beginning of the article have a good point, however what they are saying would have been relevant several years ago, at least in my opinion. Very few places that I've seen still use, besides search engines, the blue/purple combo. It seems that, like with everything, the fad now-a-days is using CSS to change the style of the links and everything else on the page. I think most people are able to distinguish a link on any given page as long as it wasn't created by a totally inept person who makes it look exactly like the rest of the body of text.

Having to stick to a blue/purple combo can limit the effectiveness of the site. For instance, if you have a list of menu links on the left side, that menu has to be a light background color otherwise there is a conflict with the background and the foreground colors. Being able to change the color scheme of a link helps with the freedom of the design of the site.

Gerry McGovern and Jakob Nielsen do have a good point in that a standard is needed, if only for each individual website/site style. As long as there is some kind of "standard" in regards to the links it should be easy enough for the user to recognize the links. As much as we, as developers, need to think about how the user would see the site I think some times we don't give the user enough credit.

login or register to post comments

underlining is just as archaic

Submitted by broFECES on March 21, 2002 - 07:34.

personally, i think that a site design that acts consistently and makes their link methods obvious, will be a winner for end-users.

i've made sites where the site design makes the links very obvious.
for instance:
take a white background, normal-weight body font, and orange bold links with a hover color. once you understand why the words in the midst of sentences are links, you can't help but understand what's going on.

so i would say that standards such as hard colors or always underlined in this area are a bit limiting. it's up to the site maker to find a clear way to communicate whatever it is they need to communicate, and that includes navigational methods.

login or register to post comments

Blue and Purple no more.

Submitted by TonyHaddon on March 21, 2002 - 07:42.

I agree with Corsiar. Are we to assume that the first-time internet user is going to be faced with blue links on their first website? No guarantee. True, many of them will use Google or Yahoo! which do follow Nielsen's lead to an extent. But my parents' first website was Hotmail, and they do just fine.

The colours these days are irrelevant. What is important is that the user can recognise quickly and distinguish between information, links, and visited links. I have, in the past dallied with the CSS a:hover class by disallowing the underline until the user's mouse hovers above it, but I have conceded over time that this is only making things more difficult for my users.

Nielsen's been at this work for years, he's highly respected and his work is valid. However, I believe its validity lies more in the speed of browsing/finding what you need via information architecture than through colour psychology. People may argue this. But we are not test-pilots who need to flick controls within milliseconds, we are internet users, and in Ireland, as well as here in Australia, we have to wait for pages to load.

The textual distinction is important - underline is most convenient, I believe. Colour is important, in that it must highlight links against body text. Beyond that, it doesn't matter what the colours are. Not at all.

login or register to post comments

Hue versus value & why specify underlining?

Submitted by marlene on March 21, 2002 - 10:58.

Regarding color on e-commerce sites, you state:

I'm not trying to say that these figures demonstrate that the standards championed by Nielsen and McGovern should be given up for good, but simply to point out that it is quite clear that users today are not disorientated and/or disturbed if sites don't use them.
If I were doing research on a product, for example digital phones, and were wading through numerous offerings, I would certainly appreciate knowing which phones I'd already viewed.

The approach I use when deciding unvisited vs. visited link colors is not centered around hue (blue vs. purple), but rather value (bright vs. muted). I pick a brighter unvisited link color that works with the site design. Then I choose either a dull version of the color for visited links, or I make them close to the color of regular content. In some cases this means the unvisited links might be bright blue, while visited links are some variation of gray (when content is black).

With regard to underlining, I've begun to leave it up to the viewer. I used to always specify underlining, until one of my audience members complained that CSS-forced underlines annoyed him (he'd turned underlines off in his browser). Only then did it occur to me that the text-decoration: underline attribute really wasn't necessary, and in some cases actively interfered with users preferences. Leaving this attribute out allows the user to decide (most browsers show underlining by default). Specifying underlines is kinda like specifying text-align: left ... in most cases it's unnecessary.

login or register to post comments

humm...

Submitted by jesteruk on March 21, 2002 - 15:39.

Frankly articles like that annoy me. I read a "links should be blue and purple" article and I strongly disagree. Links should be blue and purple, eh? Should the background be white, the text be black, the font face be times new roman too? Come on, we must be creative, I know when I visit a site and I'm jumping through the pages I use my memory, not the colour of the links. The web is changing, web development is growing, it's time these boring oldies get with the times, hehe.

-J

login or register to post comments

Well, you know.

Submitted by Shatai on March 21, 2002 - 17:37.

Heh, this is merely a penance on web developers. I feel that the colours of blue and purple may fit on some pages, but if a developer has a site meant to have a clean and elegant look where maybe only black would suffice as a link colour, then it should be an option. The only thing I really see as a "trademark" to URIs is the underlining of linked text, though if absolutely needed I really don't mind if that is changed either, my only problem is when there is say a link in a FAQ and the links are black and without underline =^.

login or register to post comments

Blue and Purple is so 1996

Submitted by agianni on March 21, 2002 - 17:49.

First, let me say that I usually leave my links the default blue and purple and underlined for inline links (links in blocks of content) unless I'm using a dark background for content text (which I don't). I also aovid inline links in anything but introductory pages (front page or primary section pages)

Other than that, I usually use context -- generally navigation placement and design -- to show that they are links. Four years ago I think coloring and underlining would have been more important, but there are now standard paradigms for where navigation goes, and if people see text in a certainly place on the page (along the top, down the side, in an inset box) they'll know they can click on those things. I also like to use :hover pseudo-classes to help indicate what's a linke (sorry if you're using NN 4.0). Heck, if you're using images for navigation the whole argument goes out the window anyway (although I imagine Neilson wouldn't like image based navigation anyway and neither do I)

In terms of giving a different color to visited link, if people can't figure out where they've been and where they're going on your site then you've got bigger problems. IMHO, sitemaps are kinda in the same camp as blue underlined links. They are both definitely a good idea, but they can become a crutch and you shouldn't rely on them to make your site usable.

Andrew

login or register to post comments

It depends...

Submitted by paola on March 21, 2002 - 19:09.

I think that link style comes down to whether your text links are 1) immediately recognisable and 2) appropriately prominent.

Recognition: I remember the first time I came across a page that used CSS to make links not underlined, big, bold and coloured (I think it was WaSP) and it flumoxed me. There was no way of telling, without mousing over the text, that they were links and not just fancy bold text. Whatever you decide about colour and underlines, there's always the issue of links being confused with emphasised text.

Prominence: When comparing headings, bold text and blue underlined links, the blue underlined links will always be the most prominent and the first thing people will look at. For the main text of a page in a hypertext environment, I think that this is a Good Thing: the link text effectively summarises the page.

However, sometimes you don't want a series of links to be more prominent than what's nearby and so a change in style may be called for.

On the sites I'm working on now, I'm using the traditional link colours in the main body text but I use different link styles on other parts of the page. On one of the sites, sub-section links are listed vertically on the same background as the rest of the page - I keep them blue/purple but turn the underline off. On the other, the design called for a dark background colour for the vertical nav panel and so links are not underlined, white (new) or off-white (visited). Nav links are commonplace and so are easily recognisable that link style can be changed in such circumstances.

For my context links (aka breadcrumbs) at the top of the page, I don't want them to be the most prominent thing in the first screenful. They're easily recognised as breadcrumbs by the way the text is laid out and so I don't think I have to draw special attention to them. So, I put them in a paler version of the section colour.

For my journal (blog, I guess), entries are followed by a list of clickable keywords. If they were all linked, they'd overwhelm the entry, so I've unlinked the keywords and made them the same colour as my context links.

In design briefs, I only say that colours must be provided for new, visited and active links; that the "new" link colour must be brighter (more saturated) and lighter than the "visited" link colour, which should be in a similar hue. I also say that neither colour can be used elsewhere in the site for text (e.g., as a section colour, when headings or bold text may be in that colour). To be "web-safe", I guess one should also add that link colours can be any RGB colour as long as they shift to safe colours that still meet the bright/light brief.

login or register to post comments

Users be damned

Submitted by mcombs on March 22, 2002 - 10:51.

I've always felt that users should be able to memorize long lists of links, like results of a search for digital cameras, so that as they navigate from one camera to another they'll know which ones haven't been visited next. If they can't memorize that, then they can break out a pencil and paper. Why should I have to change the attractive look of my site by coming up with another set of colors for visited links?

Just kidding, of course. I find link color changes to be a giant help and I'm often frustrated when this rule isn't followed.

As far as blue/purple goes, a blue link in the text is instantly recognizable as a link. Other colors just aren't as easily found. If your body/content background is white and text black, using these colors is a huge favor to the reader. Remember, most of the time I want to scan your page and spend only seconds there. My goal is to get to the RIGHT page, not spend time on each page of your site. Rapid navigation is essential.

Menus, on the other hand, are pretty obvious to most users. As long as it's clear what's clickable, it can be alternate colors, buttons or other indicators as far as I'm concerned. In this case, the context provides the clue to the user.

login or register to post comments

Of course links should be blue

Submitted by theuiguy on March 22, 2002 - 12:33.

Consistent link color would go a long way toward improving the usability of the web. Blue is immediately reconginzed as the link color. Using blue text for something other than links is going to lead to user confusion. And using a different color for links also causes confusion, although I agree that context and placement can somewhat minimize this problem (evolt's top right nav bar seems pretty clear in white links.) I'm one of those users that has had link underlining turned off for going on 6 years now. Links without underlining are much less jarring to read in body text and just generally make reading text on screen more appealing. Unfortunately some designers think that the distinguishing characteristic of a link is the underline. Ick. Black body text with black links. Why would I want underlines when I have a nice color display? Perhaps I'm just a typography snob.

The usability of evolt.org and many others would immediately improve if links were colored blue and used users' underline preferences. (The same goes for font size preferences.) I don't see why people would even want to argue this. I find it very telling that some of the most usable sites on the web (yahoo, google, amazon, to name a few) use blue links. Users don't need to guess which text is linked. Many other popular sites (cnn, espn, aol) also use blue links.

Having a visited link color is very important as well, particularly for ecommerce sites where users need to compare products and need to know what items they've already viewed. In web-based applications, I can see some instances where eliminating the visited color is reasonable, but this must be used carefully.

login or register to post comments

It's called affordance

Submitted by lkantrov on May 5, 2002 - 23:50.

A user's ability to understand what's a link is based on the concept of affordance (how much things explain what they are). This is clearly an area where some basic research should be done to understand this better. (Any HCI grad students reading this???) I believe blue links are better than red links -- I've noticed a difference in usability tests when blue/purple combinations are used people seem to think less about where to click -- especially when just learning a site. Color is only one factor: underlining, context against background, text size, link length, and link text all help a user understand what a link is, what it does, and where it goes.

Graphic links can also be problematic -- if they don't look like a button, users might not know they are clickable. How many times have you moused over a map, unsure if it was a clickable map?

You can't go wrong following standards (from a usability standpoint) -- if you put blue links on a red background, then you have a problem, but you're breaking a different guideline. :) If you usability test your site, then you know if the link colors/style works well enough for your users. If you don't test, then you're just gambling!

Lyle
Croc O' Lyle

login or register to post comments

It's called affordance

Submitted by lkantrov on May 5, 2002 - 23:51.

A user's ability to understand what's a link is based on the concept of affordance (how much things explain what they are). This is clearly an area where some basic research should be done to understand this better. (Any HCI grad students reading this???) I believe blue links are better than red links -- I've noticed a difference in usability tests when blue/purple combinations are used people seem to think less about where to click -- especially when just learning a site. Color is only one factor: underlining, context against background, text size, link length, and link text all help a user understand what a link is, what it does, and where it goes.

Graphic links can also be problematic -- if they don't look like a button, users might not know they are clickable. How many times have you moused over a map, unsure if it was a clickable map?

You can't go wrong following standards (from a usability standpoint) -- if you put blue links on a red background, then you have a problem, but you're breaking a different guideline. :) If you usability test your site, then you know if the link colors/style works well enough for your users. If you don't test, then you're just gambling!

Lyle
Croc O' Lyle

login or register to post comments

Uh, guys... How about NO COLORS!?

Submitted by kichigai on August 14, 2002 - 22:23.

Okay, how about this...

You are targeting a blind person... Or perhaps someone running Lynx, or some other non-GUI browser? Or perhaps someone running an Aural (sp?) browser? You see my point?

I think color is the least important part of the nav, in *most* cases -- I know, here goes a flame war, right?

I say this because I agree on some levels w/ Nielsen, some w/ Siegel (remember, he said use RED) and some w/ all the other posters here...

By the same token, though... You have the issue of simple non-visual or non-GUI visitors. What then?

Please forgive the apparent soapbox stance here -- I'm partly also asking for opins on this matter simply because I don't really use a Braille interface, nor Lynx, nor any other non-GUI browser ---- but someone out there does, right?

Thanks for the article and the posts, however -- they reminded me why I do what I do... That and apparently I need a new appointment w/ my therapist... Just kidding -- she won't see me anymore.

Cheers!

-_- D.

login or register to post comments

standardization, not nit-picking

Submitted by blane on August 24, 2002 - 10:59.

I believe that Nielsen et. Al. have done a fine service of laying out the perimeter of standards for usability. Now it’s time for the practitioners to support or break the rules that have been set.

My studies have led me to believe that the blue/purple standard to not be significant. Rarely do I have a user say “Where’s the link? Why isn’t it blue?”. Now I have had users become confused when a visited link is a brighter, more saturated color than the initial link color. So it seems that exact color is less significant than saturation. Less saturation triggers a better “been there” response.

And I've often had users wonder where links were when no links were initially apparent. I agree with other here that underlying if key. It is the one factor that users look for to tell them a word is a “link”.

A agree that the web is evolving. But just like other media and products we need to build on solid foundations of what works in order to gain user adoption and loyalty ten simply chucking it all and starting anew because there’s a flashy idea to try out. Both a Pinto and a Porsche have brakes and filming technics haven't changed for decades.

I’m also against the rigid “Tayoristic” approach many people take toward usability. Usability is a social science, not a physical one. It’s as much art as it is science and we need to understand and factor in the dynamic characteristics of our subjects in order to stay relevant and correct.

/b.

login or register to post comments

Site Attitude

Submitted by trfc791 on October 4, 2002 - 22:39.

I believe that as long as the user knows which are links and which are not, then it is enough. Some sites I've visited have the visited link colour, the link colour, the active link colour, the hover link colour and the text colour all the same. Now this is asking for trouble. However, on my site, for example, text is white, links are 00FFFF, hover makes the text white with a 0000A0 background and visited links are weird green. All the colours contrast adequately with one another and are by no means popular or common choices for websites, but my visitors are OK with it since they understand it.

login or register to post comments

Why visited link colour MUST be different

Submitted by drstuey on April 30, 2003 - 15:46.

Some people in the discussion questioned the value of having the visited link colour different. There were a number of points made in favour of making the visited link colour different and here is another one.

Many webpages have multiple links to the same page using different link text for each one. The idea is that if one link phrase doesn't catch the users attention then another one might.

If the user visits the page, then returns to the homepage they may (and I have seen users do this) click the other link expecting more or different information, only to be confused or disapointed when they discover the same page.

Making the the visited link colour different helps users to avoid this scenario.

cheers

login or register to post comments

Another pendantic comment

Submitted by drstuey on April 30, 2003 - 16:08.

The article mentions that few websites 'still use the "standard" blue color' with my emphasis on "STILL". One of the comments also implies that websites used to use blue and purple and are moving away from these standard colours.

I haven't done any research on this but I would disagree with this assessment. My assessment would be that:
  • as soon as web browsers allowed designers to change the link colours they began to chose their own colours. I would expect that most websites in the mid to late 90's would have stopped using blue and purple then.

  • In the last few years, due to the rise of the usability professional, many websites have RETURNED to blue and purple links because their webmasters believe that blue and purple links make navigation quicker and thoughtless, and hence make more money (whether by generating more sales or increasing employee productivity).
My favourite example of the rise of the usability professional is the New Zealand Elections website. From 1999 to 2002 it had an stunning graphic design illustration with multiple javascript rollovers (which took a while to load because it involved about 30 images) and had orange, brown and white links on a red background. Since 2002 it has gone to a very simple plain text on white background with standard blue and purple links. The graphic design is now appalling, but it's more usable... www.elections.org.nz

cheers

login or register to post comments

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.orgEvolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.