Could This Be The Best Checkout Button?
So, you are planning to design a checkout button? Let me help you a bit with that.
Until recently I thought that a web button is so simple to design that it will take a couple of minutes to do it. After researching the look and feel of the checkout buttons of 111 most important e-tailers, I realized that what seemed simple, it actually was not. I identified eight design elements for something just as “simple” as a checkout button – some say that I complicated simple things :) And there may be other elements that I missed as well, so please feel free to contact me if you have comment or share your thoughts.
I want to share with everyone what I believe is one of the best checkout button, based on my previous research. Keep in mind that the color of the button is just for illustration purposes only. In practice you may want to use a color that fits your brand and website’s color scheme.
Those of you who want to use our design we made a downloadable .psd collection available at the end of this post). Let’s get started.
- slightly rounded corners for a better look and feel (#8).
- a shadow to simulate floating (#7).
- a little bit of light to create a subtle 3D effect (#1).
- a CTA label (this call to action contain the word Checkout) (#6).
- a strong CTA verb – “Proceed” seems to be used by most online retailers (#2).
- a small arrow pointing to right to suggest “next” (#4) .
- telling users that the next pages are secured will increase trust and click through rate on your button (#3).
Regarding the color of the button there’s no single color that performs best. When you decide on color and size , keep in mind the color scheme of the page this button will be displayed. The button contrast with the overall look and feel of the page, it better be above the fold and it should probably the most visible element on the page.
Update: Below are the several other web buttons that complement a checkout button: add to cart, buy now, confirm order, continue shopping, more info, next, previous and update cart. They are in .png format so you can just copy each button to your site and .psd formats, for those who want to make changes to it.
If you decide use these buttons on your site let us know how they performed. Any backlinks pointing to www.pitstopmedia.com is also appreciated :)
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!