Anatomy of the Call To Action (CTA) button
WRITTEN BY
ROD BLAXELL POSTED ON 22 Feb 2019

Call To Action button: How to design CTAs that convert

Of all the elements in a website or app interface, the Call-to-Action (CTA) button is one of the most important to get right.They play a significant role in the user experience (UX) as well as conversion rates of websites and applications.

At each step of a conversion funnel, a CTA has the job of inducing a site visitor to take the next step in the sales or marketing funnel whether that be to buy a product, sign up for a newsletter or generate a lead.

In this article I will explain what a CTA is, why it is so important and delve into the anatomy of the CTA button.

CTAs… then and now

The Call-to-Action (CTA) has its roots in print advertising, where it is a textual inducement to the reader to take immediate action. Examples include, “Call now”, “Save up to 50%”, “Win $1,000” and so on.

 

UX Call To Action button

Fast forward to the present day and Call-to-Actions are now associated with buttons on websites that are designed to push website visitors further down the conversion path.

So you may ask, “These are just buttons. What is the big deal?”

Well… if you design your CTAs well, then your conversion rates can skyrocket!

Let me show you the way.

CTA Button Design

Let’s start with the design of the actual button.

From many years of using websites and apps, people have developed predefined notions of how a CTA button should look and behave. Let’s explore these notions.

Shape: People have become familiar with button design and expect to see them in the traditional rectangular shape. A lot of CTA buttons also have rounded corners as this is designed to draw more attention to the copy within the button.

 

Call To Action (CTA) button

Size: It needs to be fairly large so people take notice. But it can’t be so big that it looks strange and disproportionate to the other elements in the design. It’s a balance. And for mobile users, the button needs to be big enough to accommodate the person’s finger.

 

Call To Action (CTA) button

Colour: CTA buttons need to have a distinct colour to the rest of the interface so they have a stronger visual weight and stand out. Using a brand style guide, there will normally be a range of colours to select from and one of them can be designated as the CTA button colour.

 

Call To Action (CTA) button

Contrast: Button colours need to contrast against the background they are placed in, so that they stand out. The label within the button should also use a contrasting colour to the button itself so that it stands out.

 

Call To Action (CTA) button

White space: The button should have enough white space around it to allow it to breathe and to assist in making it noticeable.

 

Call To Action (CTA) button

Primary CTA: When designing a CTA button, it needs to be obvious which button is the primary call to action. Other buttons and elements should not compete with the primary button, so removing unnecessary elements should be considered. If a secondary button needs to be present, then the design should reinforce that this button is the secondary option. Secondary buttons, often called “ghost” buttons, are often the same colour as the background with an outline around the button.

 

Call To Action (CTA) button

Interaction: When designing buttons, you need to think of it as a multi-state element. For desktop, they need to have a hover state to indicate that this is an interactive element. When hovering over or clicking a button, it is good to provide visual feedback to show to the user that they have interacted with the button and now something is happening.

 

Call To Action (CTA) button

CTA Button Placement

CTA buttons need to be located in a place where they are obvious and can easily be seen. If they can’t be found easily then the various design components listed above will not matter. So what are some button placement considerations?

First of all, we need to consider the user journey. Or, the fact that site visitor will actually be at different stages within the buyer journey. Some people may have already done their research on your product or service and are ready to buy. Some people may need some convincing before buying. So how do you accommodate both users?

For the ready to buy user, locate the CTA button above the fold (the part of the web page that people can see already without scrolling). And then using the typical z-pattern people use to scan your web page, place this button towards the bottom right of that area above the fold.

For people who need more convincing before committing, place another CTA further down the page.

Or if this is a campaign with a set of pages that correlate to awareness, evaluation and conversion phases then you can design pages around this and only have buttons placed to accommodate the buyer’s stage in the journey.

 

Call To Action (CTA) button

Microcopy

Microcopy is any kind of a small message within the interface that helps guide, reassure and convince the user to action. Common examples of microcopy are tooltips, instructions and support text for call to actions. So how do I use microcopy to improve a CTA?

 

Call To Action (CTA) button

Simple: Use simple short statements to ensure the user is able to digest information easily.

Actionable: By using an imperative mood in the microcopy, the user is given a clear instruction of what to do next. Use action words like “Start”, “Download” and “Try”. Then combine them with time-based words such as “Now” or “Today” to provide a sense of urgency.

Avoid Friction: In the point above we are using an imperative mood, however it needs to be tempered with words that don’t cause friction. Friction words are ones that apply unnecessary pressure to the user, such as “Buy”, Submit” or “Sign Up”. Words that are more encouraging without undue pressure are better. These include “Get”, “Discover” and “Save”. They have an incentive tone to the word.

Possessive Words: By using possessive words such as “me” rather than “you” will encourage the user to identify with the call to action and increase the chance of them clicking it.

Journey Stage: If you are able to determine the user’s stage within the buyer’s journey microcopy can be crafted to support awareness, evaluation or conversion. Smarts such as personalisation could be used to change copy if the user has visited various pages or has visited the website a certain number of times.

A study comparing 330,000 CTAs over a six month timeframe, revealed that personalised Calls to Action convert 202% better than default versions.
[Hubspot, 2018]

Trust Signals: By adding some text near or underneath the button that provide assurances can go a long way to increasing conversions.

 

Call To Action (CTA) button

CTA buttons are an influential part of any web page. By designing with the above factors in mind you can greatly increase conversions and the user experience for people visiting your website. There are various important elements on a web page or app, but the CTA button has the super important task of converting visitors into customers. With such a crucial role, it is critical that CTA buttons are designed for success.

Need help optimising the User Experience of your website or mobile app? Book an appointment with one of our Speedwell UX experts.

Rod Blaxell - Speedwell UX Lead Rod Blaxell, UX Lead, Speedwell

Ready to advance your digital capabilities?

CONTACT US

X

By continuing to use our site, you indicate your acceptance
of our Privacy Policy and Website Access Rules.

Confirm