Ask designers what a CTA (Call to Action) is and they will say that it’s a button that allows users to perform an action. The action could be initiating a purchase, raising a complaint, downloading a brochure, contacting the customer service, or calling an emergency contact.
But, a CTA is more than just a button — it is a doorway to the promised land where users get their answers and live happily ever after. A CTA is an invitation to the users to discover, interact and experience the application.
Think of CTAs as road signs. If you’re on a highway and a fork appears on the road, you’ll instinctively look up to see the signs. You would want to know which road goes towards your destination. Without the right signs placed at the right spots, you will be lost, delayed or confused about the action.
In the same way, bad CTAs mislead the users and waste their time. They cloud their judgement to perform the right actions. But how would a designer know if they designed a good or a bad CTA?
By looking at the interaction between CTAs and users.
Are there too many or too few CTAs? Which one is the least clicked and most clicked CTA? Do users immediately click the back button after clicking on a particular CTA? Are the colors of CTAs consistent with the brand guidelines?
By looking at the analytics of your web page/product, you’ll get a sense of what’s working and what’s not. But what if one wants to understand what differentiates good and bad CTAs in the design phase itself?
I have some suggestions on how to differentiate between good, bad and terrible ones.
Write meaningful labels
The purpose of a CTA is to make people interested in accomplishing or exploring their goal. And in order to make people interested and willing, we must guide them with clear and concise copy on the CTAs.
For example, if you want people to go to your blog after reading a short excerpt, what is a more intuitive message?
One might argue that with some context, ‘click here’ is also clear enough. But it fails when readers just skim through your content and miss ‘Click here’ because it’s a generic copy. Moreover, it’s vague and doesn’t tell what will happen after clicking.
‘Read more’ or ‘Continue reading’ is more definitive, and clarifies the expectations of the reader who is interested in reading the full story. It’s also more enticing and motivates readers to continue on their reading journey.
Pro tip: Write in first person, and present tense. It creates a sense of immediacy and drives better engagement.
Size matters
Just as objects too small or too big are difficult to hold, in the same way, CTAs too big or too small are difficult to click.
If the CTA is too small, no one will notice it. If the CTA is too big, it will appear out of place and hinder other important information.
Sometimes, the size of CTAs also impedes the speed with which people accomplish their tasks. The reason is Fitts’ Law. It says that the time required to point at an object is directly influenced by the size of that object.
Sometimes the goals and objectives of your application might define the size of your CTAs. In that case, always consider different screen sizes while designing your application. The size should not be so small that the users can’t tap it with their fingertips. Neither, it should be so big that it collides with the text or other visual elements on the screen.
Pro tip: Define how vital your actions are and then decide the size of your CTAs accordingly. Usually, 10mm x 10mm is a good minimum touch target size.
Color matters
Color plays a defining role in the success of CTAs. But it doesn’t work in isolation. It would be wrong to say that red is better than blue or orange is better than black. The color choice depends on where the CTA is placed and its functionality. Color matters — especially in UI where we need visual hierarchy, to highlight the action. But colors should be A/B tested to understand what is working and what’s not.
To make good color choices, keep below things in mind:
- Use high contrast colors to attract users’ attention towards actions you want them to perform. For instance, Get Spotify Free stands out and acts as a visual cue for the users. The placement, the color and the size intuitively answer the question in the user’s mind- “where should I click?”
- Create a consistent palette for your CTAs. Don’t create rainbows on your application just because you want a button to stand out.
- Nearly 8% of the U.S. male population is color blind. Keep in mind their experience of visiting the website while designing the CTAs.
Pro tip: Use your brand’s color for the primary CTA to build awareness and improve engagement.
Follow the hierarchy
Misplaced CTAs are worse than badly designed CTAs.
CTAs carry information. But if the information flow is disjointed, people are likely to get confused. So, understanding the hierarchy and designing accordingly is crucial for good CTAs.
The CTAs should mimic a conversation between the user and the application. For instance, if you want a user to download your white paper, you can’t say ‘Download now’ before ‘Read an excerpt’. So always keep the hierarchy that users expect to have on the application.
Pro tip: Above the fold or below the fold doesn’t matter. Just ensure that the CTA is present at the moment the user is ready for a buy-in.
Test your buttons
After all that you’ve done, you can never be sure if the CTA that you’ve designed is good or bad. Usability testing is the only way to know what’s going on in the users’ mind.
So, if you’re worried about which-
color works best for your users — test it.
placement drives most actions — test it.
text is more intuitive — test it.
Test the heck out of your CTAs. Do A/B testing, conduct user interviews and dive deep into data to understand what works and what doesn’t.
Pro tip: There are various online tools available to test your CTAs. Use them to test various aspects of your design.
A good CTA is a combination of 4 things: placement, shape/size, copy and color. If these 4 aspects are aligned with each other, your CTA will be a success.
Remember that people don’t sign up on mobile apps or browse web pages to look at CTAs. They have a goal in mind which they are looking to fulfill. CTAs help fulfill that goal. CTAs are just a small part of the big machinery of designing applications. And that’s what makes them interesting.
Like American poet Emily Dickinson said, “If you take care of the small things, the big things take care of themselves.”
This blog was originally published on Humble Bits — a blog by Quovantis.
