The best CHECKOUT button
So, you are planning to design a nice checkout button.
Up to recently I thought that a web button is so simple to design that it will take minutes or so. However, after researching a lot on the look and feel of the checkout buttons of 111 most important e-tailers, I realized that what seemed to be simple, was actually not.
I have been able to identify eight design elements just for something as “simple” as a checkout button. There may be other elements I missed; please feel free to comment and add your thoughts.
Based on our previous research, we want share with everyone what we think is the best design of a checkout button. Keep in mind that the color (5) of the button bellow is just for illustration purposes only. In reality, you may want to have a different color, suiting your brand and web site color scheme.
For those of you who want to use the design itself, we have made available, at the end of this post, a .PSD file you can download.
Here is the button.
Elements of a CHECKOUT Button
I will provide a little bit more explanation of the above image. First of all, a button should look like a button: rounded corners (8) with a shadow effect (7) to simulate extrusion from the web page layer and a little bit of volumetric lights (1) to create a nice 3D effect. Do not call the button other than “CHECKOUT” (6) and provide a strong call to action verb (2) – PROCEED – seems to be used by most of the e-tailers. The small “go ahead” arrow (4) provides sense of action to customers. Telling users that the next pages are secured will increase trust and click thru rate on your button (3)
Referring to the button color (5), I cannot recommend a specific one. When choosing the color and the size of the button, keep in mind the color scheme of the shopping cart page (which is the page where you should put the checkout button). The button should come in contrast with the rest of the page, it should be above the fold and it should be bigger that your “Continue Shopping” button.
Various advanced tactics can be integrated along with the display of a checkout button, depending on your business objectives: increase/decrease size, change color, position, and others. This may be the subject for another post, so keep tuned.
If you want to download our free collection on checkout buttons, click on the following link: free-checkout-buttons.zip . These are the buttons inside the .zip file:
- Free Checkout Buttons
Pitstop Media is a premier Internet marketing company that provides services to companies of all sizes, from startups to corporations. Please contact us if you need assistance with any of your landing page projects.
Mark said:
Jan 08, 09 at 3:02 pmAwesome buttons! You’ll see a version of it in a revision of our web site, which should go live next week.
Thanks!
traiann said:
Jan 08, 09 at 6:36 pmThanks Mark. Let me know how they perform
Matt Gardner said:
Jan 12, 09 at 5:03 pmLove your work – thanks for the informative background to what makes a great button. Have dropped paypal’s api (was using it via CoffeeCups Shopping Cart – but it resulted in 100% lost sales because no-one likes Paypal (except me apparently…)) and replaced it with our own credit card payments gateway.
Thanks so much.
traiann said:
Jan 16, 09 at 4:27 pmHey Matt,
I see you are using the buttons on the website. Thanks for trusting our work. How do they perform against other buttons? Are you A/B testing?
In regards with the payment options, I would advise to offer your visitors more options: PayPal, your own CC processor, Google Checkout.
Hvilken farge skal Call to action-knappene ha? - Kuttisme.no - En blogg om internettmarkedsføring, webutvikling og webanalyse said:
Jan 20, 09 at 6:25 am[...] Tusenfryd bryter regelen om at en knapp bør se ut som en knapp, men det er en annen [...]
K. Praslowicz said:
Feb 10, 09 at 10:31 amI was trying to design my own checkout button for my site when I came across these. I tossed my best efforts aside and just ran with the ones you’ve provided for us. It looks great when I miniaturized it for an add to cart button, as well as the primary checkout button.
Here is a quick link to a page that uses it if you don’t want to have to drill down to find it.
TraiaN said:
Feb 10, 09 at 1:07 pmPraslowicz,
Congrats for your clean website. It looks great!
jackie said:
May 08, 09 at 7:01 amgreat info – will definitely be having a go at creating some nice new buttons!!
chapolito said:
Jul 23, 09 at 2:27 pminteresting read – I would guess though that some A/B testing results might not necessarily be the same as most commonly used practices.
Thanks for sharing!
webshaper said:
Jul 28, 09 at 6:59 amnice one. yes, the “call to action” and the “enforcing trust” part are critical. yet a button can only do so much. I recommend do this together – Top 10 ways to build trust for your online store at http://www.webshaper.com.my/learn/top-10-ways-build-trust-online.php
Mortin said:
Sep 29, 09 at 3:23 amThx, i will try it with a A/B Test next week. At the moment i got the problem that i work on an old PC with the Fireworks MX Software, totally annoying. I gave you a Feedback in a month how it works
John Rowell said:
Oct 15, 09 at 5:07 pmGood insights and cool buttons! Gonna use one on my website :)
Buttons Should Look Like Buttons | You Should Test That! said:
Nov 08, 09 at 7:27 pm[...] Therefore make your action buttons stand out (not necessarily big, red) and make them look like a button. Here’s a good explanation of what makes a good button. [...]
steve said:
Nov 27, 09 at 10:55 amNice work, and truly appreciated!
Marco said:
Jan 04, 10 at 10:53 pmNice buttons, I also found http://seoagent.org/call-to-action-buttons/
Cheers,
Marco