This article first appeared on January 10th, 2011.

 

I’ve been spending a lot of time worrying about the colour scheme for my website. Ages, in fact.

 

What colours work well online (I’m an online gadgets retailer)? Do the colours even matter?

 

How do colours affect human behaviour? There has been a lot of research done on colours and how they affect humans but here is my crash course and the basic principles I use:

• Green: Means go: On traffic lights, "green means go!" I love green "call to action" buttons. It can also stand for success or money. It can also bring out jealously and greed. I quite like it for anything to do with the environment.

• Red: Means stop or danger. Think about red traffic lights, the little red man at crossings or red stamps saying "denied". In nature, red also means danger, like those super poisonous frogs. Strangely, the "Go" symbol on a Monopoly board is red, yet the ‘Go to Jail’ is a blue police man.

• Orange: Grabs your attention. Like red, it raises your heart rate and makes you slightly hungry. That's why Oporto is Orange and McDonalds and KFC are red. I like to use orange to direct the user’s eye to something.

• Blue: Safe, calm and secure. That is why banks use it. My theory is that it has something to do with the sky and the ocean being blue and how these are beautiful things that are usually tranquil and calm you associate those feelings with things that are blue. We made all of our comparison sites blue.

• Yellow: This is the smart colour. It says intellect. It’s from the sun and the gods. I use this to highlight things and again draw users’ attention to things I want them to look at.

Consider some of those colours with your design.

 

What's important in selecting colours with a website?  

 

I personally think that the colour of a website isn’t that important. If you just match up the basic emotion you want to communicate with a colour, just go with it.

In the gadget space a blue or green would be fine. I think the most important thing is more that your site makes sales and colour with a shopping site doesn’t make a big difference.

 

What does make a difference?

• A simple and fast checkout process.

• Big green "Buy Now" and "Start Your Checkout" buttons. Make these buttons three times the size of anything else. Checkout this button on our home loan enquiry site.

• Pictures and unique descriptions of the products. A product and a good review is going to increase conversion. It’s hard buying something online without touching it, it’s four times harder buying something when you don't have a picture!

Make your products the hero without all the clutter

 

I think it’s crucial to ensure you make the products stand out and the website sit in the background. Some sites do the opposite.

They make a very loud site and the product sits inside in quietly in the corner. I prefer making the product huge and beautiful and own each page.

 

The products themselves are the whole reason why the user is on your site. Give them a huge dose of product and they are more likely to buy from you.

 

So when it comes to colours, make them less saturated so that the product images stand out more than the sidebar and top navigation colours.

 

More product images leads to higher conversion

 

Put in more images rather than less. This ties into the point I made before but again, the key here is that the colours of your site make your product images stand out more.

The higher converting eCommerce sites have images of the products at all sorts of angles. Check out tigerdirect.com – they take a photo of the product upside down, a photo of the ports, what’s in the box and anything else you might want to look at.

 

Compare these two displays, which one would you feel more comfortable buying from?

• One photo or

• 33 photos. They even opened up the casing and showed you the memory and hard disk. I love the little manuals and the power cables shot.

Blue text links make it easier

 

On the internet, when someone sees a line of text with a blue underline, they know it’s a link.

 

It’s how people understand and use the internet. Don't fight it and teach users new ways of navigating the internet.

 

They had enough trouble getting online and finding your website in the first place. Make it easy for your users by just making the links blue.

 

White background with black text

 

This is the easiest way to read a webpage. Reverse font sites are annoying and kill legibility.

 

I use grey text when I don't want someone to read something and just click the "apply" button.

 

The following are some sites that you might want to review. They are doing well in the Australian market and have already tested some colours:

• http://rushfaster.com.au/

• http://www.ozgadgets.com.au/

• http://www.ozhut.com.au/