Before we begin discussing the more in-depth points in our call-to-action beginner’s guide, let’s get back to basics.
What is a call-to-action?
A call-to-action (CTA) is exactly what it sounds like. It’s asking the user to take action. To take the next step. To call, download, enquire, buy, get a quote.
They come in many forms; they can be buttons, images, or just plain text. Certain formats and types work for different applications, but there are some rules of thumb you can follow.
To avoid picking on Halifax too much, I’ve gone hunting round the web for some more examples of do’s and don’ts (but I did pick on them a bit).
Do: Use specific, action-oriented language.
The first thing to bear in mind for our call-to-action beginner’s guide is – what exactly do you want the user to do? What is the next step? As mentioned above, a CTA can be a signpost to a number of things – a download, an enquiry form, adding to a shopping cart, or a quote request form. You should avoid generic statements like “click here” or “download” – use the opportunity to communicate value to the user as well as tell them what to do next.
For examples of good and bad, we can look no further than the Halifax website.
Here they’ve used a generic “check now”. Check what? Don’t rely on the user to read the text above to determine that it is, in fact, an eligibility checker for an overdraft. We are all skim readers. We’re quickly scanning the page to find what we want. There are endless statistics about how little time people are spending reading your content, so it’s best to get to the point and clearly point the user towards the desired action. Better button text here would’ve been “Check your overdraft eligibility”.
Conversely, here’s a good example from our friends at Halifax:
This CTA includes a verb – “compare” – and describes exactly what the user will be comparing. It’s simple, but effective – at a glance, I know that if I’m looking for loan I should probably click on that button.
Here’s some more good examples from elsewhere to give you some more ideas.
Basecamp
Do: use “ghost buttons” to highlight the more important of two CTAs
Ghost buttons is a trend that emerged in around 2014 and has been going strong ever since. It’s when you see a button with an outline but no colour fill.
These days, you’ll most frequently find them being used to prioritise actions when there are two CTAs. Design purists please note – I’ve expanded what would be considered the “traditional” definition of a ghost button to include any button that appears in a pair of two where one is presented in a weaker or duller colour. Here’s an example from design portfolio website Dribbble.
Here, the main CTA is “Sign up”, but they still want people to be able to learn more about the platform if they wish. Both actions hold value, but getting the user to sign up is the more important one. To communicate this visually they’ve used their signature pink accent colour to highlight the signup button, and kept “learn more” in a muted grey.
This technique is really useful if you want to include options for your users – the secondary CTA can be an opportunity to give them that extra push over the line if they weren’t quite ready to buy when they landed on your page. You can point the skeptics to some additional information about the features and benefits of your product or service, without distracting the people who are ready to buy.
…And with this one comes a bonus “don’t”.
Don’t: use ghosting to highlight the wrong CTA
Oh, Sainsbury’s. You had the right idea.
Here, the most important CTA is “Shop fruit & veg”, with the secondary CTA being “Food ideas”. There is a benefit to including both CTAs – Sainsbury’s have a great recipes database that will no doubt provide a lot of value to their customers and keep them coming back – but the priority should always be the most valuable CTA, which here is leading them to the shop, not to the recipes. My recommendation would be to keep both CTAs, but switch the colours round so “Shop fruit & veg” is highlighted in the purple. I’d also sort out the capitalisation consistency, but that’s one for another time.
Don’t: get CTA-happy
The next step in our call-to-action beginner’s guide is focussing on CTA spam. Especially if you’re using techniques like ghost buttons, it can be tempting to load up your page with multiple CTAs. Barring the examples above, it’s good idea to aim to give a page just one CTA – two should be the absolute maximum. Including three or four CTAs will confuse the user about what the next step actually is. This all leads back to the question – what do you want them to do? If you can’t decide, how do you expect them to be able to?
Regretfully, for crimes against multiple CTAs, we have to revisit our old friends Halifax, and their overdrafts page.
In addition to the unforgivable use of three different colours (where did orange come from?!) – this section is a bit of a mess. What do they want you to do here? Granted, this one is a bit tricky – you do want users to be presented with these options to guide them through the process. But presented in this way, it’s just a bit confusing.
I think they’d be better to present it as a step-by-process. Because that’s essentially what it is – the logical process you’d wanted them to follow is – check eligibility, calculate overdraft, and then apply. You could do this by having one CTA something like the below (which would then take you through a contained 3 step process):
This way, you’re still guiding the user through the process at their pace, without confusing them with too many options – note I’ve included that the user would be able to save their application and come back to it.
Here’s an example of this strategy in the wild (I am so happy I get to use pizza as an example for this):
When ordering from Domino’s, they ask you to enter your postcode and select the store your ordering from to start the process. This is front and centre on the website, so before you’ve even looked at a menu, you’re locked in to the ordering process:
You can then select “deliver” or “collect” and confirm the store you’re ordering from. You’re then free to browse the menu and any deals, and it’ll remember your ordering preferences while you build your basket. This staged approach allows Domino’s to focus on their main CTA – getting people to order pizza – whilst still offering users the chance to browse the menu and deals and order in their own time. But because they’ve already put in their postcode and confirmed an order preference, they feel like they’ve begun the process, so they’re more likely to see the order through to the end.
Remember: if multiple call-to-actions can be combined into one seemingly seamless and connected process – do that.
There you have it – not an exhaustive list, but a good foundation on the do’s and don’ts of call-to-actions. CTAs are a bit of science – they require testing, analysis, and constant revisiting to get just right. Don’t be afraid to try new ideas and test new text, images, colours, etc. We might revisit more advanced CTAs in a later post – let us know below if you’d like that.
Key takeaways of our call-to-action beginner’s guide:
- Use action-oriented, clear language
- Use ghost buttons to prioritise multiple CTAs
- But make sure to highlight the most important CTA
- Don’t give the user too many options if you can avoid it: no more than two CTAs per page
