Although there are many factors to consider when persuading visitors to your website to convert, as far as visual cues go, they don’t get much bigger than the use of colour. Because of this, colour psychology plays a starring role in the world of marketing. In this post, I want to specifically talk about a website’s colour scheme, including buttons, graphics and themes.
First, a little science
Colour psychology is the study of the effect colour has on human behaviour. Put (very) simply, when our eyes register a colour, electrical impulses are passed through the brain to the hypothalamus and the pituitary gland. These are responsible for the release of hormones which govern our emotions and behaviour. Different colours will dispense a different hormone cocktail and will determine how we feel when we see certain colours.
Passion, Desire, Excitement, Energetic & Attention-Grabbing
If we’re talking passion and excitement, it’s unsurprising to see it used to highlight important calls to action. It would be kinda crazy if Café Rouge didn’t use the colour on their site, but their choice to go full on red background takes this idea further:
Another red brand, Coca Cola use their signature red to accent the homepage and emphasise calls to action:
Peaceful, Calm, Honest, Loyal & Devoted
With connotations such as those above, it’s no wonder we often see this colour used:
Wow – why wouldn’t you make your website yellow?
So, should I go tell my boss now?
Ok. Realistically, I didn’t write this post to instigate a company rebrand or a change to the company’s style guide! So instead, consider these pointers for introducing colours to your site to highlight calls to action and to draw visitors’ attention to the important parts of your website. Guide them through the user journey with colour-coded sign posts.
Hallock’s study on colour preferences revealed that 35% of women said their favourite colour was blue, 23% said purple and 14% said green.
Rather an obvious example, but the Woman’s Weekly website uses blue, purple and accents of green on their homepage:
The calls to action on this page (such as “VISIT” and “Sign up”) use a darker shade of the pink/purple used in the logo. Using analog colours (colours next to one another on the colour wheel) is a great way of drawing a visitor’s eye to an important element on a page without introducing a brand new colour and potentially making a page feel a bit busy.
This same study revealed that 57% of men also favoured blue followed by 14% saying green and 9% saying black.
The men’s fashion site Style Pilot boasts a blue/green homepage with accents of black:
However in this example, a complimentary colour (these are colours directly opposite one another on the colour wheel) has been used for the “START HERE” button – and it really stands out.
Von Restorff’s Isolation Effect concludes items are more memorable if they stand out. This is why we often find saturated colours are used for links, buttons and any other important elements on a page. They will leap out at a visitor and therefore encourage engagement:
VistaPrint’s Blue Button
Perhaps the colour most over-looked in web design; white is such a useful colour when it comes to layout. Using whitespace can improve legibility, it can group relevant information and it can help direct attention to that all important call to action. The best example I can offer?
There is an enormous amount of literature out there on the meanings of colour and the “right” way to use it. The thing is, you’re never really going to know which ones will work best on your buttons and links unless you test them. And I’m not talking about going with a hunch about what you think will convert better. Channel your inner Eisenberg and instead ask yourself the question: “Why would a visitor click on one button versus the other?” and consider complimentary and contrasting colours according to your website’s style and branding.
If you’ve done any testing on your site’s buttons, share your findings in the comments. We love a success story at High Position!