Could This Be The Best Checkout Button?
So, you are planning to design a nice checkout button.
Up till 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 share your thoughts.
Based on our previous research, we want to share with everyone what we think is the best design for 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’s color scheme.
For those of you who want to use our designs of checkout button, 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 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 (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 than 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 of 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 Vancouver based conversion rate optimization company which offers results oriented landing page testing and conversion rate optimization services. Our A/B and multivariate tests have helped of companies increase conversion rates by as much as 75%. Let us increase your conversion rates, too!
Related posts:
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
Russian said:
Apr 11, 10 at 4:00 amWell… I agree with you about red color and I think that “aqua style” is one of the best choice for create actions buttons.
Regards
LinkDirectory said:
Jun 29, 10 at 7:16 pmI am pretty sure that, this button has strong conversion possibility.
pattaya said:
Jul 09, 10 at 12:26 pmGood insights and cool buttons! Gonna use one on my website :)
PetSupplies said:
Jul 19, 10 at 9:14 pmThanks, these buttons are great. We went with the Red one since it really stands out. Finally something to overpower the massive Google Checkout and PayPal buttons! Hopefully we see an improvement in our shopping cart abandonment rate.
Alan Jordan said:
Aug 05, 10 at 6:46 amI agree with your descriptions. These are excellent buttons, and I plan to use them in several of my sites. I found your site when searching for a “proceed to checkout” button, and as a result of this offering, I plan to visit many more times.
Buttons Should Look Like Buttons said:
Aug 16, 10 at 5:29 pm[...] Make your action buttons should stand out (not necessarily big, red call to actions) and make them look like buttons. Here’s a good explanation of what makes a good button. [...]