Do you want to boost your website conversion? Try tweaking your CTAs.
A CTA is a call to action — every single button on a website is a call to action. It’s the thing that you need your users to click on to actually make your website do its job.
We all use hundreds of these every day… and you might not realise this when you’re carrying out your daily activities, but some really do work better than others.
Websites typically have primary, secondary and tertiary CTAs. Primary CTAs are reserved for the actions that you really want your users to take. These are typically things like:
- Purchasing a product
- Lead generation
- Subscribing to a mailing list
Secondary and tertiary CTAs are reserved for the things that you want your users to be able to do, but these things to not achieve the main goal of your site. These are things like:
- The help section
- Saving a product for later
So.. what makes an irresistible primary CTA?
- The colours.
CTAs need to stand out. More than anything else on your website. Colour is the most important thing in a CTA to draw attention.
Take a look at this example on Skyscanner.
Would you click on the green button? Or the arrow on the text above?
It is highly likely that more users are clicking on the green CTA, than on the action that they probably want to take, which is to select the dates that they searched for.
Even though the copy makes this clear, users never really want to read. This can lead to frustrated users not being able to find what they’re looking for as they’re selecting the wrong action.
For primary CTAs, I always recommend using block colours with a high contract and using a colour that isn’t used in many other places on your site. This ensures that this is the first thing that users notice on your page and they recognise this pattern as the one that they need to select to take action. A user’s eyes then draws to the content around this.
Numerous AB tests have proven that more striking colours (like red, orange and green) draw the most clicks & the simplicity of changing a colour can make a massive difference to your conversion. There is obviously still a reason that not everyone uses red.. You still want to align with your brand.
The reason why I have highlighted this as point number 1, is that users are far more likely to carry out an action by looking for the colours in your CTA than reading the copy.
2. The size.
There are some basic rules here, especially on mobile, make sure that the hit area is big enough. The minimum that these should be, as recommended by apple, is 48px wide and 48px tall.
From years of experimentation, I can confirm that this is definitely a minimum. On every AB test used to increase the size of a CTA, I have seen positive impacts. The size makes it clearer, easier to find, easier to read and easier to click.
Another tactic can be to make the whole area of something clickable, like a product in an ecommerce store. This works well, as long as users do not accidentally click on scroll, and are invested enough in your product to want to progress. If you make a whole area clickable that users aren’t expected, it can lead to frustration with users progressing and then needing to go back.
3. The placement.
You can have as many or as few CTAs on your site. The important thing is that they must be:
- Accessible. Make sure these are visible on your page as soon as possible.
- Relevant. Make sure that these CTAs make sense in the context of what you are telling a user.
- Prominent. Make sure that the action that you want a user to take is the most visible thing on the page.
If there is content that you want a user to browse through, but you want them to be able to progress at any point, use multiple CTAs, or make them sticky.
4. The copy.
The copy really does need to call a user to action. It needs to be explicit, snappy and leading.
Always make sure the copy:
- Highlights value
- Sets the scene as to what the user will do next
- Is as short as possible
Highlight value:
The more you use terminology that puts users in a positive mindset and makes them see the value that you are offering, the more enticing this will be. This can be as simple as ‘get offer’ or ‘find deals’.
If you have a specific campaign running and users are in a browsing mindset, you could use terminology like ‘‘Get your free trial’, or to ‘save 50% by signing up today’.
If you’re at the latter steps in the funnel you could say ‘buy now to save 20%’.
Set the scene as to what the user will do next:
The copy that you use should be clear about where the user is going to go next. Here is an example from Disneyland Paris that is almost too specific:
In this example, I had already registered and I wanted to edit my trip details. The only option I could find was to ‘register now’ and so I trawled the site trying to find a ‘sign in’ or ‘edit tickets’ CTA. It turns out that the ability to sign in and edit your reservation, was behind the ‘register now’ CTA. To some users, this will not be obvious enough and you risk losing customers or at best, creating a frustrating website experience.
Another important thing to remember, is that copy should guide users in a different way at different points in the funnel. If a user is about to click on a button that says ‘pay now’, they will not progress unless they are ready to commit and buy a product. Do not make your terminology too strong unless you know users are ready. If they are in the browsing mindset, you want to focus more on helping to ease them into the journey with terms like ‘view offers’.
As short as possible: Always consider if you could say the same thing in fewer words.
Whether you’re creating a new site, or reviewing one that you already have.. take a look around at what draws your attention, and assess your approach to CTAs using these 4 things:
- Colours
- Size
- Placement
- Copy
Any improvements to these areas will sure be easy ways to boost your website’s performance.
Let me know if you try any of these tactics and how you get on.