Design Systems
The anatomy of a CTA button in 2017: Voice & Tone, Style and Component best practices.
Here I will explain how a Design System works using a single interface element: the CTA button which is responsible for directing the user to the main action of your web page.
This article aims to present some guidelines for designing an effective call to action component and how teams can make this interface element successful working together.
Voice & Tone
Why should I click this button?
a. Starting with an action verb and write in first person
Your CTA button should begin with an action verb like “Start”, “Get” or “Download”. They are action-oriented.
In a test run by Michael Aagaard (Unbounce’s Senior Conversion Optimizer), he found that changing the CTA button copy from the second person to the first person resulted in a 90% lift in click-through rate.
b. Expectation
Most web users are hesitant to take things they’re presented on the web at face value. By experience, their trust has been burnt before by links that promise free service only to find out that they have to provide their credit card number in order to get what they want.
To increase click conversion and to build trust, anticipate user’s scepticism and tell them what they will gain by taking the action you’ve presented to them. When designing a call to action button, think of all the potential questions users will have, and make sure that you answer them on time.
c. Sense of urgency
Phrasing of the action by using bold, confident, and commanding words can alter the user’s perception in such a way as to convince them that they shouldn’t wait any longer to take action and that waiting to take action would result in a penalty or a missed opportunity.
d. Sense of ease
Often, a user’s hesitation to take action stems from thinking that an action will be difficult, costly, or time consuming. By taking care of these concerns, your CTA button can lead to more conversions.
e. Trigger words
Trigger words are the words and phrases that trigger a user into clicking. They contain the essential elements to provide the motivation to user to continue browsing. Give them a good reason to take the action you want them to take. If the user is looking for “plans” or “pricing”, and your CTA button says “plans” or “pricing”, they’re going to click on it. So in this case, “plans” and “pricing” would be the trigger words.
Think about trigger words like search keywords!
Jared Spool has good tips in the article: The Right Trigger Words.
Style
Where should I click?
a. Shape
The first thing you should know is what the shape of your CTA button. The two most popular button shapes are rounded and square edges, and the shape that works best for you will largely depend on testing. Don’t overlook this factor. Button shape can and does impact conversion rates.
b. Size
In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your CTA button accordingly.
c. White spacing
The use of whitespace (or dead space) around a CTA button is an effective way of making it stand out in areas where there are many elements.
d. Placement
The placement of a CTA button is critical to draw the attention of the visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the CTA button and take action.
Designers who use mobile apps designed with the standards of the Google Material Design already know that the primary button (FAB — Float Action Button) will be located on the bottom right of the screen. Placement matters!
e. Contrasting color
Set an accent color for your CTA button and stick with it. Do not use the primary or the secondary color of your brand.
Michael Aagaard says:
My best advice is to use common sense and contrasting colors when you design your landing page buttons. The good old “squint test” is always helpful. Put together your page, take a few steps back, squint your eyes, and see if your button stands out. I usually start by experimenting with an orange or green button, simply because they often perform well in tests. I don’t think there is any deeper psychological reason, it just seems that they stand out on most landing pages due to the average design. Again, it’s all about context, and I’ve seen tests where a purple button has outperformed both green and orange variations.
Imagine that your CTA button needs to be almost an anomaly on the screen. To do so, avoid some Gestalt principles such as proximity, similarity, continuity and common region. Use only one law: focal point. By doing this your CTA button will stay highlighted in the view of your user.
Component
It’s time to transform your interface elements to components!
a. Be a component for Designers and Developers
Designers must create interfaces thinking in components, using the right tools available in the market such as Sketch, Adobe XD, Figma, etc. Developers too! Use some front-end technology for componentization like React, Angular, Vue.js, etc.
b. Equal name convention for Designers and Developers
Now that we’re working with components, teams need to speak the same language. To do this we must have the same naming convention for components for both Designers and Developers.
React example:
<Button value="Join now!" className="primary-button" />
<Button value="Take a tour" className="secondary-button" />Sketch symbol example:
button / primary-button
button / secondary-button
c. Optimized for Unit Testing
For QA team work more efficiently, always declare an identifier for your component. And make it clear what the context that the component is applied.
HTML example:
<button href="/checkout" id="landingPagePrimaryButton">
Buy now!
</button>
d. Optimized for Analytics
Custom data attributes are a speedy way to capture additional information about content on the page. It’s a streamlined solution that helps you better understand how a user steers through the site’s content. Custom data attributes are a construct of the HTML 5 spec and are widely supported in all major web browsers. Since it’s valid HTML and HTML is very user-friendly to implement, this makes it all the more attractive to take for a spin.
HTML example:
<button href="article.pdf" data-published="September 2017">
Download PDF
</button>
There are several benefits to implementing and using data attributes:
e. Optimized for A/B Testing
Put into practice the good practices of Component optimization that were said above and enjoy to test all the tips of Voice & Tone and Style.
React example:
<Button
value="Beer today!"
className="primary-button--b"
variation="b"
campaign="St. Patrick's Day"
/>HTML output:
<button
class="primary-button--b"
data-variation="b"
data-campaign="St. Patrick's Day">
Beer today!
</button>
“The goal of a test is not to get a lift, but rather to get a learning” — Dr. Flint McGlaughlin, MECLABS
Optimization is an ongoing process. Isn’t that important whether the initial test results are positive or negative.
“Of course hitting a home run in the first swing is easier on the ego. But when you approach optimization as a process — not a one-off opportunity to swing for the fences — you’ll see that stopping at a few bases along the way is often what it takes to win the game” — Michael Aagaard, Unbounce
To remember
Nothing is written in stone. Test a lot. It’s all about context.
Inbound Marketing
Everything that was presented in this article can be combined with some Inbound Marketing strategy. Learn more about what’s in the link below:
