This article is not a guide to designing buttons. It’s more of a practical manual to creating an effective CTA. A comprehensive approach to creating a call to action will guarantee that your interface elements are clickable even if you roughly draw them by hand.
***
Ask a designer what “call to action” means, and he’ll tell you it’s a button, an interactive interface element. It’s a way for the user to perform target actions, such as purchasing goods, subscribing to updates, or requesting assistance. Then the designer will start telling you what CTA buttons should look like.
This is a great way to create a call to action that doesn’t work.
Wait, what’s wrong with it?
Well, imagine a coffee machine. It has buttons that also call to action, namely drinking coffee. But no one will push them unless they want some coffee. And if you’re thirsty for a cup of java, you’ll find the button regardless of where it is or what it looks like.
A call to action is not a button. It’s an invitation to get what you need. When a customer presses a button, they don’t give a second thought to its vividness or brightness, unlike the designer. They are only thinking about their goal: to get a cup of coffee.
The designer’s main objective is making people interested and willing to reach their goal, not just guiding them to a target action by their hand. CTA is just one of the ways of reaching that goal, but it’s not the goal itself. Seems obvious, but what happens in reality?
Designers think of buttons as merely design elements, focusing all the user’s attention on CTAs. “Hurry the hell up and buy our coffee!” They generate an aggressive message and make sure it’s an instant attention grabber.
A good call to action should create a desire to have a cup of hot, fragrant coffee right away. The real objective is coffee, not the banner saying “We have coffee.” Understanding this difference is the key to creating a successful CTA.
Call to action is a set of marketing tactics consistently implemented in the interface design.
Unless the UI and UX are wholly devoted to making the goal attractive, the CTA will not be efficient. The button itself does not encourage anyone, no matter how well optimized it is.
Designers with no knowledge of fundamental CTA creation principles expend plenty of effort polishing buttons and worrying whether they should be rounded and at what degree. This venerable pursuit has nothing to do with CTA efficiency. A designer who understands the importance of a comprehensive approach in creating a CTA doesn’t worry about button shape, color, or type. It’s the last issue on his or her agenda.
A comprehensive approach means understanding the basics of visual marketing and user psychology. It means keeping track of all the factors that affect CTA efficiency.
Here are the most essential:
If the user dislikes the design or finds the offer uninteresting at first glance, they will leave the page before ever getting to the CTA. Good design makes people stay on the page, explore the content, and consider the target action. If the offer is made unattractively, no power on earth will make the user perform the action.
To successfully attract users, you need a deep understanding of your target audience’s tastes and preferences.
The first prerequisite for an effective CTA is good UX:
- simple and understandable navigation
- no obstacles
- predictability
The user’s way from the entry point should be as simple, intuitive, and logical as possible. When it’s immediately clear what is being offered and what needs to be done, it’s much more likely to encourage a positive response.
The longer the way to the CTA, the more registration forms, surveys and other obstacles there are on the way, the fewer users will make it to the button. The more complicated the call’s action, the more motivation you need.
This is about the momentary impression made by glancing at the page. A cluttered page with too much content, an overabundance of elements and highlights confuses and frustrates users. Many online stores display a dazzling array of “Buy” buttons. Product photos get lost among the calls and ads, there’s no space around the elements. All this creates an impression of clutter and makes the store and its products appear untrustworthy.
A clear, minimalist design is the best solution, being easy on the eye.
Plenty of CTAs on one page is a good way to scare away users. Ideally, there should be one effective CTA per offer. If there are many offers, a better idea is to propose a transition and showcase each separately. This will allow you to keep the design uncluttered and leave the “breathing space” around the elements. If you do need to place several CTAs on one page, create a visual hierarchy of highlights, emphasizing the main offer and call and downplaying the secondary offers.
Webpage content must work toward the main goal, showcasing its advantages and guiding the user to the CTA block. Content presentation is the deciding factor in choosing whether to perform the target action.
The famous marketer Nick Patel has found that placing the CTA button in the first block decreases conversion by 17%. The user has had no time to explore the content but is already asked to perform an action. You should start by providing some information about your offer so that your users can form a positive impression. This is especially important for business offers and services.
However, not all offers require detailed descriptions. Many products and services should be presented right away. In a case like this, how do you create a CTA without losing the precious 17%?
Let’s take a look at how Apple does it.
What’s the first thing you see? Not the call to action, that’s for sure. Where are the bright buttons urging you to “buy now”? Where are the bold fonts?
Here, Apple smartly shifts the highlights. It’s not the CTA that is highlighted.
The call to “Shop the collection” uses a small, humble font, the text itself is as simple as it could be. The actively aggressive influence here is achieved through color.
Apple products don’t need an explanation. But if your offer can also be showcased through effective imagery, go for it: start with showing your product accompanied by an inconspicuous CTA. In cases where you can’t rely on visual presentation alone, the CTA should follow the main offer description.
The CTA block is an organic part of the design. All the elements, including the buttons, must match the chosen style, conform to the visual hierarchy, and agree with one another. The visual features of CTA buttons and the accompanying text depend on the goals and objectives of your website (or app) and the preferences of your target audience, so discussing which buttons are “better for conversion” is pointless. It’s not the buttons that provide conversion but proper marketing and good design targeted at a specific group of users.
And no, don’t draw buttons by hand unless it’s in line with the overall concept. No matter how much you want your CTA to stand out, it must never go against the general style. The CTA button’s color should contrast with the background so that the users won’t have to go looking for it all over the page. It’s absolutely not acceptable to place CTA buttons in unusual locations just for the sake of creativity.
The user’s goal and top priority is whatever makes him perform the target action. When he subscribes to a course, he’s thinking of improving his education. When he clicks the “Buy” button, he’s thinking of the product. The picture that reinforces the necessary mental image should be placed near the CTA button.
CTA is not the goal!
https://dribbble.com/shots/14210253-Landing-Page-Wendy-s-Granny-Chocolate
Any numerical information about benefits must also be located visually close to the CTA button and be sufficiently highlighted.
A convincing call is always laconic, comprehensible, and simple. It’s best to use active verbs, I-statements, strong words, reward triggers and emotional triggers. If appropriate, you can use simple instructions and “before” and “after” demonstrations.
Here are the main types of text calls (trigger + CTA):
Visually, the same principle applies: more emphasis on the trigger than the CTA button.
The text call must be based on market research and tested in advance.
A design that triggers a deep emotional response is the key to high conversion rates. Recall the Apple example above. The color chosen by their marketers and designers is not just red. It’s blood-red, which makes people somewhat anxious and subconsciously scared. Now add the call to save lives. The CTA emphasizes a noble mission, not purchasing the product. It’s a great marketing solution with beautiful design implementation.
Learn more: Emotional Design
CTA is just a cog in a massive machine. If the machine works (market analysis done, information content carefully chosen, design concept created), the CTA will work as well.
Users don’t access webpages for the buttons. They are attracted by the offer, as long as it is presented well: easy to understand, appropriate, good-looking, emotional, and logical. We know it’s much easier said than done. In reality, it involves a lot of factors that have to be figured in by the marketers, designers, and developers. The best solutions are usually the result of teamwork. Nevertheless, understanding the principles behind creating CTAs will help any designer to create a converting design with clickable elements.
