Examples and Analysis of the Top Ten best Checkout Buttons in the world

The Checkout button must be clearly visible, large, trust-worthy, and attractive to encourage the shopper to take the final step toward making a purchase. Below you will find the top ten best Checkout buttons along with an in-depth analysis of what makes them excellent.
At the end of the page, we have included the .PSD to an optimized Checkout button that you can utilize for you eCommerce store.

1. Amazon

The number 1 retailer online should know a thing or two about optimizing for sales. The button is clean, easy-to-find, attractive, and to the point. Keep in mind, there is no “Trust” or “Security” marker on the Checkout button because Amazon is already to most trusted online retailer. Therefore, they don’t need to use extra space for a “Security” marker.
Our Analysis:

1. Color: Yellow

The color Yellow is used because it is the most attention-getting color. If Yellow is used in large amounts, it can fatigue the eye; however, when used in small amounts, it will draw the attention of the shopper. Therefore, Amazon uses Yellow to draw the attention of the user and get him or her to click the checkout button.
Yellow and Blue are on the opposite ends of the color wheel. When blue is used as a boarder, it provides an appealing contrast to the Yellow button.
2. Action word: Proceed
Amazon uses the words “Proceed to” to encourage the shopper to proceed to the Checkout.
If the button simply says “Checkout”, then the shopper understands that this is where the Checkout button is.
Because Amazon’s button says “Proceed to Checkout”, it acts as a catalyst to drive the user to click on the button and convert the sale.
3. Icon: Arrow
Similar to the action phrase, the Arrow Icon encourages the user to click and move forward to the Checkout process.
If the button only had the words “Checkout” and no Arrow Icon, then the user would see the button and understand that it exists.
The Arrow Icon acts as a catalyst to drive the user to click on the button and convert the sale.

2. Zappos

Similar to the Amazon Checkout button, the Zappos button is bright, large, easy-to-find, and contains an icon. Zappos uses a few different techniques that are worth noting.
Our Analysis:
1. Color: Orange
The color Orange draws the feeling of excitement and enthusiasm; it is also a bright color that draws the attention of the eye. Zappos is looking to catch the attention of the shopper while creating a sense of happiness and excitement when entering the Checkout process.
The goal is to make the shopper go, “Yay! I’m purchasing products that I’m really excited for!”
2. Action word: Proceed
Zappos uses the “Proceed” call to action exactly how Amazon uses it.
3. Icon: Cart
Zappos has chosen to use the image of a shopping cart rather than an arrow for its Checkout button.
Shoppers associate a shopping cart with buying groceries at a store. At the end of the shopping process, the shopper pays for her items, and walks the shopping cart back to the car to drop off the items. Zappos is looking to invoke this feeling of a vehicle that takes you through the payment process.
Though a shopping cart item is good, an arrow that encourages the shopper to continue is much better.

3. EB Games

We like Ebgames’ Checkout button because it is huge, and clearly encourages the shopper to continue and finish the shopping process.
It is important to take note that after a shopper adds an item in the Ebgames store, the shopper is immediately taken to the shopping cart. Most of the times this causes a negative affect with the shopper because you’re forcing her out of the store when the shopper could be adding to her cart by finding complimentary items. However, in the case of EB Games, most shoppers purchase only 1 item per visit; therefore, it is in their best interest to take the shopper directly to the Checkout page.
Our Analysis:
1. Color: Green
Unlike yellow, red, and orange, Green does not capture the attention of the eye. The purpose of using Green for the Checkout button is to associate the button with the word “Go”.
Green is used as the symbol for “Go” in stop lights; therefore, humans have been trained to see green and feel that it is safe to move forward. Coupled with the word “Continue”, EB Games is fully committing its user interface to get the shopper to move forward to the checkout process.
2. Action word: Continue
As we detailed above, EB Games is looking to drive the shopper from adding to the cart, immediately to checking out. They do not want any breaks in between that may cause the shopper to lose focus and leave the site. The word “Continue” fits perfectly because it causes the shopper to feel like she is continuing with something that she is supposed to be doing.
Something very important to notice is that EB Games purposefully removed the word “to” from “Continue to Checkout”. They did this because the word “to” signifies that you are currently NOT in the Checkout process and that you must go to it to begin.
By removing the word “to”, EB Games makes the shopper feel that she is already involved with the Checkout process and that she needs to only complete the process.
3. Icon: Arrow
The use of the arrow is similar to how Amazon uses the Arrow Icon.

4. Comp USA

There is no Checkout button that is more large and in charge than the Comp USA Checkout button.
Thought we feel that the button catches the attention of the shopper because of its size and capital letters, it is unfortunately missing the Arrow Icon that would further encourage the shopper to proceed.
1. Color: Green
The use of the color Green is similar to how EB Games uses the color Green.
2. Action word: Proceed
Comp USA uses the word “Proceed” exactly how Amazon uses it.
3. Trust word: Secure
Comp USA is a large company that is well known and trusted. Even though it can rely on its brand for trust and security, Comp USA has made trust a top priority by including the word “Secure” in its Checkout button.
Comp USA doesn’t want any hesitation from the shopper to move forward with the Checkout process. By including the word “Secure”, Comp USA banishes the insecurities of some online shoppers (those that are worried about identity theft online and getting their credit card numbers stolen) and moves them forward.

5. FTD

1. Color: Yellow
The color yellow in this instance has a similar effect to how Amazon uses it; however, there is one key difference - there is no blue border. Notice that without the blue border, the Yellow fades into the white background and causes the button the be slightly less noticeable. We like the way Amazon has uses a blue border to make its button pop.
2. Icon: Arrow
FTD uses the Arrow Icon in the same way that Amazon uses its Arrow Icon.
3. Action phrase: “..now with credit card”
It is important for us to mention that there are two ways to Checkout in the FTD shopping cart: with PayPal and with a credit card. The purpose of using “with credit card” is to clearly differentiate which types of payment methods the shopper would like to use.
The word “now” is used to create an immediate action, like a command. FTD’s intent is to command the shopper to proceed through the Checkout process and pay them money. Though we understand the reason for commanding the shopper to continue to the checkout process and pay, we prefer the Action word “Proceed” much better.

6. Bass Pro

The Bass Pro Checkout button is the first red button on our list. It’s not as large as we’d like a button to be, but it is still eye-catching and easy to find. You’ll also notice that it has an Arrow Icon, but that it is placed before the phrase instead of after.
Our Analysis
1. Color: Red
Red immediately draws attention to itself. When you’re on a website, the first items or buttons that you’ll notice are those that are colored Red. Therefore, Bass Pro’s goal is for you to immediately notice the button so that you can proceed with the Checkout process.
The one bad thing about Red is that it is associated with the action Stop. Because we see Red everyday at the stop light, it may cause a slight feeling of warning, danger, or halt.
Ultimately, the color red has proven to be excellent for buttons.
2. Action word: Proceed
Bass Pro uses the word “Proceed” exactly how Amazon uses it.
3. Icon: Arrow
Though the Arrow Icon has been used before, this is the first time that it is placed before the phrase rather than after it.
Placing the Arrow Icon before the phrase draws attention to the phrase itself, rather than encouraging the user to proceed with the Checkout.

• Arrow before phrase: “Look at the Phrase and do what it says”
• Arrow after the phrase: “Move forward with what the button wants you to do”

We feel that placing the Arrow Icon after the phrase is best.

7. Buy.com

I was mistaken; it looks like Buy.com has the largest Checkout button amongst our top ten list. The button is large, the green stands out, and it encourages the shopper to move forward to payment.
Our Analysis
1. Color: Green
The color Green is used here similar to how EB Games uses it.
2. Action word: Proceed
The word Proceed is used similarly to how Amazon uses it.
3. Icon: Arrow Cart Thing
Notice how the Icon is place before the phrase rather than after it. It draws attention to the phrase itself rather than invoking the motivation to continue with the process.
The Icon itself is unique in that it is a mix between a shopping cart and an arrow. We feel that it’s an ambiguous Icon, and that the shopper is better served if she is clearly demonstrated an Arrow Icon.

8. Ebags

The Ebags Checkout button does not necessarily bring anything new to the table. It uses the color Green and the Action word “Proceed” to compel the user to move forward and it uses a shopping cart icon in the same way that Zappos uses it.
One key element to notice is that the phrase “Proceed to Checkout” is actually very small. We recommend increasing the size of the font in the Checkout button to make it clearly visible to the shopper.

9. Apple

Apple doesn’t have anything fancy - it’s pretty much direct and to the point. The Checkout button says, “Check Out Now.” The button is small, contains no icons, but is at least clearly visible in the shopping cart.
The beauty in the button is that it’s sleek, simple, and obvious.

10. PayPal

I personally wanted to place PayPal as number 1; however, we decided to reserve slots 1-9 for custom buttons (designed by the eCommerce store), and place PayPal as number 10 because we can all use it.
Our Analysis
1. Color: Yellow
Yellow is of course used to draw attention.
2. It’s from Paypal
The button says PayPal, so the shopper automatically trusts the Checkout process and feels secure.
3. It’s actually a lot smaller than the other buttons
We prefer a Checkout button that is large and in charge. This PayPal button is sleek, simple, and eye-catching, but it can be missed by non-tech savvy web shoppers.
-

The Best Checkout Button in the World

After our thorough analysis of hundreds of Checkout buttons, we feel that the Best Checkout Button in the World contains the following elements:

1. Yellow background with Blue border
2. About 250px in width and 35px in height
3. Contains the Action word “Proceed”
4. Contain the Arrow Icon

Here is the button: