Content
How to Create Effective Calls to Action
December 17, 2024
10 mins
It is the Call to Action (CTA) that encourages the user to take the action that leads to conversion. It is important to consider not only the text of the call to action, but also how and where it is located on the page, what colors are used, and what emotion it evokes.
In this article, together with Anton Chebotarenko, Head of UX/UI at Promodo, we will consider what Call to Action is and how to make a call to action that will help you increase sales and make customer interaction more effective.
A CTA in marketing is a short text or button that encourages users to take a specific action on a website: make a purchase, subscribe to a newsletter, or fill out a form. They are an essential part of any marketing strategy aimed at increasing conversions.
The user journey plays a key role in creating an effective call to action. Regardless of what product you are developing, each conversion path always ends with the target action - clicking on the button.
The main task of a UX/UI designer is to design the user's path so that it is easy and convenient for them to perform the target action. If we are talking about a landing page, we gradually lead the user to the CTA button through proper storytelling and marketing frameworks. For online stores, this means having the right navigation structure and product pages that make it easy to add a product to the cart and complete the order.
Anton Chebotarenko emphasizes that the location of CTAs is critical for conversion. Effective CTAs should be placed in a way that is easy to see and easy to reach. This is especially important for mobile devices, which are usually controlled with the thumb.
The illustration shows a diagram of the accessibility of a mobile device screen. The red zone is the area that is difficult to reach, the orange zone is the area where buttons can be visible but not always easy to press. The green zone is an ideal place to place a CTA, as it is the most accessible area for users.
The trend towards larger screen sizes requires design adaptation so that buttons remain user-friendly. This applies to both fixed “Buy” buttons on product pages and CTAs at the bottom of banners.
Anton Chebotarenko
Head of UX/UI at Promodo
CTA placement is of great importance. The call to action should be placed in a high visibility area:
Highlighting CTA buttons is always a balance between prominence and harmony with the page design. We advise you to pay attention to the following aspects:
According to Anton Chebotarenko, there is a lot of information and advice on the size of CTA buttons, and most often they emphasize the convenience of thumb pressing.
For mobile devices, the optimal button size varies from 45 to 57 pixels, which is slightly larger than many guides. However, the most accurate and useful guide is Apple's, which recommends that the button size (height and width) should not be less than 44 pixels.
This size ensures comfortable use and allows buttons to remain sufficiently visible and functional on both mobile and desktop platforms.
Rounded buttons usually work better than buttons with sharp corners. However, it all depends on the niche. For example, in industries such as fashion, jewelry, or décor, where sharp corners are part of the overall style, using sharp shapes in CTAs does not reduce conversions.
Anton Chebotarenko
Head of UX/UI at Promodo
In the illustration below, you can see two shapes: pointy and rounded. These shapes are often associated with different emotions on a subconscious level. Sharp angles can evoke feelings of tension or dynamism, while rounded shapes are a symbol of calm, harmony, and safety. Using such psychological approaches allows designers to choose the best shapes for CTAs based on users' subconscious reactions.
Illustrations from the Buba-Kiki test. Most of the participants in the experiment called the left figure “kiki” and the right figure “buba”.
Anton also draws attention to several changes that can significantly affect conversion, but are often forgotten:
Hover effects for desktops not only make the interaction with the button more dynamic, but also confirm its clickability.
Explanatory text next to the CTA can help the user understand what will happen after clicking the button, which reduces uncertainty and encourages more clicks.
Micro-interactions and animations: small visual effects can draw additional attention to the button and make the interaction more enjoyable for the user.
Icons next to the text help to read the CTA better and make it clearer at first glance.
The strong Call to Action text should be clear and concise. An effective call-to-action should answer the question “What will the user get by clicking the button?”. Therefore, it is important to use specific action words, such as:
“Buy now”
“Get a consultation”
“Download for free”
It is important to avoid using imperative style (e.g., “Do it”, “Buy it”), as it can be perceived as aggressive and reduce the effectiveness of the CTA. Instead, it is recommended to use infinitives: “Make”, ‘Buy’, ‘Sign up’, ‘Order’. This approach sounds softer and causes less resistance from users, while maintaining the call to action.
Anton Chebotarenko
Head of UX/UI at Promodo
The key point is the logical correspondence of the CTA text to the content of the block to which it belongs. For example, it is appropriate to use the “Buy” button on the product page and the “Checkout” button in the shopping cart. This allows the user to understand what action they are performing.
In the case of lead generation pages, the clear Call to Action text should change depending on the context. During storytelling, you can adapt the text on the button to a specific stage of interaction, but you need to maintain a clear understanding of the final target action.
We have an article about storytelling if you’d like to learn more.
To be more precise, a call-to-action is not necessarily a button. It can be any call to action that encourages the user to perform it.
We can have call-to-action titles based on the 4U formula (usefulness; uniqueness; ultraspecificity; urgency), or a description of the CTA. For example, if you have a contact form, its title can be an appeal: “Fill out the form to get...”.
Anton Chebotarenko
Head of UX/UI at Promodo
This principle can be applied not only to buttons, but also to text on pages, forms, and other elements that encourage the user to perform a targeted action.
The key metric for evaluating the effectiveness of a CTA is Conversion Rate (CR), the percentage of users who performed the desired action after clicking on the button. However, it's worth remembering that a decrease in CR is not always related to the CTA - other factors, such as content or page navigation, can also have an impact.
This principle can be applied not only to buttons, but also to text on pages, forms, and other elements that encourage the user to perform a targeted action.
For a more accurate assessment of CTA performance, we recommend using the Click Through Rate (CTR) metric, which shows the percentage of clicks on a button out of the total number of page views. CTR is a more objective indicator of the effectiveness of the button itself and is used when testing different CTA variants.
Anton Chebotarenko
Head of UX/UI at Promodo
One of the biggest mistakes is using buttons that are too small. If the button is too small, users will simply not notice it or find it difficult to click on it. Too little text on the button also reduces the effectiveness, as it can be invisible or incomprehensible.
Anton Chebotarenko
Head of UX/UI at Promodo
Another important mistake is text oversaturation. An ideal CTA should contain a maximum of 2-3 words that clearly call to action. Anton advises to avoid complex or long phrases that can be confusing and reduce the desire of users to click on the button. Here are common mistakes that irritate users:
Excessive aggressiveness in the text: when the call to action is too intrusive, it can cause a negative reaction and push away a potential consumer.
Too many CTAs on one page: oversaturation of CTAs with buttons or calls to action creates chaos and confuses the user, reducing the likelihood of performing the desired action.
Pop-ups with CTAs at the wrong time: if a CTA appears before the user has received the necessary information, it creates a feeling of pressure.
Anton Chebotarenko categorically notes that deception in CTAs is one of the biggest taboos. For example, writing “Get it for free” when the user actually has to buy or pay for something is a big mistake. This tactic not only fails to meet customer expectations, but also undermines their trust in the brand. It's important to be honest and transparent so that the CTA doesn't cause frustration and prevent conversions.
No matter how much you optimize the user's conversion path, if you set up call-to-action elements incorrectly, conversion will decrease significantly.
Anton Chebotarenko
Head of UX/UI at Promodo
This emphasizes the importance of CTAs at all stages of product design. Even the best UX can be flawed by an incorrectly chosen call to action.
You might want to read our article about how to create pop ups that won’t annoy the users.
These elements of CTAs often fail to deliver results:
Small text on the CTA button: if the text is too small, it simply does not attract attention and is invisible to the user.
Unclear call to action: vague or generalized phrases like “Click here” do not give the user a specific idea of what will happen after clicking.
Invisible CTA buttons: insufficient color contrast, poorly selected size or shape of the button reduce its visibility and attractiveness to the user.
CTA button accessibility for users with disabilities is an important aspect of design:
Contrast between text and background: For users with color blindness, such as color blindness, it is important that the text on the button has enough contrast with its background. This allows for easy perception of the CTA.
Text size: the text on the button should be large enough - we recommend using a font of 16 to 18 pixels. This ensures comfortable reading for all users, including those who are short sighted.
Alternative text: for users who use screen readers, it is important to add alternative text to CTA buttons. This allows you to convey the meaning of the button even without eye contact with it. This task is usually performed by developers.
CTAs that work.
A simple example with a Buy Now / Contact Us button on the home page can increase conversions by 15-20%. This is an effective CTA because it is located in a high visibility area and encourages a specific action.
Why it works: a clear call to action, convenient location at the top.
Adding a “Get a consultation” button next to a detailed product description allows users to quickly get the information they need, which increases their willingness to buy.
Why it works: A logical CTA after important content helps users make a quick decision.
A button on a banner is accompanied by an icon and a contrasting background to increase visibility.
Why it works: clear text supported by a visual icon that increases click-through rates.
The CTA on the banner is placed below the headline with key statistics. This helps to increase interest and lead the user to perform the targeted action.
Why it works: A clear headline and data create trust, leading to a logical path to clicking the CTA. The right content structure increases the likelihood of a click.
An effective call-to-action (CTA) is more than just a flashy button. It's based on an understanding of user psychology: from color and size to text and visuals. A CTA becomes not just a design tool, but a powerful conversion engine that turns clicks into real business results.
UX/UI Expert at Promodo
I have over 6 years of experience in designing CRM and HRM systems, e-commerce, landing pages, and mobile applications. As a UX/UI designer, I develop strategies and innovative design solutions that help improve user experience and result in positive changes in key business metrics. As a mentor, I teach new designers how to create innovative and well-reasoned design solutions, share my experience, and help them avoid mistakes in interface design.
You may also like
Choose quality and trusted services to improve the presence of your company on the Internet, and feel free to contact our UK team if you have any questions.
We at Promodo are ready to help you improve your performance across all digital marketing channels.
Get started
.svg){kind=logo}
