What difference does colour make?
Posted September 16th, 2009 by David HamillMany organisations limit the success of their websites, purely because their branding guidelines do not provide enough colours for designers to utilise. In this post I’ll show you how a limited colour palette can affect the success of a website.
Good calls-to-action
I recently wrote an article for UX Booth about Good call-to-action buttons. In it I explain that call-to-action buttons are clicked more often when they are made more prominent. Multivariate and split A/B tests have shown this to be the case.
It makes sense too. If you make one button on your page very prominent, you make it easier to notice. When it’s easier to notice, there’s less friction in that user journey. So if that button leads to the next step in your key user journey, then your website should enjoy greater success.
Restrictive colour palettes
Many brands that do business on the web have colour palettes that are restricted to just 1 or 2 colours. Their branding guidelines state that no other colours can be used.
In this article, I’m going to discuss just one example of such a company – the AA. However there is a long list of companies who have similarly restrictive branding guidelines.
I believe that the AA could achieve a better conversion rate if only it expanded its colour palette to allow the very occasional use of a contrasting colour. I carried out a little experiment to test my theory.
The AA prominence test
I ran a test (using the Five Second Test) to check the visual prominence of the ‘Get a car insurance quote’ button. I tested 3 very similar versions of the AA homepage.
Version 1
Version 1 was the current AA homepage without any tweaks. The ‘quote’ buttons on this page don’t stand out enough. They have been made yellow because no other colour appears to be available for the designer. The buttons blend into the overall design.
Version 1
Version 2
I was worried that the design of the quote buttons wasn’t as clear as it could be. So in Version 2 I made the buttons smaller. I felt they looked more like buttons and less like a border this way. As it happened it didn’t make a difference to the test, but I wanted to be sure.
Version 2
Version 3
Version 3 was similar to Version 2. However unlike the people at the AA, I wasn’t constrained by their branding guidelines. So I changed the colour of one of the buttons and made it a shocking blue colour.
I chose this button because ‘Car insurance’ is in the top-left section and is therefore probably the most important product for the website.
Version 3
How the test works
180 participants were shown 1 of the 3 designs for just 5 seconds. This meant that each version was shown to 60 people.
During the 5 second period, the participants clicked on the page to point out the areas of the design that caught their eye. This test allowed me to find out which areas were visually the most prominent.
The results
Participants in the test clicked on various parts of the page, but the bit I was interested in was the ‘get a quote’ button for car insurance. How much of a difference would a change of colour make? Well, the results were pretty interesting.
15% of participants who saw Version 1 pointed out the quote button for car insurance. As you can see on the image below, the picture of the car was pointed out more often than the button. The red circles on the images below indicate one click from a participant.
Version 1
13% of participants who saw Version 2 pointed out the button. A very similar result to version 1. So I needn’t have worried about the shape of the button as far as the test was concerned.
Version 2
On Version 3, 35% of participants pointed out the button. This is a lot more than Version 1 or 2. In fact, more people pointed out the button in Version 3 than in Version 1 and 2 put together.
Version 3
So what does this all mean?
This test only tells us about visual prominence. It doesn’t mean that the blue button will get twice as many click-throughs as the yellow one. Instead it means that the designers at the AA could make this important button more prominent, if only they had more colours to choose from. And prominence has been shown to have a direct effect on click-through rates.
Restricting your colour palette isn’t just about conversions though. Colour is very useful for creating differentiation in a design. This can be used for creating things like:
- Headings with a clear sense of hierarchy (Heading 1,2,3 etc)
- Hyperlinks that actually look clickable
- Hyperlinked headings that look different from both normal hyperlinks and normal headings
- Bold text that isn’t mistaken for a hyperlink
- Creating clear differentiation between 2 or more page elements
Avoiding issues with these sorts of things helps to improve the overall usability of your website.
I intend to write a follow up post about the Five Second Test that discusses the benefits and limitations of this service.
What d’you think?
What’s your opinion of all this? Whether you agree or disagree, why not share your thoughts by leaving a comment.
If you liked this article, you might also enjoy:
Tags: e-commerce, navigation
29 Responses to “What difference does colour make?”
September 16th, 2009 at 9:38 pm
Great post, I’ll take a few leanings from here.
Have also subscribed to your RSS feed.
September 16th, 2009 at 10:38 pm
[...] Here is the original post: Good Usability » What difference does colour make? [...]
September 17th, 2009 at 1:26 am
[...] Here is the original: Good Usability » What difference does colour make? [...]
September 17th, 2009 at 9:11 am
Hi David,
I have read a few of your blog posts recently and must say this is another good example of how good usability can improve conversion.
Now if only high level COO/CEO level positions understood its value.
September 17th, 2009 at 9:15 am
But the blue button looks bad and is not in keeping with the brand.
When building a company websites there is always a tension between branding and usability. A question that needs asking is how much would the odd, out of context blue button damage the brand? (And if the rest of the promotion material is built with similarly lax branding standard) That’s a hard question to ask and needs to take into account a much longer timescale.
September 17th, 2009 at 9:36 am
Hi Ed, yes the button I’ve used is a bit of a shocking colour. What value would you put on the effect this has on the company? It’s hard to argue that this inconsistency in brand colours has an actual value. But the value of extra sales from being able to make this button blue is quantifiable. A split A/B test would give you this figure.
But I’m digressing, my point isn’t that I think the AA should slap a shocking blue into their colour palette. It’s more that the current colour palette chosen is unnecessarily restrictive. There is only one colour to choose from making contrast difficult to achieve.
September 17th, 2009 at 9:38 am
great read! i completely agree with you. It is very nice when people like you take time to do studies like this. Sometimes we all think things, but when you do an experiment like this you get backed up results. look forward to reading more from you
September 17th, 2009 at 9:39 am
Thanks Kaitlyn. That’s an er.. interesting site you have there :0)
September 17th, 2009 at 9:41 am
These results aren’t just dramatic, they’re statically significant too. If we compare the current design with the blue button design, we can express the results in a contingency table:
Button Noticed Didn’t notice Total
Yellow 9 51 60
Blue 21 39 60
Total 30 90 120
Fisher’s exact test gives a one-tailed probability of 0.0097. In other words, you’d expect this result by chance about 1 in 100 times.
Nice work.
September 17th, 2009 at 10:42 am
Love your blog. But err… isnt this contradictory? “This test only tells us about visual prominence. It doesn’t mean that the blue button will get twice as many click-throughs as the yellow one. >>>>….And prominence has been shown to have a direct effect on click-through rates.” The whole point is to make the action button prominent to increase CTR.
September 17th, 2009 at 11:22 am
I don’t think it’s contradictory. What I’m saying is:
More prominent = More click-throughs
What I’m not saying is:
Twice as prominent = Twice as many click-throughs
September 17th, 2009 at 11:37 am
Just wanted to add a response against the point made by Ed.
Agree with Ed that you can’t go about just adding a random new colour here and there. You would need “as a business” to come up with a pallette that both improves conversion and is consistent.
For example, uk.farnell.com has a consistent approach to action buttons around login, registration, buy etc. They are all a bold blue. This is more prominent to increase conversion, but it is still maintained as a branding piece as well.
September 17th, 2009 at 11:59 am
Interesting post. The blue button does look bogging, but it raises the vital point; what is the purpose of the site? Is it meant to be art? Attractive design? Or to shift motor policies?
It’s easy to lose sight of why we do things. Sometimes purity, or even strict professionalism (as in rigid professional standards) are abstract irrelevances.
Good design is often the same as attractive design, but they’re not necessarily the same. What matters is the right design, and that’s dictated by the purpose of the site.
I’m interested in your statement that motor insurance is “probably the most important product for the website”. That sounds a bit of a guess. If that’s so then maybe the right response would be in the overall architecture of the site, rather than the design of an individual page. I’d also have been interested in the results if all four “get a quote” buttons had been shocking blue. Would they have clashed with each other and cancelled each other out? Or would they have just ensured that the clickable buttons were prominent as clickable buttons.
However, I guess that’s a bit irrelevant to your basic point, which is certainly valid. A consistent corporate colour scheme can be at the expense of clarity and usability. Defending such spurious consistency on the grounds of “The Brand” is surely taking things too far.
September 17th, 2009 at 12:49 pm
Hi James, yes it was a guess. I figured that the product they put in the top left is their most important one. I too was interested in what would have happened if all 4 were blue but I needed to avoid testing too many things at once.
September 17th, 2009 at 1:00 pm
Hi Ed, there are plenty of brands out there with a single distinctive colour in their branding who also utilise a secondary palette to achieve contrast when it is required. The brand guidelines are just a set of rules for visual consistency. As a designer I’m sure you could pick a few secondary colours that would appear fairly consistent with the AA brand but would still contrast nicely with yellow.
I’m fairly confident that if we asked some normal people (not designers) to rate the 3 designs for trust and professionalism that there would be a fairly insignificant difference. You see real people don’t care about the intricacies of visual design as much as you like to think. If we showed them all three at the same time, they might comment on the button. But people don’t live their lives with 2 alternatives to everything they look at.
September 17th, 2009 at 1:00 pm
I’m not arguing against having a varied colour palette, certainly the AA colour scheme is limited. (But on the other hand, that limitation is integral to their brand)
I’m just worried that the example seems a little too close to the stereotype of a client asking “Can you make it bigger and flashing?”. Of course that will make something more prominent but a what cost? As a web designer I feel I need to point out the bigger picture here – it would be interesting to get users to rate the three examples for things like trust and professionalism.
I’m only being critical because I think it’s an interesting study, and I’m looking forward to hearing thoughts on the five second test itself. I have something in mind I might use it for.
September 21st, 2009 at 3:00 pm
Nice post, David. Really liked the way you referred to “less friction”
My two cents:
Usability/User experience = branding.
Realistically, a coloured button will not damage the brand unless it goes unnoticed, and of course, unclicked.
Brand guidelines should be just that, guidelines.
If you’re living in a Brand Police state, then let data drive the decisions, not personal or political opinion.
I’d love to see you take this test to the market and test with real customers using something like Google Optimiser – you’ve mentioned Split or A/B testing.
We frequently hear from user test participants “that button should be big and red” – while your participants may not be designers, they’re clearly asking for the primary call to action to be VISUALLY PROMINENT.
September 21st, 2009 at 3:46 pm
Great post and you make a great point! You might suggest that, when creating a color palette, to include one or two colors for Call-To-Actions. While used sparingly, these colors are still technically in the palette.
Also another great tool for tests like this – http://www.feng-gui.com/ – An auto-heatmapping app. Pretty neat.
September 21st, 2009 at 4:11 pm
Hi Ted, it’s pretty neat but ultimately a distraction by the looks of things. I’ll have a closer look but I’m immediately sceptical of it.
September 29th, 2009 at 8:37 am
I think the page shown could be improved but obviously the experiment bears no resemblance to the way in which people use web pages, so i’m not sure whether the results were good or bad.
In your conclusion you have made a direct link between colour and prominence. I’d say there are many ways to increase prominence – changing the colour isn’t the only way, so the designer needs to consider other methods at their disposal; white space, size, typography, contrast etc.
Imagine if the whole page was greyed out, except the yellow buttons – your experiment would have the same results – perhaps better ?
September 29th, 2009 at 9:25 am
Hi GCheeseman, thanks for your comment. I’m not claiming that this is a usability test. The whole page isn’t greyed out though is it? The purpose was to show how useful colour can be. By changing one single part of the page, an important button is a lot more prominent.
September 29th, 2009 at 1:20 pm
David,
Nice subject for a test. I want to include a new perspective which hasn’t been pointed out so far. Isn’t there a cultural difference in regard to the colours used. In every culture a colour can mean something else. For example black as a corperate colour in the US is fairly accepted as for in the Netherlands (light)blue is more of a trusted business colour (example KLM).
By changing a button to just a colour you can loose your target audience! And then you will have a worse CTR.
So a button with a specific call to action should get the needed attention in the complete design. This design should focus on the call to action as a whole and not just a button. And don’t loose sight of your target audience. It’s a fine balance between good and wrong.
September 29th, 2009 at 1:35 pm
Hi Maarten, I hear a lot of discussion about the meaning of colour in different cultures. I’m finding it really difficult to accept however, that someone wouldn’t click a button because of its colour.
October 4th, 2009 at 8:19 pm
@jotaefeoliveira asked me on Twitter is about considering users with contrast & color blindness – A good question – The colour would mean nothing to them. http://bit.ly/4Td5Z #a11y @dav_hamill No Access = No Success
October 5th, 2009 at 8:09 am
Hi Stefan, yes of course you should consider people with colour blindness, but this doesn’t mean not trying to use colour effectively. It means not using colour alone.
October 5th, 2009 at 1:53 pm
I really love simple tests like this. I just shows that with a little extra user consideration, a websites conversions can be improved incredibly.
Thanks very much for sharing
October 5th, 2009 at 6:36 pm
just ran into this: Testing different button colour combinations to improve Click-Thru-Rate – http://bit.ly/2dcrPH via @DanJHarrison
October 5th, 2009 at 8:59 pm
Once again a very good example of usability tests, which prove that one can increase with little change the conversion.
October 6th, 2009 at 8:52 am
Thanks Paul. It wasn’t a usability test though. That’s something very different.
Comment on this article