111 Designs for Checkout Buttons
UPDATE: if you plan to design a checkout button, please read our post on “The Best Checkout Button“.
The checkout process plays an important role in the shopping experience of all e-commerce websites. And, the shopping process starts with a click on the Checkout button. While buying decision can be made outside your website influence, once visitors decide to buy products from your site, it is your job to help (persuade) them to complete the buying process.
Assuming your visitor already added products in their shopping cart, how well do you manage to persuade them finish the checkout process? How usable is your checkout button and checkout pages? Does the button stands out of 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?
We’ve tried to answer such questions and this is how we ended up analyzing 111 checkout button designs, from 111 top retailers. The buttons were taken from their shopping cart pages.
Conclusions and other interesting stats are to be found at the end of this article.
NOTICE: there are two retailers we couldn’t list a proper checkout button, one being The Sharper Image (site is still under construction) and the other one is Gateway, which doesn’t sells directly on their website.
If you need the button list as a single image you can download it from our checkout buttons image page (you may need to allow pop-ups from our website) .
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
|
 |
||||
 |
 |
 |
||||
 |
 |
 |
||||
 |
 |
|||||
Conclusion:
Even if 110 retailers display 110 different checkout button images, there are some common practices you can follow when designing a checkout button. Let’s take a look at some statistics (all % are rounded up):
Button colors (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 colors (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%)
Pitstop Media is a top company providing internet marketing services. We offer web design services to companies of all sizes, from startups to corporations. Please contact us if you need assistance with any of the online marketing services we provide.
