I have been working for a client recently helping to review their online checkout process. As part of the discussion, the client asked me “What colour should my Checkout button be?”
Of course the right answer is “Whatever works best for your audience” and the only way to know that is to test it – remembering that different audiences might respond to different designs and that seasonality may play a part as well.
As there was no definite “right answer” I could give our client, I thought I would trust to the wisdom of crowds and see what other people were doing. So I analysed the form of checkout buttons for the top 40 retail sites in the UK (as listed by digitalstrategyconsulting).
The first thing I looked at was colour. The results surprised me: Green came out way ahead of other colours, with Orange, Red and Blue being used by half as many retailers (Green 14, Orange 8, Red 7, Blue 6, Pink 2, Grey 2, Yellow 1). Personally, as an unreformed direct marketing practitioner, I like red although my user experience colleagues point out that this colour could have subconscious associations with mistakes, as error messages online are generally shown in red.
Next I looked at shape. No great surprises here. Half the buttons (20) were rectangles with rounded corners, and there were also a fair number (13) of what you might call “square rectangles”; ovals (where the end lines were curved for more than half their length) only accounted for 5 buttons. Two buttons were odd shapes – Amazon’s is a combination of oval and rectangle, while the right side of the CineWorld button is an arrow shape.
Most of the buttons (29) had some form of 3D or “button” effect, often quite subtle. Generally this effect is a simple shading, often with the bottom of the button slightly darker than the top, although in 16 instances the 3D effect is achieved or supplemented by a shadow “under” the button, a line inside the outer edge, or by a stronger line on the bottom and right sides of the button.
Size varied widely. The largest button (Travel Republic) was around sixteen times as large as the smallest (Travelodge).
The wording on the buttons varied unexpectedly. Only one retailer used the word “Trolley” and only one used the word “Checkout”. The most common wording was “Add to basket” which was used in ten cases together with one “Add to shopping basket. Many (but not all) clothes retailers used “Add to Bag” or “…myBag” (eight instances). Travel sites (seven of them) used “Book”, “Book now” or “Continue booking”. Only six sites used phrases with “Buy” in them and two used “Pay” or “Payment”. “Add for delivery (2), “Confirm tickets” and “Get started” (a nice call to action for a service I think) made up the rest.
Only nine sites used capital letters (sensible as capitals are harder to read than lower case); most (21) used lower case letters with the initial letter a capital, although 12 sites had an initial capital on a second or third word as well.
In 17 cases the wording was supplemented by an icon (an arrow, a trolley or a shopping basket) and these were fairly evenly distributed on the right or left of the wording.
What does this mean?
What can we conclude from all this? Probably nothing! As I said above, what works for one audience may not work for another. (And at least one site, Asda, seems to recognise this by having different buttons for different parts of the site, although I ignored that for the purpose of this analysis).
But, if you wanted to follow the most popular conventions, then your “Go to check out” button would be a green rectangle with rounded edges, darker at the bottom, containing the words “Add to basket”.
And one final point: whatever design you chose please do make sure you differentiate it clearly from any other buttons on the page.