Add to Cart Buttons: A 7 Year Analysis

In 2007 GetElastic published an article titled “107 Add to Cart Buttons of the Top Online Retailers” which featured 111 (107 apparently sounded better for the title) add to cart buttons from top retailers. The article catalogs what top retailers are doing with their most important call to action buttons. Fast forward 7 years and it’s time to take a second look at these top retailers, where they are, and how the industry, market, and comparison tests have reshaped and reworded their calls to action.

As a marketer or business owner, seeing what top retailers are doing is always important. You need to have your individuality and uniqueness but you still have to remember that these are companies who have millions of dollars and giant audiences to test on. They don’t always get it right, but typically if a large selection of companies, especially those with similar product lines, are all doing something it usually means that there is some importance in following or at least investigating/testing the trend they’ve found.

So lets take a look at how 111 105 (6 have shut down or merged into another) retailers have changed their purchasing call to action over the last 7 years:
(All buttons are available for comparison side by side, 2014 vs 2007, at the bottom of the article).

It turns out that an astounding 99% of the top 105 ecommerce merchants have changed their ‘add to cart’ button since 2007 in at least 1 way. The only company to keep the same button, size, shape, font, color, etc. was PeaPod.

However on mobile, and through their ‘quick purchase’ system the buttons are different than the original 2007 design. For the sake of this study, I’m pinpointing the focus solely on the desktop version of sites, but this note shows that change over time is important and that every top company makes some adjustments eventually.

So what are the changes that 99% of these top online retailers have applied to their buttons?

What text do eCommerce sites use for their purchase CTA?

29/105 (27.6%) of the companies have changed the wording of their button with the following being the prior and current text on all of the buttons:

Of these top 105 retailers, 66.6% utilize the term “Add to Cart” while the second most popular wording at 18% utilize “Add to bag” for their CTA.

Since 2007, the biggest change in wording has been that companies have moved away from using the additional word “shopping” in their call to action buttons. The terms “shopping cart” and “shopping bag” are now primarily being referred to as just “cart” and “bag” which is causing the use of “Add to shopping bag” to be cut by over half and “Add to shopping cart” to be extinct completely. The removal of the word slims down the amount of text being used without losing any of the understanding behind the button’s objective.

We also see companies moving away from words that imply immediate purchase commitments. As stated by Shane Jones in his article about how to optimize your CTA he says, “don’t rush purchase commitment with 'now' phrases ('buy now,' 'pay now,' etc.)." This type of wording seems too final, and might scare people off who put a product in their cart, but are still deciding whether to go through with the purchase”. The terms; “buy”, “buy now”, and “order now” are only used by 2 companies anymore… One of which is Peapod, the ONLY company to still have the exact same button as 7 years ago.

Button text that includes the word “bag” is primarily used by apparel retailers like Macy’s, Gap, Urban Outfitters. This trend follows with a rate of 83.3% of sites using the word “bag” in their CTA whose focus is on apparel, debatably 87.5% if you want to include Disney which does have a strong focus on apparel. The other 3 outliers were Barnes and Noble (which doesn’t have shopping carts in it’s retail stores), Bath and Body Works and Drugstore.com.

Should sites avoid ALL CAPS in their Call To Action Buttons?

While mixed lettering is seen as the easiest way to read something, it doesn’t seem to matter much with these two to four word buttons. There is no true trend to be found since many retailers have decided to switch from capitals to mixed, mixed to lowercase, caps to lowercase, and all other variations. The only reasonable takeaway is that 94% of online retailers use Mixed or Capital letters in their CTAs with the remaining 6% being lower case only.

Which icons are eCommerce sites using in their buttons?

In addition to changing the text, what about icons that are sometimes used by retailers within their buttons?

62.8% (66/105) of top retailers do not currently utilize an icon within their ‘add to cart’ button. Since 2007, not a single company (of the 52 who had an icon) has kept the exact same icon design. They’ve either changed the look or icon type, added a second icon, or removed it.

Screen Shot 2015-03-04 at 11.54.23 AM.png

Lets take a look at which icons are still being used by the retailers who’ve decided to keep one:

The plus and cart icons remain strong and have increased in popularity since 2007. The increase in the plus symbol is most likely because of it’s association with the passive “add it” notion, in accordance to the preferred low purchasing pressure style. The use of a cart has a similar feeling to it but is likely increased due to the uptick in use of the term “cart” in the button’s wording.

The usage of the arrow icon has dissipated by 60% from it’s original usage. An arrow is typically associated with “going to the next page” or “moving to the next step”. The next step in the eCommerce cycle being: Check out. This could be associated with purchase commitment, similar to the almost extinct “buy now” button wording and is thought to be a turn off to customers, potentially bringing down conversions or AOV (average order values).

Bigger is better, don’t have small call to action buttons.

When it comes to call to action buttons BIGGER is better! Making your call to action a bit bigger, and more noticeable, while still maintaining good proportions to the other elements on the page, will typically result in a higher click through rate and higher conversions. It would seem as though many retailers would agree as 81% of top retailers have increased the height of their ‘add to cart’ button since 2007.

To elaborate and explain:
For the results, I eyeballed it. Why? Simple. If I did exact measurements of a button and it is 1 or 2 pixels taller, it’s technically taller but it wouldn’t make it more noticeable for the aspect that matters - my eyes.
As for why the height was the measurement and not the area, because of words like “shopping” being removed from buttons, they should become smaller in width as a result. This makes height the optimal metric to look at for a designer’s intentional increase in the size of the button.

How many companies have increased the height: 85
How many companies have the same relative height: 7
How many companies have decreased the height: 13

What button shapes are being used?

Buttons may have gotten bigger over time but has the preferred shape changed at all?

The most popular shape of the modern add to cart button is a rounded corner design with 55% of major online retailers using this button design. While there is no apparent trend around hard or rounded edges, just that more sites have rounded corners, it is apparent that the pill shaped button is now becoming outdated with a 61% drop in usage.

What color should your cart buttons be?

 

This is actually a bit of a trick question. If you look below at the button alterations over the last 7 years you’ll notice the painfully obvious pattern. No, it’s not the “The pattern is that there is no pattern” gag. Each and every brand changed the coloring with two things in mind: 1. What would fit with the current overall design of their site and 2.  What fits with the current branding and brand image. 

If you look at some brands like Saks Fifth Avenue, Urban Outfitters, and Victoria Secret they all went with a trendy white text on black background look to match their trendy brand style. Home Depot went right for the brand colors, while Best Buy made a major change going from blue to yellow but still stuck within the range of colors that their branding is known for and recognized by.

The reality is there is no magic color that you should be flocking to, stick to your branding and your design. Peep Laja states it perfectly: “Yes sure – sometimes the color affects results – especially when it affects visual hierarchy, makes the call to action stand out better and so on. But “green vs orange” is not the essence of A/B testing. It’s about understanding the target audience. Doing research and analysis can be tedious and it’s definitely hard work, but it’s something you need to do.”

What’s the true takeaway here?

While testing to see if having a bigger button, a different icon, or getting away from extinct wording will increase your conversions is great, it’s not the key point of this study. The main focus is that things change, and will continue to change. It’s imperative that you always continue testing and watch how competitors and top retailers are either following or creating new consumer behavior trends over time.

Complacency is the true killer of businesses. You may have something that works that you’re happy with, but unless you keep making some level of improvement, time will eventually catch up. If that happens, your consistent profits will start heading towards red. Show your business a little love; make some changes.