What difference does colour make?Posted September 16th, 2009 by David Hamill
Many 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.
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 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.
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 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.
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.
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.
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.
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.
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: