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 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.
