SAP’s Button Color Test

VERSION A
SAPVersionAsm

How site visitors voted:
VERSION A (62%)
VERSION B (38%)
Actual Test Results:(Click back to see Versions A & B)
Version A, the green button, increased sales conversions in SAP’s online store by 14% at a 90% confidence level.

SAP’s in-house optimization team conducted this test using Adobe Test & Target. The test ran on all pages of the store concurrently. The add-to-cart button was the only element to change.

This test ran three total variations; the third was a similarly-sized orange button — but it didn’t have a cart icon. Despite standing out on the page far more than the other colors, it performed nearly identically to the losing blue button. This may indicate graphics on a button are more important than an eye-catching color.

Button color tests are often viewed as the lowest common denominator test in the CRO community. However, we think this test is worth noting because it refutes American marketing color ‘psychology’ guidelines which say blue is safe and trustworthy while green may remind one unpleasantly of price and money.

Because this test’s confidence level is below industry standard at a 90% confidence level, there is an increased chance for a false-positive. Nevertheless, we feel the test is a nice reminder that small changes can have an astounding impact on your bottom line.

Click Here to See Another Button Color Test

> Tweet that you ‘Got it Right’ here.
> Tweet that you ‘Got it Wrong’ here.

30 Comments:

  1. I don’t find the results surprising as in the US we’re culturally trained to associate green with go (vs. yellow=caution and red=stop).

  2. Yeah, green means go.

  3. If green is universally accepted for ‘Go’, I guess I am curious as to what caused the major successes in the past with our good old friend BOB (the Big Orange Button).

  4. I didn’t choose it because green means go, but more because the green stood out against all the other blue on the page. I didn’t even expand the view of the page – take a look at them both on the original vote page and you’ll see what I mean.

    So yes, green means go, but it also helped people find the button – which is way over on the right in a gray box instead of being positioned really close to the product title and image.

    Maybe that should be their next test…

  5. I also picked green mostly because it created a sense of appetite. Blue was a bit too disconnected, didnt cause any emotional response even though I also use a blue button on my ecommerce site. I guess I’ll have to change it :)
    Based solely on my experience, I’d say here it wasnt a question of CTA visibility (since they tested orange too) but the green color’s ability to initiate an emotional response of freshness, airiness, freedom. Orange would cause an emotion of warm, a bit heavy sensation and overly stimulating.
    Considering that we’re bombarded with heavy colors in supermarkets, we may be looking for a way to feel less forced to make a decision online, and green seems to be the color of choice…especially this particular shade of green.

  6. Thanks for the insights Igor, I’m a huge fan of color theory and how it impacts us psychologically. Glad someone brought this up!

  7. Chose green because the color stood out stronger. There are already a lot of blues on the page above-the-fold (even in the logo), so naturally my eye glanced over the CTA button.

  8. Yes, green may mean go to most, but what about other contributing factors? Like the fact that the background of the Save 10% banner in the middle of the page is also green (albeit a different shade). Could the green color be helping reinforce to users that adding it to the cart will still get them the 10% discount? Did the blue Add to Cart button convey to users–even subconsciously–that they might not get the 10% discount if they clicked that button rather than the Buy Now button in the green background banner? Color alone may not be contributing to the entire 14%, but the tying of color use together…

  9. I also chose green because it stood out versus all of the blue on the page. I bet the color red or orange would have gotten even better results than green.

  10. In the case of the green button, there is a clear visual connection between the green CTA and the green add to cart button. An interesting variation would be to test the color on the CTA bar and see if there is an inverse relationship (i.e., the key factor is matching both so they are linked visually, not necessarily the color used).

  11. I chose green because the CTA bot that says “Buy now and download for immediate use” and that is also green. Associative colors for CTA’s go together was my thinking. I was right on this one =)

  12. I didn’t mean to suggest ‘green means go’ is the ONLY reason green won, but an additional psychological factor that I was surprised was not included in this statgement: it refutes American marketing color ‘psychology’ guidelines which say blue is safe and trustworthy while green may remind one unpleasantly of price and money.

  13. Blue associates with the navigation elements. Green associates with the big “Save…” banner in the content area. I’m mostly guessing here.

  14. Got it right! I think it’s the tie-in to the large centered block in green. There’s a consistency: On this page (if not in general), something in green means “Buy.” And it does stand out a bit more. I also found it interesting that the color of the button influenced my noticing of other elements on the page. The blue version certainly drew my attention to the screen capture graphic immediately to its left. With the green button, I barely noticed it, but certainly saw the big centered green block. So, perhaps, it wasn’t the color of the button itself, but rather the persuasiveness of the other element on the page that was in the same color.

  15. Ah yeah… Too much focus on “green means go” and “green is for money” (aka “green means I have to provide a credit card, so I shall bounce…”). Bottom line, there are many other blue elements on the page, which prevent the blue button from standing out. You could pretty much bet most other colors would perform better purely because they would stand out against the page…

  16. Got it right! Totally agree with Don – color of an individual element does not live on its own. In an ocean of red background, a big red button would be invisible. It’s the context that matters. When I was making my guess my first thought was which color in this case provided more contrast against elements around it. The product graphic left of the CTA is mainly blue so I felt green would have been more of a contrast than blue in this case. Glad to see this intuition seems to be correct. :) The funny thing is that we are having discussion with our in house designers who wants to do a button color test but there’s only one huge button in the middle of a page that is essentially white and doesn’t have a lot of distracting elements/colors otherwise. In this case, changing the color of the button from a bright green to a bright orange in my opinion would not make much of a difference and we would probably be better off testing some other element/aspect.

  17. These little things that mean another 10% of additional pay! Gotta love testing.

  18. Good, got it right also. I notice that the text on the blue button is much closer to the basked symbol than in the green version, is that deliberate?

  19. Green may be associated with money in the US but it’s not a natural link elsewhere in the world.

  20. I also agree with the comments that the Green button stood out from the other blue branded elements.

    I heartily disagree with the ‘green means go’ – if that were the case, the green button would *always* win and we all know that is not the case.

  21. I think it has more to do with the surrounding environment than with any deep-rooted psychological meaning.

  22. I choose green because my eyes flowed naturally down the page with the green block at the bottom. Where as the blue button took my eyes back up the page which felt upleasant like a visual loop.

  23. Notice the Blue logo in upper-left corner. Then blue graphic top-center. Then middle-right green button. Finally bottom-center green block. A strong visual parabolic arc.

  24. I suppose the better visibility of the green button made it the winner. It is not really a contrasting colour as a BOB would be, but it is also not hidden in its surroundings.

  25. testing is the only truth here is an article from hubspot declaring red beats green by 21% http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

    The only truth is the test :)

  26. I completely agree, i made some tests like that and usualy it’s not really about colour but about contrast :) still nice test especially in SAP industry.

  27. I would personally take some extra care when looking at the results – 14% increase at sales based on 90% level confidence is not technically statically significant – It does show a positive trend but I would still be careful about declaring such results!

  28. Got this wrong … the blue provided more contrast for me, because the bottom green banner made the green button blend in. And read somewhere green made people associate that with money – how did the green color impact sales?

  29. I think I’m the only one to admit that i got it wrong, or at least to post about it. I went with blue because i thought that it communicated a part of the process where the green perhaps could have made the user feel like they might step out of the website.

    I wonder how much to factor in that the green had the text more symmetrically placed than the blue.

  30. The green gave contrast to the blue, so draws the eye. It often annoys me that designers like to harmonise colours – when for response, you need contrast.

Join the conversation:

Please note:
1. Comment moderation is enabled, I'll do my best to approve comments asap.
2. If you have any trouble submitting comments, please send me an email (anneh at whichtestwon dot com).



Sign up for new test results & how-tos:


Privacy Protected