Much has been said on the Internet about the colors that work best on a web page. You will find thousands of articles about it. From the one where a user asks what color is better and receives contradictory answers (what a surprise, huh?), to the well-known article that explains the tests that Google did with many shades of blue for its links.
The reality behind all of this is that nobody can assure that a specific color will work better or worse on a website without trying it. If they tell you otherwise, they are lying to you. And I’m sure you don’t like being lied to.
Neither do I, so when I was reading this article from Yahoo! Small Business where they say that the best colors to use on the buttons are red, green, and orange or yellow, the first thing I thought is that I should try it on our own website.
If you have been following the series of articles I wrote on a monthly basis about A/B testing, surely you already know that one of the most important pages on our website is the landing page of Nelio Content, along with its pricing page. On both pages, the call-to-action buttons we have are orange.
Will red or green work better compared to the orange color that we already use on our website for call-to-action buttons? This is the question that I asked myself and that I am going to answer here with real data from our visitors. Not subjective opinion. Real data.
Let’s go!
Creating an A/B Test of CSS
The easiest way to change the color of the buttons on a page is to add a few additional CSS rules to apply the new color. You put a new background-color rule to the button with the color you want and that’s it. Easy peasy.
With Nelio A/B Testing you have the possibility to create an A/B test of CSS styles to test different variants of additional CSS rules. You just have to create a new test and select the CSS option in the test type selector:
This will take you to the test editor, where the first thing you have to do is create the variants. Keep in mind that in this type of test, the first variant is the one that shows the page with its current appearance, without extra CSS.
Then you create a variant for, in our case, each of the additional colors that we are going to test: one for green and one for red. The first variant is already orange, so with this we have everything ready.
For each additional variant you can go to edit it to add the additional CSS rules that change the color of the buttons. The CSS rules you will need will depend on the theme you use in your WordPress. In the CSS editor that Nelio A/B Testing provides, you can see in real time how your new CSS rules change the look and feel of your site. This will help you check if you are doing it right.
Here is how the action buttons look from the CSS style editor of each variant of the A/B test that we are setting up. As aforementioned, first you have the original version, with the orange buttons. The other two variants include the CSS to turn the buttons green and red, respectively:
Original version of the page. Version with the action buttons in green. Version with action buttons in red.
Once we have the variants ready, it is time to define the conversion goals that we want to measure. In this case, as you can see in the screenshot of the test editor, we have two goals.
The first goal will measure the clicks on the action buttons, while in the second we also measure those clicks, but only those that happen on the Nelio Content pricing page.
Lastly, note that A/B tests of CSS will affect to all the pages of your website. To limit this behavior in Nelio A/B Testing, in the right sidebar of the A/B test editor you have the option to limit the scope of the test. I have done it so that it only affects the main page of Nelio Content and the pricing page.
We have everything ready to start the test. Once we do, Nelio A/B Testing is in charge of splitting the traffic that visits these two pages for you and showing the different color variants, as well as tracking the conversions (clicks on the buttons).
Remember, you only have to wait for your visitors to go through those pages to start seeing results.
Analyzing The Results
We have had the A/B test of the button colors running on our website for a month and a half on the Spanish website and almost a month on the English website. In the English version we stopped it earlier because we achieved statistically significant results faster with a high confidence value.
But let’s start with the results of the test on our web in Spanish:
As you can see in the screenshot above, for the goal of measuring clicks on both pages, it seems that the green and red variants of the buttons perform somewhat better than the original orange version. However, the statistics tell us that the improvement is not substantial and, therefore, we cannot say that these colors are better than orange.
For the second goal, which only measured clicks on the Nelio Content pricing page, we see that there is no clear winning color either. We can even observe how green here performs worse than orange. Although we cannot draw strong conclusions with the data that Nelio A/B Testing has collected from our visitors:
Let’s now go to see the results of the test in the English version of the page. Here, in the first goal, which measured clicks on either of the two pages of Nelio Content, we see that both green and red are colors that produce a better click-through rate.
In addition, here we can affirm that the green color is the winning color of the test. The results are statistically significant with a degree of confidence greater than 99%. Green is the best color that we can use on our website in English for the buttons on the Nelio Content pages.
If we look only at the clicks on the Nelio Content pricing page (second goal of the test), we see that the results are consistent with those of the first goal of the test:
Having seen this, we can say that green is the color that has worked best for our audience in English on the Nelio Content pages. However, for our Spanish audience, we have not been able to find a color that works better than the one we already had.
Nelio A/B Testing
I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.
Josette Millar
Conclusions
Here I showed the results of an A/B test with real data from the visitors that surfed through two of the most relevant pages of our website. And you’ve been able to check that what works best for a specific audience does not need to work best for a different one.
Green buttons work best for our English-speaking visitors. But that does not mean it is the same for other visitors. For this reason, we have only changed the color of the action buttons of the Nelio Content pages to green in the English version of these pages. The ones in Spanish remain orange.
I would be foolish if I told you that you need to use the green color on your page. No one should tell you that. Not me, not anyone. I have no idea if green will work for you.
For this reason, before paying attention to the many gurus you will find on the Internet, do the test yourself. Creating the A/B test is very easy. And it is the only way to discover what works (or not) better on your website. With your real audience.
Featured image by Robert Katzki on Unsplash.
Leave a Reply