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 for softness look and feel (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)
Pitstop Media offers ROI based internet marketing services such as landing page testing services and conversion rate optimization services. Our A/B and multivariate tests have helped companies increase conversion rates by as much as 75%. Let us increase your conversion rates, too!
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.
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 :)
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.
andy Ba said:
Sep 27, 10 at 8:51 pmLove the buttons but having trouble selecting just one of those (like the blue one) Can I download just one of then instead of all 6. Sorry for such a basic questions
Thanks
Andy
TraiaN said:
Sep 27, 10 at 9:38 pmyou could just save the image on this post then crop it for your desire one, but I would recommend you a clean export from psd anyways.
Star Carlton said:
Nov 06, 10 at 9:35 amThanks – I am going to use one of these on my sites.
Jordan McClements said:
Dec 15, 10 at 5:25 amThanks very much for these.
Much appreciated. The red one fits in very nicely with a client site that I am working with.
Travis said:
Feb 22, 11 at 7:59 pmDo you guys have the full package of these buttons for add to cart, etc?
TraiaN said:
Feb 22, 11 at 10:35 pmTravis, what do you mean by the full package? If you have a list of what you’ll need we could add it.
Travis said:
Mar 09, 11 at 4:26 pmthanks for the reply TraiaN! i was wondering if you’ve made a full package of these buttons such as Add to Cart, Continue, Back, More Info, etc. I’m using your checkout button which is great by the way, but it doesn’t match my other buttons. Thanks for your help!
-Travis
TraiaN said:
Mar 09, 11 at 5:52 pmTravis, just let me know what you’ll need and we’ll make them available to anyone.
Travis said:
Mar 09, 11 at 6:46 pmthe most important buttons for me to match would be the Add to Cart and Confirm Order buttons. having those would make the checkout process flow better with matching buttons. a matching button for Continue, Back, and Update would also complete the package. are you making these for people for free? if so, that is very generous of you. :)
Travis said:
Mar 22, 11 at 7:55 amWere you bluffing? :) Wondering if you are still going to make more buttons. I could really use a Confirm Order button that matches what you made here already. Please let me know if you plan to make more. Thanks!
TraiaN said:
Mar 22, 11 at 4:14 pmTravis, the buttons are on our queue. Probably we’ll have them ready in another week or so.
Phill said:
Mar 24, 11 at 7:10 amFantastic Thank you. Your buttons are great and the tips are helpful
Travis said:
Mar 25, 11 at 7:12 amThanks TraiaN! I’m using the orange and blue checkout buttons on two of my sites and they seem to be increasing conversions. Really looking forward to your new buttons!
Thanks!
Travis
TraiaN said:
Mar 25, 11 at 11:47 amTravis, take a look at the updated post. I hope it helps!
Travis said:
Mar 28, 11 at 8:53 amNice work, those are pimp! I’ll try them out and see what happens! Do you have a link to the psd files for the new buttons? The links take me to just the checkout buttons.
Thanks!
Travis
TraiaN said:
Mar 28, 11 at 9:21 amI have updated the link http://www.pitstopmedia.com/sem/downloads/ecommerce-buttons.zip
Travis said:
Mar 28, 11 at 2:10 pmThanks TraiaN! I’ll check it out!
Keith said:
Mar 30, 11 at 6:57 pmThese buttons are great and the best I have seen. It has made my site look better than big name sites. I am already using all I can. Is their any way to have others made to complete my site? I eventually want to update the following buttons on my site using all the same style:
Add Selected Products to Cart
Estimate Shipping
Listing
Write a Review
Tell a Friend About Us
Back to Shopping
Login
Submit
Update
Back
View
Details
Read the Reviews
Edit
Or is their a way to download a version that we can edit the text on? I know it is a lot that I want to update.
Thanks in advance!
Keith
TraiaN said:
Mar 30, 11 at 8:47 pmthank Kevin. Actually you can download http://www.pitstopmedia.com/sem/downloads/ecommerce-buttons.zip and it contains the psd files, where you can modify them as you like. I you don’t have the skills to do that, let me know and we’ll help you with that.
Keith said:
Mar 31, 11 at 1:06 pmThanks! I did try it on my own but I dont think I have the right program to edit the psd files correctly. If their is any way you guys can help with them I would appreciate it. I am sure others would be able to use them too. Also thanks for all the good blog posts. I have been getting some good information from it.
Thanks,
Keith
Roy said:
Sep 30, 11 at 12:12 pm….but your own research tells you -not- to use the “secure” words. I quote:
Does the button contains anti-anxiety elements, such as the term “secure”?
secure – 14 (12%)
no – 96 (88%)
Personally, I find stating “secure” to be a -reminder- that the web is not secure, and don’t find it reassuring at all. In this day and age, just having “Checkout” should be more than enough.
Christopher said:
Dec 08, 11 at 9:27 amIF you make the button burned orange it will be better..
Mat said:
Jan 13, 12 at 2:24 pmGood quality buttons, stands out very well.