A split test which improved conversion rates by 68%
This article also appeared in NZ Entrepreneur Magazine.
The one element that all websites have in common, whether an eCommerce site or lead generation, is call to action buttons. Each and every action you want your website visitors to take will have a CTA button to encourage them to take it. Every button is not created equal however, and there are still countless ‘Submit’ buttons around the internet that will be lowering conversion rates and losing companies sales or leads. One example of changing and improving a button on a large eCommerce website resulted in a $300 million increase in sales annually so improving your call to action buttons is extremely important. So how do you improve your own buttons?
Ensure Your Buttons Look Like Buttons
The majority of internet users have been trained over the years on how to use and navigate websites through repetition – they know what buttons are for and how to use them. Trying to be different and using text links or other design elements in place of buttons can hurt your conversion rates. Equally making non-buttons look like buttons can cause confusion and people to click or focus on the areas that will not lead them to converting on your website. Ensure each of your buttons look like buttons to avoid any confusion for visitors.
An example of a button that doesn’t look like a button
Use Contrasting Colours
There are many guides on improving your conversion rate that explicitly say to use a certain colour (usually orange/red) for all of your CTA buttons, however this advice ignores the most important part of picking your colour. People’s eyes are drawn to contrasts so if you have a red themed website and you implement red buttons there will not be as much contrast as if you had used a different colour such as yellow or blue. It is a good idea to split test the colours you use, starting with the most contrasting colours. Once you have found the highest converting colour you should ensure your website uses the same colour for all important CTA’s so visitors can easily find their way through the form or checkout process. Once you have your main button colour you don’t need to stop there, you can also split test different shades of the same colour – how many will depend on the traffic you get to your site. Google is a big believer in split testing and for just one button on their Gmail webpage they tested 40 different shades of blue to find the best performer.
An example of a split test by Hubspot where the red button outperformed the green button by 21%
Test Your Button Copy
One of the most important things to test to improve your CTA buttons is the copy used. A lot of buttons use standard text such as ‘Submit’, ‘Click Here’ or ‘More Info’ and whilst these may be the best buttons for your website you will never know without split testing different variations. To get you started here are some rules that you should follow initially:
- Your button text should describe exactly what your website visitor will get by clicking. ie. ‘Get Your Free e-Book’ vs ‘Download Now’
- Write button copy in the first person ie. ‘Start My Free 30 Day Trial’ vs ‘Start Your Free 30 Day Trial’
- Start your button with ‘Get…’ instead of ‘Order…’ or ‘Buy…’.
- Don’t use ‘Subscribe’, ‘Submit’ or ‘Sign Up’ – be more descriptive with your buttons
An example of a split test by Unbounce.com where changing the copy from ‘your’ to ‘my’ increased the CTR by 90%
Test Different Button Sizes & Locations
Equally as important as testing the button copy is testing where the button is located on the page as well as the size of your buttons. Using a heat map tool such as Crazy Egg or Mouseflow allows you to track where your website visitors are navigating and clicking. Using this information you can determine where the best place to put your buttons are. Utilising white space around your buttons and arrows pointing at your buttons are also elements worth testing as they can both have a big effect.
Make Your Main CTA Button Different
Many websites have multiple product plans or options and most designers create all of these CTA buttons the same. To improve your conversion rate however it is essential that one of the buttons is different to the others so that it gets the focus on the page. This will draw your visitors’ eyes to the button you want them to click and give them a clear indicator on which option they should pick. This is especially true on eCommerce shopping cart pages which usually have multiple buttons for updating the cart or removing items. In this case the main CTA button is the ‘Checkout’ button which should have the focus.
An example of a shopping cart page with no clear CTA button.
AcuityScheduling.com trialed this on their own buttons. In the original version the button which got clicked most often was the third one due to it standing out from the two other buttons, this however was a free plan and not the most important plan for the company to sell. Joanna Wiebe split tested these buttons and put the focus on the middle plan which they wanted to sell more of by using a contrasting colour and ensuring each button contained a line of sub-text. The result of this test was an incredible 95% lift in conversions.
Despite CTA buttons being a relatively small part of your total website design they are very important and can have a big effect on your conversion rate and success of your marketing campaigns. There are hundreds of different button variations and positions you can test so the important thing is to start split testing now, you just might be surprised at the results!
