You’ve got months of careful planning under your belt, a fail-proof business plan, an enviable communications strategy, and you’re finally ready to launch your product or service.
Your homepage is the gateway to your brand. You’ve carefully crafted the content on your landing pages to showcase your unique offering.
But let’s be honest — how much thought have you really put into your CTAs?
Calls To Action, or CTAs, have the heavy task of turning your visitors into prospects.
Their design, location and messaging can’t be an afterthought — they must meet the needs and expectations of your visitors at the opportune moment.
In this post we will look at what makes a good CTA, and how to achieve effective affordance when designing one.
We will reveal the secrets behind the perfect CTA to help you drive a higher click rate and ultimately, more conversions.
What is a Call to Action or CTA?
A Call to Action (CTA), also known as a call-to-action button, is a clickable element designed to encourage users to perform an action.
Oftentimes, this button sends the visitor to a page where they are able to complete a purchase or subscribe to a service.
The Call to Action is generally considered the second step of your Inbound Marketing strategy, preceding the moment of purchase.
Its main objective is therefore conversion or transformation: that of your visitors into leads. Implementing efficient CTAs is crucial to the performance of your website.
The CTA can take many forms — it could be a button, a banner with an image, or a simple text link.
It redirects visitors to a landing page or pop-up window in order to:
Sign up to a site
Download a report
Make a purchase
Subscribe to a newsletter
Request a demo
Etc…
Given this, it’s crucial you send visitors to a relevant landing page to avoid any visitor frustration. But we’ll talk about that in another post.
The Call to Action Button: a Question of Affordance
It’s immediately obvious your CTA button is a button. Or is it?
An effective CTA is recognizable instantly and its function is immediately understood.
Affordance is defined as “the property or feature of an object which presents a prompt on what can be done with this object” — in other words, the possible actions suggested by an object or element’s characteristics.
In short: visitors should be able to immediately identify CTAs from their design. Not only is a good CTA instantly recognizable; it also stands out from the rest of the page. When in doubt, remember that a button must match the idea a visitor has of what a button looks like!
It doesn’t matter how beautiful your design is, if an element that is meant to be clickable doesn’t look clickable, your visitors will be left scratching their heads (at best) or leaving your platform altogether.
This is even truer on mobile, where affordance is the only indicator of active in-page elements. Remember: you can’t hover on a smartphone! In fact, the only way to measure the performance of a CTA on mobile is to track clicks.
CTAs and Mobile UX
As discussed above, while the appearance of a CTA is a key factor that influences desktop performance, it’s even more important on mobile.
Digital behavior is heavily influenced by context, and visitors browse differently on their office desktop than on their mobile, especially while they’re on the go.
Browsing while waiting for the subway, walking down the street or perusing items in a store comes with its own set of challenges, and the absence of a mouse or touchpad may result in less tap accuracy.
A survey of 1,333 people carried out by researcher and consultant Steven Hoober revealed that 49% of users hold their smartphone in one hand (the right hand in 67% of cases).
This statistic has given rise to the concept of the Thumb Zone, which sheds light on the importance of the size of devices and site elements and of how this impacts usability.
To get advice on how to design the perfect CTA, we quizzed some of our UX-perts across our offices in Paris, New York, London and Munich. Here are their 5 top tips for creating an irresistible CTA.
1. Make Sure Your CTA is Visible
Because it’s good to start with the basics, a good CTA needs to be visible. This means:
It must always be above the fold, particularly if it’s an add-to-cart CTA.
You must use colors that contrast with the rest of the page.
There needs to be enough empty space around the button to suggest interactivity.
If there is more than one button on the page, increase the size of your main CTA and go for a bolder color so that it can stand out.
Make sure you position your CTAs where users expect to find them (add-to-cart buttons, for example, are often located in the top right corner of the page). If visitors can’t see your CTAs, then you’re bound to miss out on sales.
Here are some common types of CTA buttons:
Sharp-cornered button
Rounded-corner button
Gradient background button
Ghost button
Dropbox uses a simple design with a lot of space, in keeping with the minimalist look of their homepage. The simple design means their blue Call To Action really stands out on the page, and since the CTA button is the same color as the Dropbox logo, there’s no misinterpreting the message on the button.
2. Create an Easily Identifiable CTA
While a CTA has to be visible, it also needs to look like a CTA (see the section on affordance). A heatmap tool will help you see if your CTA is doing its job — ie. whether customers are actually clicking on it.
An identifiable CTA has:
A shape that suggests its function: heart or thumbs up for a like, a cart icon for add-to-cart…
A color and design that reflects the brand’s aesthetic and the colors on the page
A hover feature on desktop
Another example of a viable CTA is the “Remember Everything” button on the Evernote website. It clearly communicates the value of signing up, and the green of the main button both reflects the brand’s palette and stands out on the page.
3. Communicate a Clear Message
The text on your button, if there is any, must be crystal clear.
The wording should be:
Straight-to-the-point: the text should explain the exact function of the button (Order, Confirm, Remove…)
Impactful: if possible, the button should point out the value for the user (Download the guide for free, Get one month free…)
Coherent: it needs to clearly show where users will land next
It’s also smart to:
Create a sense of urgency, highlighting time-limited offers, limited stock, etc…
There’s nothing like a timer to make a user want to sign up. Visitors who spend some time on the Aquaspresso homepage are welcomed by a pop-up CTA, which advertises a limited-time offer and displays a two-minute timer.
4. Use an Accessible CTA
By now you know that a high-performing CTA is an easy-to-click CTA.
A study by the Massachusetts Institute of Technology Touch Lab found that the average width of a finger is between 10 and 14mm, and the average fingertip is between 8 and 10mm wide.
It follows that any clickable element should be at least 10mm by 10mm. Yes, UX is an extremely precise discipline.
Barkbox provides another great example of the ideal CTA, and the two CTAs on their homepage demonstrate how well the brand knows its audience.
There are many consumers who visit the site are interested in signing up to the service themselves but there are also others looking to give a Barkbox subscription as a gift.
To make their customers’ lives easier, the company has chosen to display two CTAs on the homepage: “Choose Your Barkbox” and “Give a Gift”.
5. A CTA Should be Reassuring
Finally, make sure your CTA is reassuring to your client or prospect. Clicks should trigger a confirmation, which could be visual or audible. The absence of a confirmation could leave the user thinking that their action was not confirmed, causing them to repeat the action needlessly.
Enabling a confirmation feature limits unnecessary interactions and, as a result, user frustration.
You can also reassure visitors by clearly communicating that an action can be reversed at any time. Netflix, for example, allows visitors to cancel anytime, once they have signed up — a reassurance feature that had a positive impact on conversions.
You are now equipped will all the knowledge you need to create irresistible CTAs on your web, mobile site or app. Don’t forget that a big part of creating an effective CTA is “>understanding the intent and browsing context of your customers, and fine-tuning the design accordingly.Remember to use CTAs sparingly — too many CTAs kill the CTA.
And, some parting words of wisdom: test, test, test!
Whether you are making changes to the size, color, shape or location of your CTA, A/B testing and granular analysis of customer behavior will help you make the right decisions.
Pierre Sommer is part of the Content Marketing team in Paris. He likes blogs, UX, and blogs on UX.