CTAs that convert

​If your website or app sells products, generates leads, collects sign-ups, or has users take action—fine-tuning your call to action, or CTA, should be at the top of your to-do list. 

A call to action, or CTA, is a button, banner, or link intended to persuade the user to click or take the desired action. Most people probably don’t realize how many CTAs they click per day, from pressing “order now” on a food delivery app to “shop the collection” on a retail site. 

As one of the many elements on a webpage, CTAs shouldn’t be an afterthought. They can make a significant impact. When done right, your CTA can mean the difference between a customer taking action or not. 

Whether you're peppering them throughout your pricing, product, or landing pages, a well-designed CTA button clarifies what people will get and helps increase conversions. Here's all you need to know to create a better call to action. 

10 tips for creating a high-converting CTA 

1. Offer compelling copy 

A crucial aspect of your CTA button is the copy.  It has to compel your customers to click. The best way to do this is by appealing to their self-interest. So make sure you clearly state what your visitor will get if they click your CTA, whether that’s a discount code, a quote, or more information. 

Source: Tesco Bank 

Tesco Bank demonstrates this well by thinking outside the box. Most common CTAs are more generic, from “start here” to “register now.” This financial services provider makes their copy more compelling and unique by being specific and speaking to a common issue—the cost of living crisis. The copy also evokes curiosity as the formatting forgoes the traditional, action-oriented phrasing. 

The text here tells you enough but doesn't go into specifics, triggering your curiosity into what help they can offer—boosting your likelihood of clicking. 

2. Prioritize clarity and brevity 

CTA copy should be brief and get to the point. Depending on who you ask, experts recommend using no more than two or three words, but you can also consider a longer phrase if it works for your scenario or if you want to stand out. 

And remember, a great CTA will make what people get by taking action obvious. If your landing page features a form for booking an appointment, consider having your CTA read “Book appointment” rather than “Submit.” Unless there’s a clear explanation on the page due to graphics or extra copy, generic CTAs don’t tell your users anything about what will happen next. Clarity leads to conversions.

Source: Evernote 

Note-taking app, Evernote, pus this into practice with concise, side-by-side CTAs on their pricing page. While each column has a plan title, their CTA buttons clarify by reiterating which plan you’re selecting in just two words. 

3. Make it action-oriented

Your CTA button should begin with an action verb or what some refer to as a trigger word, like “Get” or “Download.” Here are some more examples: 

• Get my free quote
• Download now
• Open my account
• Go to checkout
• Get exclusive access
• Swipe up 
• Claim your code 

If you have difficulty figuring out what your call to action should say, ask yourself—what would your user say or think? Pro tip: Ask your users what they think. 

If you think they'd say, "I want to compare prices," your CTA might look like, "Compare price."

Your action verbs and text can vary based on your organization and industry. The CTA copy for a retailer will likely differ between a B2B organization and a non-profit. 

Source: The Philadelphia Inquirer 

After spending time on the Philadelphia Inquirer website, the CTA pop-up appears for users to sign up for the morning newsletter. And while some news outlets require paid subscriptions, this CTA clarifies that you’re receiving a free subscription. And for those not interested, the pop-up offers an exit for users. 

4. Speak in the first person and active voice 

Studies show that changing the CTA copy from the second person tense (i.e., Get your free template) to the first person (i.e., Get my free template) can bump click-through rates. 

Why does the first person work? Because it presents the action from the point of view of the user. Highlighting tenses can be an excellent A/B test. Compare the conversion rate for the second-person copy to the first-person to see which resonates with your audience. 

First-person tense shouldn’t be the only element you consider; merge it with active voice for a dynamic combo. Active voice increases specificity and encourages the user to take action. Conversely, passive voice creates ambiguity or vagueness. 
 

Source: Rothy’s 

Retailer Rothy's features a CTA pop-up that embodies this. It offers shoppers a discount leveraging first-person copy with "I'm in." This is an interesting example of breaking the rule of foolproof clarity. Rothy's shows they understand that their buyer knows how to use the internet, and this isn't the first time they've seen a pop-up. Instead of giving them explicit CTA instructions like "Sign up for discounts and emails," they trust that the customer gets what's going on here, and they can fast forward through the formalities. Breaking the rules converts well when you know your audience well. 

5. Create a sense of urgency

Creating a sense of urgency creates great results when implemented into CTAs. This can apply to limited edition products or a short-term promotion.

Source: Helen Keller International 

In the case of emergencies or crises, CTA copy should build urgency. Non-profit Helen Keller International offers aid to those impacted by the global food crisis as one of its many causes. The above CTA button is one of the first things you see on their landing page. It shows that the time to act is now—likely evoking emotion from site visitors. 

While the CTA text includes “urgent” in its button copy, you don’t have to do the same to persuade your readers to move fast. You can also create a subtle sense of urgency by adding the words “now,” “don’t wait,” or “today” to your CTA copy. 

6. Include extra information (if applicable)

Sometimes more than three to five words are needed for a CTA. You should add more information to set the right expectations for your visitors and assuage hesitation. These extra tidbits can be placed right below your CTA button. Examples might include:

• Objection-reducing info (i.e., no credit card needed to get started, try a free trial)
• Significant benefits (i.e., free 2-day shipping)
• Being upfront about the fine print (i.e., requiring a minimum purchase for a discount) 

Source: GoDaddy 

Web-hosting organization GoDaddy has a homepage with many CTA buttons, but the one that stands out is “start for free.” The copy also anticipates a common concern that users must give their credit card information to sign up, and GoDaddy clarifies that a credit card isn’t required. 

However, use it with caution. Avoid wasting valuable CTA button real estate by making too many clarifications. Stick to what’s the most important for getting the reader to take action. Any further clarification should go below, not in the button copy.

7. Make it impossible to miss and easy to find 

Even if you’ve crafted compelling CTA copy with a great background color, it won’t matter if nobody sees it. Ensure your button is impossible to miss. It should be large enough to stand out on the page but not so large that it looks obnoxious or like spam. If your visitor is ready to take the next step, they shouldn’t have to hunt to find your CTA button, as they may get confused and leave. 

CTA buttons should be placed where your users will look next. Ideally, above the fold or in the upper area of a page. For example, you might have the same CTA multiplied throughout the page or implement a frozen navigation bar, especially if you have a long page with abundant information. Following the natural flow, most sites or apps will add a CTA button under the content users are supposed to interact with. 

Being intentional about placement goes for mobile, too. If you're using a mobile-responsive landing page, it is recommended that your CTA appears above the fold on mobile devices as well. Above the fold means where you first land on a webpage without scrolling. 

Source: 1-800-PACK-RAT 

On moving organization 1-800-PACK-RAT’s homepage, their “Get a quote” button is one of the first things your eyes gravitate toward, partly due to the size of the text and contrasting colors. This button is featured in multiple areas on the same page, so users don’t have to travel far to click on it when they’re ready. 

Source: Eccentric Engine 

The automotive organization Eccentric Engine also embodies this concept well, with its CTA button, “Get Started.” With the bright orange background, it’s one of the first things you see on the homepage and in the navigation bar. This CTA is also sprinkled throughout the rest of the page while the navigation bar is frozen, so as you scroll down, the bar follows you so you can access it at any point. 

8. Use contrasting colors 

Designers and marketers are looking for the highest converting color, but no universal color is best for conversions. And what works for your competitor might not work for you and your brand. For every conversion rate optimization expert who claims that a bold, eye-catching red is the best color for a button, another says that green is the best because it signifies "go." Instead of hunting for the magic combination, remember that people are more likely to notice and remember something that stands out from everything else around it. 

Plus, contrast isn’t just about complementary colors on the color wheel; it’s about value, too. A light button won't stand out against a light background like a dark button. On top of that, the copy needs to stand out against the button. Remember that your audiences aren’t all alike, and some may have different accessibility needs—which will influence your color choices. 

Source: HelloFresh

HelloFresh, a meal-kit organization, demonstrates this well with its pink background and complementary green CTA. While most of the copy is black, the CTA stands out even more with white text. 

9. Don’t double the CTA (usually)

People are less likely to act when presented with more choices. Psychologists call this choice overload. Understanding all the information, evaluating the options, and comparing them against each other takes so much mental effort that it's easier to choose nothing and move on to something else.

Therefore, having multiple CTAs compete against each other for attention is generally frowned upon. For instance, a page might feature two side-by-side CTAs with identical colors and formatting, but one button says “Register here” while the other says “Talk to an expert.” The user might be confused about which button to click, especially if there’s insufficient context and the buttons look too alike. 

To mitigate any user confusion, ask yourself: what’s the most important action I want people to take on this page?

The way you address the answer to this question will be different depending on the kind of page you’re designing. Sometimes, including more than one CTA button on a webpage makes sense. For example, your homepage might have one button for signing up and another for signing in.

If you need to offer multiple actions, guide users to what you want them to do most. Prioritize multiple CTAs visually by giving weight to the most important conversion pathway. Your primary CTA should always be the most visually striking, while the others could be more subtle.  

Source: Canva 

Graphic design platform Canva puts this into practice on their plans and pricing pages. When looking at the two side-by-side CTAs, your eyes are naturally drawn to "start designing," right? With "browse templates" blending in more with the background, it's evident that the CTA design encourages you to take the plunge and start creating instead of spending time browsing. However, Canva realizes that some of its audience isn’t ready to sign up for an account or start designing. The secondary CTA offers an option for less-committed viewers and minimizes the chances of them bouncing—which is a win! 

10. Test and optimize your CTAs regularly

To ensure your CTAs are as persuasive and visually appealing as possible, test them regularly with users. Even minor changes can have a significant impact, whether you’re changing the copy, size, color, placement, or style of your call to action button.

Use the Human Insight Platform to get feedback directly from users and discover why your CTA changes work better or not. 

For example, our UX team wanted to test the onboarding flow for our network of test participants and tested three CTA versions: 

• OK, download the app 
• Got it! 
• I understand 

The goal was to create a CTA button encouraging users to re-read the body copy for clarity. While "Got it!" proved the most popular choice, an ambiguity appeared: a user might mistakenly read the CTA in the past tense. Instead of signing up, they might leave the page instead of downloading the app. 

The team realized the solution: change the button to "Go to app store" instead. After making this change, our researchers found that most test participants successfully downloaded the UserTesting app and completed the flow. A solution that was only possible thanks to usability testing.

​