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.

This post was originally published in February 2008 and was selected as part of our current “Best Of” series.


Related Articles

20 Responses to “Call To Action Buttons: Does Size Matter?”

  1. Having just redone the BUY NOW buttons on my website, I can really appreciate this article! THanks.

  2. I’ve done some A/B tests of e-commerce oriented buttons and found that “Add to Cart” outperformed “Buy”, Buy Now”, and “Purchase”. Also making a secondary & tertiary choice smaller and visually different improved conversion as well. As for color and style, the best measure I have found is the “back of the room” litmus test. Essentially, if you can pick-up the primary call to action standing 10 feet away from the monitor you are in good shape.

    Just in case folks missed it, the post on 107 Add to Cart buttons is something that should be bookmarked: http://www.getelastic.com/add-to-cart-buttons/

    • GeorgeW3 says:

      Just out of curiosity was your target audience primarily in the U.S.? Shopping cart is a U.S. phrase as opposed to shopping bag for instance in Australia.

      I do believe the research. I did an unscientific study on my website but changing my black with white text Add to Cart button with a larger Green one with a shopping cart logo and my sales increased by 15% immediately. Could be coincidence but I am keeping the larger green button.

      • Hi George, you could certainly sub Shopping Bag or even Add to Trolley for UK shoppers for Add to Cart. I think the biggest influence is the size, shape and placement as your data supports – bigger, bolder = better!

  3. I’d place my bets on an orange, high-contrast button that reads “Add to Cart”.

    A great source of coffee is http://www.greenbeanery.ca. They specialize in green (unroasted) beans for us fanatics who prefer to roast our own. But they also have an excellent selection of roasted beans.

    I’ve never tried their decaf versions, but I see they have several…

  4. fishbulb says:

    The bigger the better in my testing. Here is the man as far as online split testing is concerned:

    http://www.belcherbutton.com

    A worthwhile 9 minutes. He explains how as well as why ie., why orange is the right color, why “add to cart” works better and a bunch of other cool stuff.

  5. Bigger brighter buttons are better. I have recently redesigned my website and noticed conversion is better with brighter buttons.

  6. I’m currently split testing the exact same thing, so thanks for the advice.

  7. In our prior website revisions, I found that button location was as big a factor as color/size – but that the right contrast was critical. I too would bet on orange as the higher performing color on most sites. Regardless of the call to action (buy now, chat,etc.,) we’ve seen it needs to stand out but not be obnoxious, and red can be too strong a color. Plus there is the subconscious training we’ve received since we were in pre-school that red means stop. I didn’t watch the belcher button video mentioned above, but I’m curious to see if he tested that theory.

  8. yerbaguy says:

    Great article, as always.

    A great source of gourmet coffee is http://flyingbean.com . The shopping cart is in need of updating but they have the largest selection of hot-air roasted beans on the web. A very smooth cup. From personal experience I know that they’ll flavor (excellent selection of flavored coffee by the way) any of their swiss water decaf coffees on request if they dont already have it on their site. They also have a natural orange peel process decaf as well. The owner, Letitia Peterson, really understands great customer service. Definitely check them out.

  9. [...] far as size and color go, Linda Bustos of Getelastic.com has some great takes on “Add to Cart” and “Continue Shopping” buttons. In a [...]

  10. Tina says:

    We are about to redesign our website buttons, this article is great help. Size is important but even more so – position and visibility. Some colours work better than others and make the buttons stand out. Also the Buy button should be placed somewhere buyers naturally expect to find it. I get really annoyed with some websites that have their buttons in some obscure positions and you either have to look hard for them or eventually end up clicking on the wrong one when you are in a hurry.

  11. Stephen says:

    Interesting post. I think an often overlooked part of site performance is the “perceived speed” that the visitor experiences. E.g. a site which loads in 6 seconds might be perceived fast by the visitors if all the slow loading elements is below the fold and the top of the site loads in less than 1 second. On the other hand a site that only takes 2 seconds to load, but where 1,95 seconds is the graphics and styling of the navigation menu might be perceived slow.

  12. Yes, size does matter. Of course everything is dependent upon the full page design. I do like some of the points you brought up here, but would like to see more detailed descriptions of some of these ideas.

  13. [...] design? If you have several calls to action, which should you make more prominent? Have a look at Get Elastic's thoughts on testing size, among other elements, to create an ideal call to [...]

  14. boson says:

    siez,color,postion does matter on user actions, better to do a/b test on really useful things

  15. Buehl says:

    Would love to here some high brow opinions of our homepage call to action “Shop all” buttons. I am feelin like we should make them more unique and stand out more.

  16. This answered one of my questions – can the button be too big? It seems like the answer is yes from the example from the article. So it’s not necessary to make a 10 pound button after all.

  17. I’m about to do a website redesign and of course am very interested in the psychology of colour and how it affects purchases.

    And then I found this article which presents what the colour suggests, the best types of products and services to use certain colours for, and even the type of shopper – bargain, impulse and so on to target with those colours.

    http://blog.kissmetrics.com/color-psychology/?wide=1

  18. Merrilee Thammavongsa says:

    Sites that you are mentioning… you will never get anything usable from.I know cause I had to do a paper on this subject…hard as hell to get resources that’s objective

Leave a Reply

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