November 20, 2017

Guiding Users With Colour

Having kicked off a new eCommerce brief in the studio this week, we stumbled across a number sites not using colour to their full advantage.

We like to guide users with colour, which can be achieved by simply using a certain colour for all call to actions relating to ‘making a purchase’. For example, by making sure that all ‘Add To Cart’ & ‘Checkout’ buttons are green, users will become familiar with green relating to ‘making a purchase’.

That’s common sense though.. right?


Too many eCommerce sites don’t make the purchasing process visually clear enough, with ‘Add To Cart’ buttons that blend in, and ‘Checkout’ buttons that don’t draw the eye.

Mr. Porter is an example of good layout, although black is heavily used on the page. Nike on the other hand, draws the eye to the right of the page with the contrasting black background & orange ‘Checkout’ button.

Left: Mr. Porter using neutral colour. Right: Nike using orange to guide the user.

Another problem is using colour too much, or in this example.. everywhere!

At the cart, the user should be presented with a clear path to the checkout. Although here, you’re bombarded with red buttons, red text & red headers, leaving the user having to search for the actual ‘Checkout’ button.

Not cool.


A solution for this, is to simply ‘tone down’ the other elements, making ‘Checkout’ the dominant option. We also suggest removing unnessesary elements, so that only the most important information is displayed.

It’s good practice to also present a ‘Checkout’ button at the top of the page, as it can be pushed off mobile screens when there are multiple items in the cart.

Next Post

National Express Launch BETA Phase

We'd love to build something amazing together!

Start a Project
Start a Project