Note: if you plan to design a checkout button, please read this post on “The Best Checkout Button“.

The checkout process plays an essential role in the user experience on all e-commerce websites. And, the shopping process starts with a click on the Checkout button. While buying decisions can be influenced by matters other than your website, once visitors decide to purchase products from your site, it is your job to help (persuade) them to complete the buying process.

Assuming your visitor has already added products to their shopping cart, how well do you manage to persuade them to finish the checkout process? How usable are your checkout button and checkout pages? Does the button stand out from the rest of the page? Do visitors find it easy and compelling to click on it? Are there any general rules to follow when designing a checkout button?

I tried to answer such questions, and I ended up analyzing 111 checkout button designs, from 111 top retailers. The findings and other interesting stats are listed at the end of this article.

NOTICE: there are two retailers I couldn’t find a proper checkout button: The Sharper Image (the site was under construction), and Gateway, which doesn’t sell directly on the website.

Main conclusion:
Even if the 110 retailers display 110 different checkout button images, there are still some common practices you can follow when designing a checkout button. Let’s take a look at some stats:

Button color (background):
blue – 21 (19%)
brown – 5 (4.5%)
gray – 11 (10%)
green – 17 (15%)
orange – 12 (11%)
pink – 2 (2%)
purple – 4(4%)
red – 24 (22%)
white – 6 (5%)
yellow – 8 (7%)

Button color (text):
black – 10 (10%)
blue – 9 (8%)
brown – 1 (less than 1%)
green – 1 (less than 1%)
orange – 1(less than 1%)
pink – 1 (less than 1%)
purple – 1(less than 1%)
red – 2 (less than 1%)
white – 84 (77%)
yellow – 1 (less than 1%)

How is “checkout” spelled?
check out – 8 (7%)
checkout – 101 (93%)

Is “checkout/check out” always used as button’s text?
yes – 108 (99%)
no – 2 (1%) – 1800contacts uses CONTINUE ORDER and proflowers.com uses Order Now

Is “checkout” UPPER case, lower case or Sentence Case?
CHECKOUT – 44 (40%)
checkout – 11 (10%)
Checkout – 44 (40%)
others – 9 (10%)

Which call to action verbs are used on buttons along with “Checkout”? (which can also be considered a call to action, but not so strong)?
Continue – 12 (11%)
Proceed – 30 (27%)
Now – 9 (9%)
Go To – 2 (1%)
Use – 1 (less than 1%)
Begin – 7 (6%)
none – 50 (45%)

Does the button contains anti-anxiety elements, such as the term “secure”?
secure – 14 (12%)
no – 96 (88%)

Is there an arrow associated with the checkout button?
yes, on the left side of the button – 45 (40%)
yes, on the right side of the button – 17 (15%)
no – 48 (43%)

Thoughts? Reach out to me on Twitter or LinkedIn.