Call to Action Guide
Understand the basic principles of a call to action. By the end of this article, you should be able to understand how attention actually works and turn your website or app visitors into leads.
Digital products compete for limited user attention. Modern economics increasingly revolves around focusing a person s attention, and one element can make a difference. This is why call to action buttons play a fundamental role in any interface.
For those unfamiliar with the term, here s a quick explanation from Investopedia:
Call to action (CTA) – is a marketing term for the next step a marketer wants users to take. CTA may have a direct sales link.
Simply put, a CTA is an action that you want your website visitors to take.
Let me give you some tips to help you avoid the most common mistakes, as well as some descriptive examples that analyze how attention works.
Attractive text
The power of words is beautifully illustrated by Brian Clark of Copyblogger. Social psychologist Ellen Langer asked to be skipped out of line to the photocopier. She tried three different ways of asking:
- Sorry, I have five pages. May I use a copier? – 60% said “okay”
- Sorry, I have five pages. Can I use a copier because I m in a rush? – 94% said “okay”
- Sorry, I have five pages. Can I use a copier because I need to make multiple copies? – 93% said “okay”
The trigger word “because” is so powerful that it doesn t seem to matter that the named “reason” sounds childish.
The highlighted result is that some words convince people more effectively than others. According to experts, using certain words that evoke emotion, you convince readers with your text.
For example, Slack uses the double meaning of the word free! Not only free, but also freedom of movement and choice affects the subconscious behavior of the user.
Another strategy that many sites use in call-to-action text is the tone of the message. Action verbs represent a simple, action-oriented approach to encourage the user to take a specific action because they answer the main question: Why should I press this button?
The most successful companies use phrases such as “Try it for free ”,“ Learn More ”,“ Get Early Access ”,“ Get Started ” and many others, as well as increasing conversions by adding value to the text of the call to action.
I have sketched out a few general phrases and also took a few examples from my previous article.
Contrast color
Call-to-action buttons are the best demonstration of the Restorff effect. The Restorph effect, also known as the Isolation Effect, predicts that when there are several similar objects, the one that is different from the rest is most likely to be remembered.
This is the most important reason why you should make your call-to-action button stand out from your other buttons.
I have sketched out a few general phrases and also took a few examples from my previous article.
Contrast color
Call-to-action buttons are the best demonstration of the Restorff effect. The Restorph effect, also known as the Isolation Effect, predicts that when there are several similar objects, the one that is different from the rest is most likely to be remembered.
This is the most important reason why you should make your call-to-action button stand out from your other buttons.
Color is the number one factor affecting isolation when it comes to buttons. Always try to make the primary action button more visible. Use a contrasting color to grab the user s attention.
First, you need to make sure your colors, images, and typography work together for the button as an element. Readability, legibility and contrast are very important and you should check them beforehand.
A great tool to help you with contrast checking when designing is the Stark plugin.
As you ve noticed, fancy gradients or vibrant colors don t always pass the contrast test according to the Stark plugin!
In addition, the contrast methodology does not only apply to the button element. The call-to-action button should have sufficient contrast and be visible in comparison to the entire interface.
A Sketch app landing page is a great example of the importance of contrasting a call to action versus page content. Not only did they take into account the branding of the product, but they also managed to create a bold call to action button that grabs the attention of the majority of visitors.
Simply put, such a button cannot be overlooked!
Size matters
Size and position play a fundamental role in the visibility and accessibility of a call to action. A significant number of variables determine the correct size of the button.
A study of the size of the buttons and the distance between them revealed a standard suitable for most users, including the elderly.
Research shows that the highest accuracy was seen when using buttons sized from 42 to 72 pixels… This means that 42 pixels is the minimum and 72 pixels is the maximum button size that is most optimal for users.
Large buttons grab most of the user s attention. This is critical to absorbing page content. A button that is too small can seriously affect accessibility. Few things are more frustrating than a button that is too small to press.
Mobile interfaces face another common problem. The term “Thumb Design” (Designing for Thumbs) was suggested by Scott Herff. This means creating interfaces that are most comfortable to use in a natural, wide arch of the thumb.
Obviously, the call-to-action button should be user-friendly and accessible. Thus, given thumb zone heatmap, the designer can easily select the most appropriate position for the call to action button. Within the natural area of the application, the chances of clicking a button can be exponentially increased.
To go with the flow
The direct path that the user will follow while consuming the page content is very important. By arranging text and buttons according to the natural flow of reading, you can direct visitors to your call to action.
The above statement matches the popular Fitts law… The time to reach the goal depends on the distance to it and its size. Thus, by placing the call to action at the end of the user flow, you eliminate the cognitive and physical effort to convert.
By taking a close look at your attention heatmap, you should be able to identify the most common eye movement pattern. F-shaped pattern… Recent studies of eye movement show that the F-shaped scanning pattern is actively used on both desktop and mobile devices.
This engaging reading pattern is more dependent on human behavior than technology. It indicates that the call-to-action button is “Search” could be located in the lower left corner.
In the example below, Airbnb s designers take a different approach. They take advantage of Z-pattern and Gutenberg diagrams… The call-to-action button is located in the Terminal area to avoid distraction and encourage action.
When the user reaches the bottom right of the form, there is a break in the reading or “page scanning” process and must take some action. This is the perfect place to insert call-to-action elements.
conclusions
Overall, call-to-action elements have a huge impact on company conversions and are deservedly considered the most important UI element. By keeping a number of design principles in mind, you can highlight the call-to-action button and draw the attention you need.
You don t have to reinvent the wheel, and sometimes the best way to get good results is to learn from industry leaders. Taking a closer look at the most successful digital companies and how they structure content around their call-to-action elements will help you identify the main patterns that work.
Thanks for your support!
If you liked the article, please like it.
Contact the author: ? Twitter, ? Dribbble or ? LinkedIn