Call To Action Buttons – Does Size Matter?

I came across a website (that will remain nameless) while searching for a good tasting Swiss-water decaf coffee. (Does one exist? Please advise in the comments!) I noticed on the product page that it had perhaps the world’s tiniest Buy button.

Original Product Page

They Say Bigger Is Better

Many conversion optimization cheerleaders who suggest larger buttons convert better, and some tests show even different colors can perform better. Marketing Sherpa credits cart button design as one of 7 tweaks that helped Newegg.com boost online sales by 30%.

#7. Bigger, flashier cart button

“It used to be just a cart with a little arrow. It wasn’t big enough. People’s eyes weren’t going there, so we made it big, bold and very exciting to look at,” said Stuart (Wallock, Marketing Director of NewEgg.com). The team a/b tested several different cart icons before picking the winner, so go check it out.

This is the evolution of NewEgg’s cart icon design:

NewEgg Button Design Evolution

Wallock mentions several different cart buttons were A/B tested in the last redesign – we’re not sure if they were different colors and different sizes, but the “winning” icon is not a relatively large button compared to other retailers’:

NewEgg’s not the largest button

(From our collection of shopping cart buttons)

Testing Different Designs

Back to our decaf coffee product page. I mocked up some alternative pages which hypothetically could be used in split testing.

Here the buttons are bigger – easier to read. But the Continue Shopping button is larger than the Add to Cart. Probably not the best design.

buy-now-add-to-cart.jpg

Here’s an alternate version with the button text “Buy.” This would make a good split test to determine which button text converts higher (with the same button design).

buy-now-buy.jpg

Personally I prefer a design like this – a large, easy to read and well-positioned Buy or Add to Cart button, with a less prominent text link back to shopping.

buy-now-3.jpg

But maybe the white button doesn’t stand out enough? We’ll throw in a sweet jelly bean red button, because some swear that red “stands out more.” Check out a couple lively discussions from people who have actually tested this at Grokdotcom here and here.

buy-now-4.jpg

Split-Testing Resources

Split Test Screenshot

Google Website Optimizer makes it easy for anyone with an AdWords account to run simple split tests. GrokDotCom has compiled Google Website Optimizer – 7 Free Resources To Get Started including a downloadable guide and white paper, podcast and webinar archive on the subject of A/B split testing with Google Website Optimizer. They even developed a WordPress Plug-In for it.

Google also has its own training video here.

A Few More Suggestions

Just a side note: This is perhaps the blankest product page I have ever seen.

Product Page Area

This post is about cart buttons but I can’t help but offer a few web design suggestions to make this page more effective:

1. Use a product image. Fair enough, coffee is coffee – it’s not a wedding dress. It’s not absolutely crucial I see an image of what I’m getting. However, if this were a gift, I would be very concerned about how the packaging looks – I wouldn’t want it to look like a generic supermarket brand.

2. Show some cross-sells. Often times coffee is sold in whole-bean form. If the customer doesn’t have a grinder, he may reconsider the purchase. What an opportunity for this retailer to save the sale and up the order value by showing its grinders available for sale. Or better yet – recommending one grinder to make it quick and easy for the customer to make a decision. A “top rated” or “best value” label would be very effective.

3. Show product ratings and reviews. For a smaller retailer, it can be difficult to populate a site with enough review content. If this is a mom-and-pop shop selling organic coffee, it could locally give away free samples to family, friends and neighbors in exchange for an honest customer review on the site – or do on-site taste tests at a local PTA meeting or something.

Customer reviews are extremely important, especially for something like organic decaf swiss water coffee which is very healthy but tends to taste awful. When evaluating this item at under $6 for 5 lbs vs. Seattle’s Best’s version available at Cooking.com at $30 for half the weight, I honestly would prefer to try the more expensive product first because it has six actual customer reviews.

4. Show Shipping Info / Calculation. There’s more than enough room to mention where you ship to, or at least include a text link to this information, because that’s usually a top customer concern.

5. Include a Phone Number. The less product information you provide, the more potential questions your customers may have. This site has a toll-free number but it’s buried in the footer menu.

Related Articles

18 Responses to “Call To Action Buttons – Does Size Matter?”

  1. DJ Waldow says:

    Linda -

    First of all…Who drinks “Swiss-water decaf coffee?”

    Second, great commentary. It is amazing how seemingly little thought goes into the call-to-action button/link.

    Thanks for calling them out!

    dj at bronto

  2. @ DJ *snicker*

    “Someone” might confess to doing that.

  3. Great post Linda.

    In addition to small Add to Cart buttons, it bothers me when sites make the Add to Cart and Add to Wish list buttons the same size or color. It take an extra second or so to figure out which one to click.

  4. Lucas says:

    Marketing Sherpa also recently released a study on Shopping Cart Design Tests

    One of the more eye popping results:
    44.11% increase in conversion rate when using “Proceed to Checkout” instead of “Add to Cart”, and “Proceed to Cart” out performed “Add to Cart” by 21.8%.

  5. @ Justin – Totally.

    @ Lucas – Thanks for the link. That’s an impressive statistic – but does it only improve conversion at the expense of average order value by rushing customers to checkout?

  6. Lucas says:

    Linda,

    I would expect the improved conversion rate is at the expense of average ticket size. However, that would be another study unto itself :)

    Cheers,
    Lucas

  7. Hi Linda, your readers might also be interested in our recent case studies on Call to Action posted on marketingexperiments.com (all of the research archive is free access, by the way; it doesn’t even take a subscription to our journal).

    “Landing Page Optimization: Increasing Conversion by 150% and Lead Gen by 2,379% with an Effective Call-to-Action” is at this URL:

    http://www.marketingexperiments.com/improving-website-conversion/increasing-conversion.html

    Cheers,
    Peg

  8. Hi Peg,

    You bet, I love that link. Actually it was included in the post with the text “different colors can perform better.”

    That article has stuck out in my mind for some time now, you have so much great stuff on MarketingExperiments.com :D

    Thanks for stopping by Get Elastic.

  9. Erica says:

    Testing at Voices.com proved that “Buy Now” converted much better than “Choose this Voice” when casting for voice over projects. It’s a much stronger call to action.

  10. I think this article is great. I have had suspicion that what this article concluded is the case but seeing empirical evidence demonstrated in this article confirms my suspicions. We develop shopping cart for our customer, we will certainly be using the suggestion in this article to improve the “buy now button” in our future releases.

    Thanks

  11. Good approach to your article by including the mockups. I’m off to read the grok article about optimizer now. Funnily enough, and with good timing, I’m about to start working with it next week.

  12. Adrian James says:

    This is great commentary and you really have to wonder if the owner of the store has engaged a professional e-commerce developer or just implemented an out of the box solution.

    e-commerce optimisation is well discussed subject with no shortage of free suggestions and advice.

    You should send the site owner link to this post.

    CTA Buttons: Split test “Add to Cart”, “Proceed to Cart” and “Proceed to Checkout” and try different colours and sizes.

    I have to say I have never seen a site waste so much space as can be seen on that product page. A quick visit to almost any top e-commerce site will provide a list of improvements such as product aspiration and enticement images, customer product and store reviews, buy this and get a second product with 10% off or no added shipping or a number of other cross and up sell ideas etc.

  13. Brad says:

    I have been doing tons of testing in this realm as well and I am noticing that color is seeming to play a more important role than text.

    I like to see big numbers like the 44.11% but was that on a site that does 20 orders per day or one that does 20,000. It is easy to make percentages look good with low volume, but the true test is with high volume.

    Our move to an orange button on a white and blue website did great, but we also faded back the colors and attention of much of the other offers as well, so it focused their attention right to the button.

    I know everyone loves to use Amazon as an exapmlle because they are so big, but VHS was big too….

  14. I am in agreement with brad, higher volume will produce the statistics you need. Funny I came across this post a while back when we were in the middle of redesign, I was looking for a add to cart button, and I first ran into 107 add to cart buttons (another post). Anyway, this post was very informative, but it did not answer the question of bigger being better.

  15. Starman says:

    I need to do some shopping cart design, this info/comments was useful. I never thought that “Add to cart” button design is so important, I will follow instructions found here.

  16. TraiaN says:

    Although not directly related to the design, I have wrote a post about a technique called dynamic text on call to action buttons. Some of your blog readers may find it interesting and useful. Cheers.

  17. There is an amazing amount of difference between those buttons isn’t there! The red one just cries out, “Click Me!”

  18. Mixwerk says:

    We have the same cart solution with “buy now” as a direct hint. THis is much better that everything else. Keep it easy and simple.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS