Button labels should be easy, right? It really shouldn’t be hard to pull a couple of words together.
Actually, labels are some of the hardest things to word. It’s as much about what you take out as what you leave in. So I thought I’d share some tips on how to make them warm and clickable, like we do here at Deliveroo!
Action = motion
‘Call to action’ means just that, to inspire action — to do something. This means the label should be directional. The direction is usually forwards motion but it can also be backwards. Sometimes the action might be a confirmation of a verb — such as ‘Got it’ or ‘OK’ which essentially means ‘I’ve understood’.
If forwards and backwards labels co-exist they should be complementary. Let’s look at some examples:
These labels don’t feel like consistent terms, and ‘previous’ is much too passive to be a call to action.
These two terms feel more consistent, but while ‘Next’ hints at onwards movement, it’s still quite passive. ‘Previous’ isn’t natural language, it would be better to use something less formal and more friendly.
This is much better, we have two verbs, and we have plain English terms that feel much more consistent with each other.
Explain the next step
Users want to complete tasks with minimal effort. The CTA label should be task-focused so that expectations are set for the next step of the journey. They are also orienting, so should reassure users they’re in the right place. This means when labelling a button with the next task, it should be consistent with the title of the next screen.
This is disorientating, the user clicks ‘Make payment’ but the first thing they’ll see on the next screen is ‘Log in’. Even if they need to log in to pay this could be confusing. In this instance the call to action would have been better saying ‘Log in to pay.’
This version has the word ‘payment’ in both the call to action and the title on the next page so there’s more consistency. However, ‘Your payment’ could still be a little disorientating if they haven’t yet made a payment.
This version is completely consistent therefore it should feel reassuring to the user — they understand what happens next, then that they’re in the right place once they’ve clicked the CTA.
Don’t create a mystery
It should be immediately crystal clear from the CTA what will happen next and what that click will enable you to do. In other words, why should the user click? Let’s have a look:
A first-time user would have no clue why they should click this link. They may hazard a guess that it would take them to some kind of account area, but there’s no hint as to why you’d want to go there or whether they will be asked to log in. Until they click on it, they just won’t know. It’s also lacking any sort of verb or sense of progress.
This is better, it’s clear that the user will be asked to log in, but it’s still not clear why they’d want to do that.
Now this user knows exactly why they would need to click this CTA — to enable them to one of these tasks on their policy. It’s not only task-focused, but it’s clear.
Make it effortless
CTAs should help make an online experience effortless. They should feel compelling (if our purpose is to convert a user), frictionless (if our purpose is to enable easy task completion) or celebratory (if we are reassuring a user they’ve just achieved something). Thinking about the tone you use is really important. For example following our tone of voice guidelines, we would opt for more passionate language in the customer app where we’re inspiring someone to buy food. But on the rider app where we simply need to move a rider through the journey as swiftly as possible, we’d opt for more functional button labels.
Here’s an example of how you can make CTAs a little more inspiring:
This is clear and directional, but it feels quite formal and lacking in emotion.
This version feels a bit more personal, with the use of the first person. But it’s still a little lacking in excitement.
This is much more exciting. The use of ‘let’s’ tells the user they’re not in this alone, and reassures them they’ll have guidance along the way too.
Make it snappy
You have limited space in a button label so you need to keep your message as short as possible. Removing any superfluous words will help keep your CTAs short and sweet.
This is task-focused and uses the first person. But the ‘now’ isn’t really necessary, and ‘re-enter’ is both hard to read, and too long.
We’ve lost most of the superfluous detail, however we may not even need the word ‘password’ if this is next to the password field.
This is shorter, yet still task-focused and instructional.
Avoid double negatives
A user shouldn’t be worried about clicking on a CTA. There’s nothing more confusing than a double negative.
Hmmmm, does ‘continue’ cancel, or does ‘cancel’ cancel? Cancelling a cancellation could be very confusing for a user.
This is clearer, a simple yes or no. But here we’ve moved away from verbs so there’s no hint as to what will happen next.
Adding a ‘keep it’ and ‘cancel’ reassures the user, but also confirms exactly what happens next.
If it’s the end, celebrate!
If the user is at the end of their journey and you need a CTA, why not use it to remind them that they’ve achieved their task successfully? Imagine in this case a user has completed one of their many onboarding assignments:
This is a common label you’d see, but it’s not in keeping with our brand tone of voice, and it’s also very passive.
Using the first person is much more active, and showing the next step (back to the homepage or account page in this instance) is a nice hint to what happens next. It’s still a long CTA though.
This is short and action-based, but adding the celebratory ‘whoop’ and exclamation mark also adds brand personality, while at the same time denoting a sense of achievement.
And on that note, thanks for reading – now over to you to have some fun with your CTAs!
If you love writing CTAs and other microcopy, we’re hiring!