According to the latest data by Wingify, makers of Visual Website Optimizer, almost 30% of all A/B tests their customers are running are Call To Action button tests.
What is even more interesting, is that only one in seven A/B test campaigns produces a statistically significant improvement. But when it does produce a significant improvement; the average increase is 49%.
Shit.
People have mostly no idea what to test.
But when they somehow stumble on the right things, they are able to see significant increases on conversions. It’s obvious that call to action buttons are important subjects for testing, so let’s do it the right way.
What You Need To Know About Call-To-Action Buttons
When it comes to your web pages, no one element lives in vacuum. It’s surrounded by other elements of varying sizes, importance and messages – all of them play a role in the success and failure of that one element.
It’s no different for Call to action buttons. What goes on in 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.”
Analyse and understand your customer and their needs. Offer relevant and valuable product in a language that resonates with THEM.Seems easy, no?
Well, no. Cause you see, understanding who your customer is is just the first part, a seriously important part, but still just the start.
So, let’s take look at what to do with the info you have – namely how that plays into the design and copy of CTA buttons.
Role Of Design In Call To Action Buttons
Look at the homepage of Spotify, where should I click?
Or Misfit Wearables, where am I suppose to click now?
In both of these cases, it’s quite clear where should I click. Design of the button (and how it contrasts with the page) is what helps attract people’s attention. It stands out from the rest of the page, acts as a visual cue to answer the question Where should I click?
But whether or not I end up clicking depends on how it works with other elements, specifically the copy.
Role Of Copy In Call To Action Buttons
Color gives me idea on where should I click. And before you ask, no, there is no single color that converts the best.
Copy, on the other hand, is the deciding factor on whether I’ll do it or not. It’s role is to help visitors make up their mind about Why they should click on the button. It should also give me an idea on what’s going to happen next.
And it’s not just the copy on the button either. It’s how the copy on the button goes together on what else is going on on the page. Is it relevant?
Generally, generic words like Download, Submit and the like are less likely to generate any meaningful lift.
Why?
Because they lack character & don’t provide any value or relevance. These are people you are trying to sell to and make them click – so act like one yourself.
This is what Neil Patel, co-founder of Crazy Egg and KISSmetrics 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.”
image source
Let’s go back for a moment to Spotify. The button itself is visible, we’ve established that. What about the copy around it?
Music for everyone – sounds good. Free on all devices - even better. Right music wherever I am – sign me up! What i have to do now? Ouu, “Download Spotify” – Done.
And it’s not just the copy that made me react to their CTA. It’s also the background photo that plays a role here. Photo of people having fun while presumably listening to music (while also looking at the button).
Nicely played, Spotify, nicely played.
Other Notable Examples
Medium is a new kind of short blogging platform – a mix between Twitter and “normal” blogging. The whole site speaks the language of writers and it’s pretty obvious who their primary target is. Ready to “Start writing?”
Basecamp is a hugely popular project management tool. But there are a lot of similar solutions on the market.
So how to stand out?
Show the huge number of companies already using it, add the number of projects finished.
And to top it all off – add that it’s free for 60 days. Even if I had my doubts about their product before, really seeing the numbers and the ability to try it for free for 2 months surely made them disappear.
VelocityPage is a front end page creation tool for WordPress. It’s kind of clear what they offer but not exactly. I would really like to see it in action before committing. “Try the demo now” – don’t mind if I do.
In short, there is more to CTA success than changing button copy. It’s what’s surrounding it that makes a difference. The story you tell on your website is what matters.
Here’s what our own Tommy Walker has to say about CTA button 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 readers 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.”
How To: Make Your Own Call-To-Action Button Hypothesis
So we know that there are two main elements to all CTA buttons – design and copy. We have looked at the role they play and how to use them to drive better results through examples. And that knowing who your potential customers is helps greatly in the process.
So now it’s time to get to work on nailing our own CTA button hypotheses.
For that Michael Aagaard has been doing multitude of button tests for the past 4 years and after seeing test after test after test has come up with 2 questions that help you with writing the copy of the all important CTA button.
image source
Those two questions are:
What is my prospect’s motivation for clicking this button?
What is my prospect going to get when (s)he clicks this button?
Answers to these two questions are going to be the basis for the button copy and for the copy surrounding it.
Take The Guess Work Out, Use Feedback Loops
Luckily you don’t need to be a magician to come up with answers. Instead use feedback loops to get the data you need.
Don’t forget to segment your customers first though, different segments have different needs and hence what works for one group might not work for another.
There is absolutely no point in guessing on what your customers answer might be, so please just go and ask.
CTA Development Questions In Action – A Case Study
Let’s imagine I’m running a chain of gyms and to get more people signing up I have set-up a PPC campaign with the goal of getting potential customers to click through to the next page where they can select a gym and sign up for a membership.
So let’s use the CTA development questions to get better copy on my button.
First, my prospects motivation for clicking on the button is to become a member of my gym. After that they’ll be able to choose the gym closest to them and start working out. So, my button copy would be “Find Your Gym and Get Membership.”
Makes sense, doesn’t it?
image source
Results speak for themselves, 68% more conversions is a very decent lift. It is relevant to customers, it tells exactly what’s going to happen next – search for a gym.
Read the full case study here.
Please Don’t Copy Others, It Will Most Probably Not Work For You
Highrise is a hugely popular SaaS company that provides web based CRM to small businesses. They ran multiple tests to find CTA copy that would create significant lift.
In the end they found one: “See Plans and Pricing”, it boosted conversion rate by 200%:
image source
So when another SaaS company Crazy Egg saw what they are doing on their landing places, they decided to simply copy their CTA button copy in it’s entirety and see what happens.
After testing the exact same call-to-action button over at their landing pages, Crazy Egg learned that it actually decreased conversion rate by over 10%.
How Come It Didn’t Work??
Just because the two companies share some similarities does not mean that they can carry over whatever works on one audience and hope that it will automatically work for another.
Also like we have seen, there are more factors at work then simply the button copy when it comes to effectiveness of CTA buttons.
Back to Crazy Egg – instead, what they did was test out a new CTA “Show Me My Heatmap” – it provided value to the viewing audience and was highly relevant (after all, Crazy Egg’s product is making heatmaps) . It’s no surprise then, that with that copy they managed to get conversions up by more than 20%.
The Ultimate CTA Button, Works Every Time. Guaranteed, Not.
Heres what The Conversion Guy has to say about ultimate CTA buttons:
“Throughout years of testing I have discovered that the ultimate CTA button background color is black. The best copy color is grey and when it comes to placement, the absolute best spot is 20px down and 15px from the right corner of the browser window. True story.I guarantee it.”
image source
Except it’s not.
Try as we might, it’s impossible to say which color converts the best, or font, or the size of copy or even where should it be. I’m really sorry, but none of that stuff exists.
image source
We have talked about color and it’s role in button conversions before, so go and read it here. But when it comes to where to place your CTAs, there are a couple of misconceptions I’d like to cover before we wrap up.
Gutenberg, F, Z And Other Diagrams
image source
In the world of web design there exist several layout patterns that take advantage of reading/scanning habits of people through a design. The more common ones include the Gutenberg diagram, letter F-pattern layout and the letter Z-pattern layout.
Each of them offer slightly different information on where to place your most important information (including CTAs) on any given web page. The problem is that they are often misunderstood and followed without understanding on what they are really all about.
Emphasis On Reading of Text Heavy Pages With Little To No Hierarchy
Emphasis on all of them is on the reading/scanning habits of people.
It doesn’t apply to any old design, it refers to designs that are dominated by large blocks of text with little to no hierarchy.
Below, an example of how Z pattern reading works on a page that it is intended for:
image source
When you start adding elements of varying weight, color and visual design you break that natural tendency for reading and users eyes will follow whatever you have created for them.
To be fair than Jakob Nielsen, the father of F pattern reading, said at the time when he came out with his findings that:
“Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.”
image source
Emphasis is on the reading part. Read web pages in an F-shaped pattern. Along the way that got interpreted as the de-facto viewing pattern and the rest is history.
These are are the original eye tracking screenshots which he published along with his research:
image source
Clearly text heavy pages…
The same can be said about all the other patterns. Yes, they can help but in the context of landing pages and CTA buttons they are not that much use, if any.
It’s Up To You, The Designer, To Design The Flow That YOU Want ME To Follow
There simply is no one way to rule them all when it comes to viewing patterns of your visitors.
We’ve already talked pretty extensively about page flow already, but what it really comes down to is being skillful and using what the data is telling you to direct your visitors eye through the story you’re trying to tell.
So let’s take a look at how normal people are really seeing different websites around the web with a little help from heatmaps: #1 What happens when you’re CTA doesn’t stand out? No one clicks on it:
image source
#2: Picture, clear CTA and button copy + a button that stands out:
image source
This is what it looks like without heatmap overlay:
image source
#3 Using Arrows and gazing people 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 (and arrows, any visual cue really) to direct visitors eyes to where you want them to look?
image source
In the first one, as the heatmap shows, there is almost no “heat” on the product. By changing the image to one where the woman is gazing at the product, it changed that. Things get more interesting when ConversionVodoo decided to test this effect with a picture of a woman who is smiling, looking AND pointing towards the CTA against 9 other contestants. This is the control:
image source
And these are the other 9:
image source
So, what do You think, which one won?
Or were any of them better than the already “good” control?
image source
As you can see, some of them converted better than others. The red ones decreased conversion rate in relation to the control, all others did better. Green ones showed the best lift.
In short, in this case, pictures were the subject was clearly excited and pointing towards the CTA did the best, and for the most part, plain forward looking subjects did the worst.
But the top performer is looking right at me, what’s going on here?
Could it be that her body language as a whole matches the enthusiasm the rest of the page is trying to create?
Might her looking directly at you saying “I’m so excited by this” be what improves the lift on the page? Maybe, maybe not.
Split-testing alone can never tell you this.
Look at Tim Ferriss’s blog for example:
The CTA box is very prominent, impossible to miss really.
And yes, we can fantasize that the way that Tim seemingly is looking at the CTA box makes me look at it and thus I pay more attention do it. And possibly take action.
This might all be true, BUT what happens when I:
Don’t like dancing?
Or hate reading?
Or God forbid, i have a beef with Chase Jarvis, can’t just stand the guy at all?
What happens to the conversions then? They will decrease simply because of what else is going on in the page.
You can test the placement, the copy, the color, the size and whatever else you can come up with.
It will not, however, change I feel about Chase. It simply won’t.
(I don’t hate him, he’s actually a cool guy!)
Screenshot of unbounce webinar “Big Picture CRO” with Rand Fishkin
Conclusions
Doing things like in the above image, testing button color completely separating it from the rest of the page and not looking at the whole picture, will get you maybe 1 win out of 7 tests if you’re lucky. (By win I mean a small lift.)
Wouldn’t you rather be the one getting on average 49% lift with your tests simply because you understand how the game is played?
The post Mastering The Call To Action – Words, Color, Size & Location appeared first on ConversionXL.