Add to Cart Buttons from 50 Top Online Retailers
A List of Website Buy Buttons from Some of the Biggest Ecommerce Sites
Buy buttons may be the one thing no ecommerce website should be without. A lot of people have expressed thoughts on what makes a buy button better – be it brighter colors, bolder graphics, or a bigger size. It makes sense to want to optimize your add to cart button, as the ultimate goal of any product page is to get that product into the shopping cart. It’s common to hear that vibrantly colored flashy buttons attract our attention, subliminally compelling the shopper to click. But if a big red button offered guaranteed clickability, surely every online store’s product pages would sport the same. So how do the nation’s largest etailers treat the essential add-to-cart? I grabbed a list of buy buttons from the top 50 ecommerce companies in 2008 to see how the buttons really did compare.
As you can see, they are not all big, bad, and red. In fact, this collection of buttons resembles a bag of mixed-colored candy more than anything. So how did the attributes break down?
Buy Button Color
Green 13 (26%)
Red 10 (20%)
Orange 10 (20%)
Blue 6 (12%)
Grey 4 (8%)
Yellow 3 (6%)
Pink 2 (4%)
Purple 1 (2%)
Black 1 (2%)
Buy Button Color Tone
Warm 25 (50%) – That’s red, yellow, orange, and pink.
Cool 20 (40%) – That’s green, blue, and purple.
Neutral 5 (10%) – That’s black and grey.
Apparently brown just isn’t a hot button color in anyone’s book.
Add to Cart Call to Action
“Add to Cart” – 28 (56%)
“Add to Bag” – 10 (20%)
“Add to Shopping Cart” – 2 (4%)
“Add Items to Bag” – 1 (2%)
“Add” – 1 (2%)
“Add to Basket” – 1 (2%)
“Select Delivery Date” – 1 (2%)
“Add to Shopping Bag” – 1 (2%)
“Next” – 1 (2%)
“Order Now” – 1 (2%)
I guess the needy plea, “Buy Me Now, Please!” didn’t make the cut. In terms of the use of “bag” versus “cart,” in general the retailers employing the “bag” are more likely to be associated with bags in their physical counterparts, like apparel retailers. (When was the last time you pushed a shopping cart through Nordstrom?)
Extra Add to Cart Button Graphics
None 28 (56%)
Arrow 8 (16%)
Cart 6 (12%)
Plus Sign 3 (6%)
Bag 2 (4%)
Does size matter? Circuit City and the Systemax family of sites seem to think so. Each of their sites uses a strikingly large green bar as their add-to-cart. Never mind if green isn’t associated with the brand. On the smaller side, Gap has chosen a barely-there concept. The petite pale grey design certainly doesn’t stand out on their many-shades-of-grey site. Gap’s sister brands Banana Republic, Old Navy, Athleta, and Piperlime also appear to be taking the less-is-more approach. I didn’t measure each button, but most fall within the realm of 1 to 1.5 inches.
Findability Still Matters
In the end, it doesn’t matter how fantastic your button looks, if it’s hard to find on the page. (This is one argument for vibrant contrasting colors; the more attention it attracts, the easier it will be to quickly spot.) Online shoppers are accustomed to quickly scanning pages to pull out relevant information. A button that jumps off the page eases this process. Most retailers stuck with common usability conventions and set their buttons in a sans serif font – although L.L. Bean seems to have missed the memo on this one. Twenty-five of the buttons capitalized the first letter of each word, 20 put the whole call to action in caps, and 5 chose all lower-case.
The Gap and Target’s use of white on light grey is probably better avoided; some old printing conventions still hold true online, and high contrast between text and background is one of them. As comparison, Musician’s Friend black text on lighter yellow background quickly jumps out and is easy to read. All in all, many of the buttons are not readily identifiable out of context. For me, Amazon, Victoria’s Secret, and Toys R Us maintain the company branding and are familiar enough to be identified, even without the corresponding site. There doesn’t seem to be a clear set of guidelines that even the best-performingetailers use when crafting their buttons. The best recommendations may still be to ensure that the button is clearly visible and stands out on the page, regardless of color or size. For an older look at shopping cart buttons, Get Elastic rounded up a list of over 100 buttons in 2007.
After talking with some usability consultants at Internet Retailer Web Design & Usability 2010, it seems that green is indeed the preferred choice over red for usability studies examining effective buy button color.
- CircuitCity.com (CircuitCity is now owned by Systemex Inc, which fell at #21 on the Internet Retailer list for 2008. Systemex also owns TigerDirect and CompUSA. They all have the save Buy Button).
- SportsmansGuide.com (As owned by Redcats Group, who also have a lot of other websites I could have chosen from, but I didn’t).
This list of sites was compiled from Internet Retailer’s list of top 500 ecommerce businesses for 2008. Omitted from the list is Peapod Inc, which is a login for current customers only site.