Follow us on Twitter
Grab the RSS feed
Button Color Test: Red beats Green
A question we hear a lot at Performable is: “Which button color converts best?” As design teams publish and test landing pages they inevitably get around to choosing a button color for their page. And given that small details can make big differences in conversion, it makes sense to consider the color of the button to be pressed. Thus many people end up wondering: Does one button color work better than others?
Button color is one of the longest standing debates in the world of conversion and optimization. Everyone seems to have their favorite color: at different times in the last two years I’ve heard green, pink, red, orange, and even light blue as THE ONE COLOR that works best. Obviously, this can’t be the case.
Fortunately button color is extremely easy to test. We recently ran a button color test on the home page of Performable.com and the results surprised us. Button color had a big effect on the overall conversion of the page.
The colors we chose to test were green and red. First, I created the normal home page with the green button color I had originally designed. Then, I cloned that page (created an exact copy) and changed the button color to red. I did not change anything else on the page. The content, message, and graphics were the exact same on each page variation. The only difference was the hex value that determined the color of the button. If there was some conversion difference affected by the button color then we would see it in this test.
You can see the two pages we tested below:
Each of the colors we chose, green and red, have interesting connotations. Green connotes ideas like “natural” and “environment” and given its wide use in traffic lights, suggests the idea of “Go” or forward movement. Green is also in our company color scheme (along with black and gray), so a green button fits a bit more nicely into the page design. Green is also heavily used at the moment, being the chosen hue of many Web 2.0 web sites. (I’m not sure how this happened).
The color red, on the other hand, is often thought to communicate excitement, passion, blood, and warning. It is also used as the color for stopping at traffic lights. Red is also known to be eye-catching. Red, in general, is not used as a button color nearly as often as green.
So which color would convert more people to click? Would it be green, which connotes “Go”, or red which connotes “Stop”? Would those connotations actually affect whether or not people clicked?
My hunch was that even if one color performed better than the other, the difference would be small. I could imagine that one color might be more appealing or grab the user’s attention better than another, but that the overall conversion numbers would be overwhelmed by the overall message of the page. I assumed that the the results of this test would show what we’ve seen in testing before…that the major difference between good and poorly converting pages was the message the page was communicating.
We ran the test over a few days of traffic. In total, we had over 2,000 visits to the page, and for each visit Performable recorded whether someone clicked on the button or not. (In Performable all the analytics and conversion data are automatically gathered…so we could watch along as the results rolled in)
The result? The red button outperformed the green button by 21%.
21% more people clicked on the red button than on the green button. Everything else on the pages was the same, so it was only the button color that made this difference. This was a much larger difference that I expected.
Consider this: a 21% increase in the conversion of this page is potentially a 21% increase to all downstream metrics. So by getting 21% more people to click at the top of this process we’ve just added 21% at the bottom as well. This is why optimizing pages is so valuable…we did not have to increase traffic to the page to see improved results. Instead, we improved the efficiency of the page…and by improving conversion on existing traffic we thus add considerable value.
Additionally, it is interesting to note that this is the sort of result you can’t easily find in user testing. Because it takes so many trials to find a statistically significant result (often thousands of trials) it would cost a fortune in time and money to run the test with that many people face-to-face. In general, A/B testing is great for quickly and easily running tests of individual variables on a page like this. That’s why its a good idea to use a balanced approach when testing, using the appropriate test type to garner the results you want.
As always, we cannot generalize these results to all situations. The most we can say is that they hold for the conditions in which they occurred: in this page design, on this site, with the audience that viewed it. It could be that Performable’s audience happens to like red (or dislike green) or that red happens to contrast nicely with the green in our color scheme. There are many possible reasons that could explain why this particular test result happened the way it did.
Therefore, do not go out and blindly switch your green buttons to red without testing first. You should test colors on your page and with your audience to see what happens. You might find something interesting in your data that we don’t have in ours.
Find out more.
If you like this type of test result, grab our RSS feed to get notified when we publish new results.
Did you like that post? You'll love these.