UX Writing Essentials: CTAs
Key points – CTAs, “calls to action", are interactive elements that let users progress through an experience. They usually come as buttons, text links or icons. Good CTAs encourage users to take a specific action – and make it clear where that action will take them.
CTAs can make or break the user experience, so let’s find out how to construct them effectively (spoiler: in theory, it's quite simple, in practice, it's usually not). Let's have a look at CTAs in their most common forms: buttons, text links and icons.
Most CTAs come as buttons. They take up quite a bit of space, they’re colourful and interactive. In other words, they’re designed to catch your attention and get you to tap them. From a copy perspective, your CTAs should do two things:
Since CTAs encourage users to take a specific action (for example, paying, downloading, confirming or booking something),
CTA copy should always start with a verb.
- You should also clearly state what’s going to happen next, or where the CTA is going to take the user. Let’s call this the "target". It’s important to include a target; users might simply not tap your CTA if it’s not clear where it’s going to take them.
In practice, CTAs can be constructed like this:
Keep it short
Always make sure that your CTAs are as simple and short as possible. Three words should be the maximum. Often, however, you don’t even have that space, especially when working on something that's optimised for small screens. Here, you can just use the “action", i.e. the verb that the CTA starts with:
CTAs and headings
In order to still include the “target", consider the space around the CTA: most likely, you’ll be able to add some kind of heading to your CTA. This way, it’s still clear to users what’s going to happen when they tap the button.
This heading doesn’t necessarily have to sit right on top of your CTA. Let’s say you’re writing a pop-up message. “Create new file?" could be the message’s headline, while "Create" is the matching CTA. By mirroring the headline's lead verb in the CTA, you're also confirming what's going to happen next.
If you want to know more about how headlines and CTAs work together, check out my article on headlines (opens in new window)
In order for your CTA button to be properly accessible to screen readers, try to use the
button HTML tag, not a generic element like a
button tag comes with built-in screen reader functionality, and will announce itself as, for example, “Create new file, button".
CTAs can also come in the form of text links. Text link CTAs are often used for secondary actions (such as "Maybe later" or "Cancel") or they're embedded in the body copy.
Text links don’t have the visual impact that a nicely styled button has, but they usually offer more space. So, while the same rules for CTA buttons apply, your copy can be a bit more conversational.
Label links properly
Just like with button CTAs, make sure that they always include an action and a target. Aside from general usability – users will want to know where a link takes them – properly labelled links are important for SEO and accessibility: screen readers can skip through a website’s content, and jump from link to link. If every link on your website is labelled “Click here" or “Download now", screen reader users will easily get lost.
As a side note, when you place a text link at the end of a block of text, you can omit the full stop. This way, it's slightly easier to read the link.
Sometimes icons act as CTAs. They’re usually used for “add-on" actions like uploading a photo or adding a GIF, like in the Twitter example below. When creating icon CTAs, use the most common imagery: even without words, there should be no doubt in the user’s mind as to what an icon CTA does.
Generally speaking, they don’t work for important actions – don’t use a dollar sign instead of writing “Pay now", for example. But for actions that don’t impact a user’s flow, like adding a photo to a Tweet, they’re great to conserve space and add some visual elements to the layout.
When you use CTA icons without any words, make sure that your icons are accessible. Use the
button tag and add some
aria text to your code that tells screen readers what an icon CTA does.
Learn how to make your buttons more accessible (opens in new window)