But only one in seven of those call to action tests produces a statistically significant improvement. When it does, however, the average increase is 49%.
The potential is there, even though most people have no idea what to test. When they stumble upon a winning combination of text, size, color, font, and location, they see significant conversion increases.
It’s obvious that call to action buttons are important, so let’s learn how to design and test them the right way.
Calls to Action Exist in the Context of a page
When it comes to web pages, no element lives in vacuum. Each is surrounded by other elements of varying size, importance, and message. All play a role in the success or failure of that element.
It’s no different for calls to action. The rest of the page plays a huge role. This is what Peep has to say about it:
“Serious gains in conversions don’t come from psychological trickery but from analyzing what your customers really need, the language that resonates with them, and how they want to buy it. It’s about relevancy and perceived value of the total offer.”
To create a strong call to action, learn about your customers and their needs. Offer relevant and valuable products in a language that resonates with them. Seems easy, no?
Well, no. Understanding your customer is the first part—and a critical one —but it’s also just the start.
First, let’s look at what to do with the info you have and how it affects the design and copy of CTA buttons.
Designing a Call to Action Button
Look at the homepage of Spotify. Where should I click?
Or Misfit Wearables. Where am I suppose to click now?
In both cases, it’s clear where should I click. The high-contrast color of the call to action attracts attention. It stands out from the rest of the page and acts as a visual cue to answer the question, “Where should I click?”
It’s impossible to say which color converts the best. Similarly, there’s no “guaranteed best” font type or size for a call to action (or where it should be located on the page, something detailed later.)
While a streamlined design and high-contrast button may capture your attention, whether you click on that CTA depends on how the call to action works with other elements, especially copy.
Call to Action Copy: Text that Matters
The copy of the call to action (and surrounding copy) is often the deciding factor on whether you’ll click. Its role is to help visitors make up their mind about why they should click on the button. It should also give users an idea of what’s going to happen next.
Generally, generic words like “Download” or “Submit” are less likely to generate a meaningful lift. Why? Because they don’t provide value or relevance.
This is what Neil Patel has to say about it:
“So, what button copy should you use? Click here, buy now, and order now are a few call-to-action texts that you see around. I’ve found that generic phrasing, like the words above, don’t really impact conversion rates by much. If they do, then there are other elements on your webpage that need to be tested.”
And it’s not just the copy on the CTA button either. The words of a call to action benefit from surrounding text that helps tell the larger story. (Note: You can check out more than 20 call to action examples in another post.)
For example, the blogging platform Medium speaks the language of writers, who are, quite clearly, their target audience. They tease the potential audience (surely every writer’s desire) and add clear call to action text—“Start writing”:
Basecamp is a hugely popular project management tool, but there are a lot of similar solutions on the market.
So how do they stand out? They tally the huge number of companies already using it, and the number of projects finished.
To top it off, they add that it’s free to try. Even if I had my doubts about their product before, seeing the numbers and the ability to try it for free made them disappear.
The call to action text emphasizes the free-trial component:
VelocityPage is a front-end page creation tool for WordPress. It’s clear what they offer. But I would like to see it in action before committing, and the CTA text of “Try the demo now” makes the next step relevant and crystal clear:
In short, there is more to a great call to action than button color or copy. The surrounding text makes a huge difference. The story you tell on your website matters.
Here’s what former CXL editor Tommy Walker had to say about call to action copy:
“I [don’t] want to mislead you into thinking that changing the button from “Buy Now” to “Sign up Here” at the bottom of a sales page makes a lick of difference when everything leading up to that final call to action doesn’t build some kind of anticipation in the reader’s mind.
[…] the best calls to action aren‘t effective just because of your word choice on the button. No no, the best calls to action are the ones that promise your story only gets better after you sign up.”
Before you start testing any combination of words, however, you’ll increase your chances of success by developing a research-driven hypothesis.
How to Create a Hypothesis for your Call to Action
There are two main elements to all CTA buttons: design and copy. We’ve covered the role they play; shared examples of how to use them; and the importance of knowing who your potential customers are.
Now it’s time to nail down your own call to action hypothesis.
Michael Aagaard has run button tests for years. After seeing test after test, he’s come up with two questions to help you write the text for your call to action button:
- What is my prospect’s motivation for clicking this button?
- What is my prospect going to get when they click this button?
Answers to these two questions are the basis for the CTA button copy and the surrounding text.
Take out the Guesswork with Feedback Loops
You don’t need to be a magician to answer those questions for your website. Instead, use feedback loops to get the data you need.
Don’t forget to segment your customers first. Different segments have different needs. What works for one group might not work for another.
And Remember: There is no point in guessing what your customers think, so please just go and ask.
Case Study: The Impact of Research on Call to Action Design
A Scandinavian chain of workout facilities wanted to increase memberships. They set up a PPC campaign to encourage potential customers to sign up. That process required clicking a button with a call to action.
In the control, the call to action text read “Get your membership,” while a variation read, “Find your gym & get membership.” The basis for the test was consumer research: The location of the gym, they learned, was a critical factor in decision-making.
The results speak for themselves: the gym got 68% more conversions by writing a call to action that addressed users’ immediate concern of location.
The call to action copy was also clear and succinct—after clicking the button, users knew that they could browse potential locations and, if they found a good fit, sign up.
Read the full case study here.
Why Copying Others Doesn’t Work
Highrise provides web-based CRM software to small businesses. They ran multiple tests to find the call to action phrase that would create a significant lift. In the end, “See Plans and Pricing” boosted the conversion rate by 200%:
When another SaaS company, Crazy Egg , saw Highrise’s success, they decided to copy the call to action text in its entirety. The result? A decline in conversion rate by more than 10%.
Just because two companies share some similarities doesn’t mean that what works for one audience will work for another. Also, as we have seen, there are more factors at work then simply the CTA button copy.
Crazy Egg went back and tested new copy for their call to action, “Show Me My Heatmap.” It promised value and was highly relevant. (Crazy Egg’s main product generates heatmaps.) With that copy, they increased conversions by more than 20%:
How to Identify the Right Location for Your Call to Action
Where should you put your call to action? There is no single “best” location, just as there’s no single best color, font, or language for every call to action.
However, understanding how people consume content and view websites can help you identify the locations that may work best. You’ll only get an answer, of course, by running a test.
Gutenberg, F, Z, and Other Diagrams
In the world of web design, there are several layout patterns that take advantage of users’ reading/scanning habits. The more common ones include the Gutenberg diagram, F-pattern layout, and Z-pattern layout.
Each offers slightly different information on where to place your most important information—like calls to action included—on a web page. These frameworks are not perfect, and they’re often misunderstood. Here’s what you need to know.
The Reading Pattern Depends on the Page
Each of the three frameworks emphasizes how users read/scan pages, and not just any kind of page. These patterns were built for designs that are dominated by large blocks of text with little to no hierarchy.
Below is an example of how Z-pattern reading works on such a page:
When you start adding elements of varying weight, color, and visual design, you break that natural tendency. Users’ eyes may follow other elements.
Jakob Nielsen, the father of F-pattern reading, made such a concession when he first presented his findings:
“Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.”
Note that Nielsen states that users read web pages in an F-shaped pattern. That initially interpretation has been expanded to become the assumption of how users view any web page, even one without much text.
These are are the original eye tracking screenshots that he published along with his research—text-heavy pages:
Other patterns have the same potential limitations. Yes, they can help, but in the context of landing pages and calls to action, they may not be relevant, or at least are less relevant than many assume.
The key to choosing the right location for your call to action is about flow.
Set Up a Design Flow for Users to Follow
There simply is no one way to view a website.
We’ve already written about page flow. It really comes down to using data to direct visitors’ eyes through the story you want to tell.
Let’s take a look at how people see different websites with a little help from a heatmap:
1. What happens when your call to action doesn’t stand out? No one clicks on it.
2. What happens when there’s clear call to action copy and a high-contrast button? The button gets clicked.
3. What’s the impact of arrows or a human gaze? They generate more attention (usually).
Pictures of people on landing pages create familiarity, provided you don’t use cheesy stock photos. But did you know that you can also use images (as well as arrows or other visual cues) to direct visitors’ eyes where you want them to look?
In the first one, as the heatmap shows, there is almost no “heat” on the product. By changing the woman’s gaze to focus on the product, users’ attention shifted there, too.
Things got more interesting when ConversionVodoo decided to test this effect with a picture of a woman who is smiling, looking, and pointing toward the call to action. They compared that treatment to nine others. This is the control:
And these are the other nine:
So which one won? Were any better than the already “good” control?
Some converted better than others. The two images in red decreased in conversion rate relative to the control, while all others did better. Green ones showed the best lift.
In this case, pictures where the subject was clearly excited and pointing toward the CTA did the best, and, for the most part, forward-looking subjects did the worst.
But the top performer is looking right at me, what’s going on here? Could her body language match the enthusiasm of the rest of the page more effectively? Split-testing alone can never tell you.
As humans, we’re wired to seek out faces first. However, we do it less often than we think. This is exactly what EyeQuant found:
Yes, faces are nice. But as the heatmaps show, the headline and call to action don’t always getting more “heat” because of them.
Remember: The Call to Action Is Part of a Bigger Picture, not the Whole Picture
Look at Tim Ferriss’s blog:
The CTA box is very prominent, impossible to miss really. And yes, we can think that the way that Tim seemingly looks at the call to action makes me look at it, too.
That might be true, but what happens if I:
- Don’t like dancing?
- Or hate reading?
- Or, God forbid, have a beef with Chase Jarvis?
What happens to the conversions then? They will decrease simply because of what else is going on in the page.
For your call to action, you can test the placement, copy, color, size, and whatever else you can come up with (provided you have the traffic to run tests).
But don’t just follow what someone else does. Or make assumptions about why users are doing something based on data that tells you only what they did.
Use the guidelines in this post to come up with a strong hypothesis for your call to action based on user research and principles of copywriting and web design.
Go check out what your call to action looks like, and make it better now.