colored-pencils

How to improve conversion using colour

When working on large corporate e-commerce sites, testing colours was always an interesting exercise. In one test, we showed visitors different colours for an ‘Add to cart’ button. Green performed best, which we liked because green means go, right? But in later tests, orange/red buttons performed much better – those make you stop and take notice and, depending on the overall colour scheme, can be easy to find on the page. The truth is the debate has raged on for years about what colours are more likely to get someone to click and still no clear winner.

What is clear is the importance of design, layout, contrast and your audience. Any call-to-action should stand out and be easy to find within the page. The location should flow with the other content on the page. You wouldn’t put a ‘Buy’ button at the top of the page before your customer can even see the price of the product.

Examples

In this example, the 'Add to cart' location makes sense - you can see pictures of the product, the price and define a quantity. However, the button fades into the background. I missed the button entirely when I first got to the page. The 'After' image shows what simply giving the button some colour can do. In this case, I used green because it seemed to fit the site, but honestly, anything is better than the original.
Before

BEFORE

After

AFTER

Whereas in the following example, layout plays a bigger role than colour in the visibility of the 'Add to cart' button. I completely missed the one in the before picture entirely. I scrolled up and down the page twice before noticing it. In general, a stamp effect usually carries additional information about a product, such as 'Organic' or 'Certified'. The button has become very standard across the Web for a call-to-action. It's what your visitors are looking for and you want to make it easy for them to do business with you.
Before

BEFORE

After

AFTER

When selecting colours, consider how the colours you choose will be perceived by your visitors and the reactions they will generate. If you're trying to sell motorcycles to an audience that wants to feel and look tough, you might want to reconsider the baby blue background. (sidenote: ALWAYS rethink the baby blue background). Most importantly, remember, 8% of men worldwide are colour blind and many people struggle with low contrast vision. You can use CheckMyColors.com to check that you have significant contrast so that those with vision problems can still see your content.

Top tips for using colour to maximize conversion

  1. Choose colours that will reinforce your brand. Consider how colours are viewed by the colour-blind.
  2. Ensure there is sufficient contrast between your background and your call-to-action.
  3. Make sure call-to-action is placed in a relevant place on the page.
  4. Use buttons for your call-to-action.

Most important - TEST! Don't over stress about the decision. Try colours out with your audience and see how they respond. We can help select and test colours for your audience. Get in touch to find out how.

How Colors Affect Conversions
Source: How Colors Affect Conversions – Infographic