Calls to action: How to create successful CTAs

Uniqlo landing page

The vast majority of the websites or applications you design will have at least one form of call to action, from signing a petition to confirming a payment. However, there are a number of obstacles in the way of actually getting users to complete a call to action, and also considerations about the next steps they should take once completed.

To fully understand why users are dropping out of your booking flow or failing to notice your newsletter sign up button on your landing page, you should engage your analytics team and ensure that you rigorously test your digital products with the people using them. That said, there are a few things to contemplate in the design phase that will tilt the scales of conversion in your favour.

01. Introduce calls to action at the right time

When it comes to calls to action, timing is key. Introducing a sign up for a newsletter to someone who is about to make a purchase can be a fatal distraction and lead to abandoned checkouts. At the same time, displaying a full-screen overlay within seconds of a user landing on your website can have a detrimental effect, as you’ve not yet given them time to explore your offering and decide whether or not they’d be interested in exchanging their email address for your juicy discount code.

The current Uniqlo site introduces a full-screen overlay with an enticing £10 off voucher when you sign up to receive their marketing emails. The overlay appears within five seconds of landing on the homepage, meaning new users have had very little opportunity to see what’s on offer.

Meanwhile returning users who have already surrendered their email address to the brand will find it no more than an unwelcome distraction they want to quickly be rid of. Furthermore, Uniqlo have made some interesting UX decisions within the overlay itself. The hairline-thin close button in the top right is not instantly available and takes a full eight seconds to appear, leaving users with the dull grey, ultra-uninviting ‘No thanks’ button under the email form as the one way to immediately close it down.

Mapping out user journeys can really help work out where to introduce calls to action

These kinds of timing decisions stand to influence the behaviours of users and negatively impact their experience on your website. Mapping out user journeys can really help work out where to introduce calls to action. Knowing where users are coming to your site from is a great start, and understanding the journeys they take through your site will enable you to show calls to action at appropriate moments.

It would need testing, but the Uniqlo sign up may have served better on a confirmation screen post-purchase, as you’d then have a converted customer who might enjoy a discount on their next visit.

02. Make credible claims

Buffer landing page

Buffer avoids disappointment with its CTAs

In pursuit of conversions, we have the capability to promise the world with the copy used in our calls to action, but while attention-grabbing links and headlines can result in click spikes, your long-term goals may suffer as a consequence. If, for example, your dating website claims to ‘find your soulmate’ with one click, it better have some Black Mirror-like algorithms going on in order to deliver on that promise, or people will be disappointed not to have met their match and are unlikely to return.

Even less life-changing products or services need to balance what they say with what they deliver. Buffer has a track record of servicing some of the world’s largest brands with its social scheduling tool and, unlike many other pieces of marketing software, actually offers the free version it claims to for users with up to three social accounts.

So, when Buffer’s main CTA reads “Get Started for Free” and we click through and start, we’re not disappointed in 14 days’ time, as we won’t receive any emails from Buffer asking for our credit card details.

Opting for credible claims in your call to action copy, with trustworthy copy lines over attention-grabbing clickbait, will ensure that you’re delivering on your promises and establishing trust with your users in the short term and into the future.

03. Provide post-click feedback

Gov.UK landing page

The Gov.UK Design System includes lots of confirmation details

Pouring all of our creative energy into getting that all-important click can often result in less attention being paid to the user experience post-conversion. However, lack of feedback or direction around ‘what happens next’ at the end of a process can leave users confused and uncertain about the consequences of their actions, especially if they suffer from anxiety.

Tasks like transferring large sums of money or applying for a disability benefit can be stressful, so while it’s important that you empower users to complete these processes, it’s vital that they are given reassurance of what’s to come next, or how to make contact to resolve any issues that may arise.

The Gov.UK Design System includes a number of design patterns specifically for confirmation pages. These resources have a strong accessibility slant and are a great source of information and inspiration as to how and why these considerations are so important.

Post-conversion interfaces can be an opportunity to upsell products or grow your email database, but there may be more useful functions for these pages that should be reviewed in the design phase to better serve your users.

Generate NYC

Generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book tickets

This article was originally published in creative web design magazine Web Designer. Buy issue 284 here or subscribe to Web Designer here.

Related articles: