Add to Cart buttons – they may be small, but no online retail store can do without them. These little, rectangular, sometimes colorful clickables connect the product to the shopping cart and are an extension of your branding. It’s important to put some thought into what your “Add to Cart” icon looks like in your shopping cart.

We’ve collected over 100 Add to Cart buttons from the top online retailers of 2006 to give you some design inspiration. And we’ve summarized some usability guidelines that you can apply to your own Add to Cart button. Ok, there are actually 111 shopping cart icons, but 107 just looked cooler.

And now for some stats, because percentages make it cooler.

How the Add To Cart Button Can Reinforce Your Branding

At first the “Add to Cart” button may seem like a minor detail, but it has the potential to create an emotional connection with your brand. Your choice of shape, color, font and button text all affect that connection.

Urban Outfitters’ felt pen lettering echoes the brand’s edgy, street persona (it may however be at the expense of findability as it does nothing to stand out on the screen). Northerntool’s plus sign icon resembles a screwdriver head. Petsmart’s little red doggie ball is fun, playful and instantly recognizable. Bloomingdale’s signature “big brown bag” icon captures its cachet. And Polo’s timeless, deep navy blue button brings harmony between its online and offline identity.

Button text is also of great importance. “Add to Shopping Bag” sounds more appropriate for high end department stores than “Add to Cart,” which is more believable for a WalMart or Target. “Order Now” may work for long time catalog brands now accommodating online orders. In the UK, “Add to Basket” is more prevalent terminology.

Button Design and Usability

Button Text

Web copywriting emphasizes scannabliity — perhaps the golden rule of web copywriting is don’t use 5 words when three will do. How much more should this rule apply to a small button? Nevertheless, we found 15% of the top etailers going long. Harry and David’s “Add To My Shopping Cart” — though personal — is a mouthful.

“Buy Now” may be a stronger call to action than “Add to Cart”, but may subtly suggest the user is finished shopping or is making a commitment to purchase without time to review the order. The beauty of “Add to Cart” is that it is non-committal and assumes the user is still looking around. And if you’re a good e-salesperson, you’re showing suggested products and a “continue shopping” link from view cart page (or you are using an in-line cart with Ajax’y goodness).

Text Formatting

General web usability guidelines recommend sans-serif fonts with high contrast color selection (high-contrast white on black or dark blue rather than low-contrast like Chadwick’s blue-on-blue).

All-caps are generally discouraged in web copywriting. Mixed case is the easiest to read, although all lower case is also easy. We found 45% of “Add to Cart” buttons using all-capitals. Walgreen’s slaps white all-caps text on a light colored, tiny button with a gradient and an icon, forcing some users to squint.

Button Placement

If you offer helpful features on your product pages like wishlists, enlarged photos, color switching, alternate product views, email to friend, size chart, view cart or check out buttons, make sure the “Add to Cart” button is obvious, bright and prominent in comparison. Less important functions can be lighter colored buttons or simple text links.

Stacking Text

Stacking text is not a good idea for links or navigation buttons, and the same goes for “Add to Cart” buttons. Users have come to expect some form of rectangular shape, and when quickly scanning a page, it may take longer to distinguish button from decoration, and even become frustrating. No need to reinvent the wheel, stick to the convention.

What if You Use A Button From a Template?

Even if you don’t use a custom designed “Add to Cart” button for your shopping cart, choose a button that complements your site’s theme (complements does not infer it must be the the exact same color). And make sure you pick one design and stick with it. Ecommerce thrives on trust, and random buttons erodes customer confidence.

What do you think is the best button in the collection? What about elsewhere on the web?

Observing users is one of the most under-rated means of improving site usability. Today’s eCommerce managers often rely too heavily on technology to help them make decisions. Faceless A/B and multi-variant testing is used to incrementally increase performance of key areas of the ecommerce store such as product pages and checkout procedures. Though valuable tools, they are only as useful as the deployed functionality.

A very simplified scenario.

Curtis, an online retailer marketing manager, decides that the product pages do not have a high enough conversion rate. In keeping with the mantra “test ’til best”, he wants to see if the ‘Add to Cart’ button is the culprit. Perhaps the color of the button has an effect? A simple A/B split test on two colors is done: green vs blue. In this instance they convert at approximately the same rate. Next, he plays-off blue vs yellow, then orange, then purple, etc. Conversion rates remain somewhat consistent across the board. What could be causing the poor conversion rate?

Mel, a competing online retailer, has the same concern, but she takes a different approach. A simple 30 minute observation of 8 different users given $200 dollars of virtual cash to buy anything they want from the store. 4 out of the 8 users found the product they wanted to buy but were distracted by other things on the page - too much merchandising (up-sells, cross-sells, others bought these items, bundle discounts, warranty), in-store inventory lookup, add to wishlist, add to registry, etc. These users simply wanted to add an item to the cart and they verbally expressed frustration because the page had so many choices. Testing the color of the button would never have reveled this.

Why is this on my mind today?

I am in the process of planning a wedding and honeymoon, so my fiance Amy and I are doing a LOT of online research and shopping. I love observing how she tackles tasks and what she likes and dislikes about the online shopping experience.

While looking for flights, cruises, etc. we have been using a number of sites: Airlines, online comparison engines, and even Google (yes, you can look up flights directly in Google - type Vancouver to New York, the result page gives you input fields to enter dates - cool).

Amy has settled on Kayak.com as her travel website of choice. While seeking out airfares, she was thrilled by the auto-complete on the airport input fields. She started to type v-a-n-c and automatically Vancouver (YVR) was show as an option for the input field (by setting YVR as our home aiport, it is defaulted for future visits as well).

Compare this to other sites where it is often a game of hide-and-seek when looking up airport codes - enter the ‘From’ city, new screen with airport code options, select option, click ok, go back to previous screen where all date information has been magically erased and wash-rinse-repeat on the ‘To’ airport - frustrating and time wasting.

This simple bit of Ajax functionality has made Amy loyal to Kayak for all her travel lookups - a case of usability being the primary cause of loyalty. People want ease of use and intuitive behavior.

The next time you want to improve your online store (which should be always), watch people, listen to what they say, observe their facial expressions. By seeing what makes them smile or grin could save you tons of time on faceless testing.