How To Design Call to Action Buttons That Convert

Day 4 of Conversion Centered Design week brings us to the mighty call-to-action. If you’re not sure how they should look or what they should say to increase conversions, you’re in for a treat. Today we have another stellar post by Mr. Michael Aagaard, the split testing junkie himself. So pay attention to this one, and learn from some of his countless case studies and experiments, all about call to action design.

Don’t forget to check out the 3 awesome posts that have already come out this week, and stay tuned for Friday’s post that will close out the week.

This article, packed with case studies and examples from the real world, will provide you with important insights on how to design effective call to action buttons for your landing pages.

What you need to understand about call to action buttons

On your landing pages, the call-to-action represents the tipping point between bounce and conversion. When you ask someone to do something online, they have to go through your call-to-action in order to do it – regardless of whether you’re asking them to download a PDF, fill out a form, buy a product, or even just click through to another page.

Your buttons consist of two overall elements: design and copy

Both these elements have direct impact on conversions; however, they play two different roles in the conversion scenario.

Button design is a visual cue that helps attract prospects’ attention to the call-to-action. In other words button design answers the question, “Where should I click?”

Button copy on the other hand helps prospects make up their minds in the last critical moment and answers the question, “Why should I click this button?”

In this article we’re going to focus on button design – check out this article for a full rundown on how to write CTA copy that converts.

Let’s start with an example from the real world

I’ve anonymized the client here, but we’re talking about a major European e-commerce site that sells hand-painted porcelain.

In this case, we were able to increase sales via product pages – not just click through rate (CTR) – by 35.81% by changing the color and shape of the call-to-action button.

This case study illustrates perfectly how much of an impact the design of your CTA buttons can have on your conversion rate. If you’ve designed buttons to make them fit into the design with no thought to how “clickable” they are, you are in all likelihood leaving money on the table.

Lesson 1: There is no “ultimate button” that works every time

Buttons come in all sizes, shapes, and colors, and there really is no one-size-fits-all solution that works every time.

People like to say stuff like “You should never use red because it’s a stop color.” or “Green buttons are best!”

While such generalizations are convenient, they rarely mirror reality. What actually works will vary wildly depending on context and the layout of the landing page.

In the test I showed you before, green did better than blue. But that doesn’t mean that green is always best. I’ve seen plenty of tests where blue or red buttons have done way better than green buttons.

It’s all about standing out

The main optimization principle is that the button has to stand out from the rest of the page, so it’s easy for prospects to find the button once they’ve decided to take the next step. If your landing page is mostly green, a green button is probably not going to do very well, because it will be very difficult to separate the CTA from the rest of the page.

The best way to find out what works on your landing page is to test different versions in the real world on your potential customers.

A million colors to choose from where should I start?

My best advice is to use common sense and contrasting colors when you design your landing page buttons. The good old “squint test” is always helpful. Put together your page, take a few steps back, squint your eyes, and see if your button stands out.

Buttons created with www.ButtonOptimizer.com

Here’s an example from the real world

In this case we were able to more than double CTR on a commercial real-estate site by doing a radical redesign of the main CTA button – going from a rather obscure brownish button to a much more flamboyant orange button.

If you perform the squint test on these two button variations, it should be pretty clear which one stands out the most.

I usually start by experimenting with an orange or green button, simply because they often perform well in tests. I don’t think there is any deeper psychological reason, it just seems that they stand out on most landing pages due to the average design. Again, it’s all about context, and I’ve seen tests where e.g. a purple button has outperformed both green and orange variations.

Visual effects

Visual effects can have an impact on how much your button gets clicked, but proceed with caution! Even relatively small effects can have a surprisingly large impact – and not necessarily a positive impact.

Let’s look at a few examples from the real world

A minute ago I showed you an example where an orange button with a green arrow performed significantly better than the original “boring” brown button. Well, the designer didn’t like the new button despite the positive impact it had on conversions.

As it turns out, his main objection was the green arrow, which he found ugly. My hypothesis on the other hand was that the green arrow made the button more noticeable and thus more “clickable”.

We could have discussed our personal tastes for hours, but instead I decided to investigate whether or not the arrow had a positive effect. So I set up a simple A/B test with the range button/green arrow as the control and a variation of the orange button without the arrow.

It turned out the treatment without the green arrow performed 12.29% worse than the control with the green arrow.

This is an example from a test I ran on the home page of a Danish portal through which you can buy and sell used cell phones.

Here I hypothesized that I could make the button stand out more and increase CTR by changing the font color of a green button from black to yellow. What a backfire! Changing the font color actually decreased click through by 18.01%.

So in this case the visual effect had a directly negative effect on conversion, and it turned out that the less colorful variant performed much better.

It’s really difficult to predict these outcomes without actually testing them in real life. But my advice is to keep it simple and within reason. It’s easy to go overboard on the creative solutions, but I generally find that simple variants (that are easy to recognize as buttons) with relevant copy perform better than artsy variants.

Here’s an example from the real world where a simple green button with relevant copy outperformed a creative variant by 10.94%.

Size matters – but bigger isn’t always better

I see a lot of designers make the mistake of creating buttons that are perfect from an aesthetic point of view, but way too small from a conversion stance. It’s important that your button is large enough to stand out clearly as a clickable element on the landing page. But this doesn’t mean that bigger automatically is better.

Here’s an example from the real world where making a button a lot bigger actually had a negative effect on conversion on a payment page.

My hypothesis is that the larger button simply became too big, drew too much attention, and thereby made the prospects feel pressured to carry out the conversion goal.

So again my advice is to go big with your buttons but not overboard – again testing is the best way to become certain that you’ve chosen the right size.

Respect the CTA copy!

I’ve heard designers say “Nobody reads button copy.” – well that simply isn’t true. I have a back catalogue of about 30 tests that prove the opposite; Button copy has major impact on conversion and people do read it!

In fact, apart from your headline, your CTA copy is one of the few pieces of copy that you can be 99% sure that your prospects will read.

Here’s an example from the real world

Oli and I recently ran an A/B test on an Unbounce.com PPC campaign landing page of which the goal was to increase the number of prospects who signed up for a 30-day free trial.

The only thing we did was to tweak one word in the copy – we changed the possessive determiner “You” to “My”. After running the test for three weeks, the treatment button copy, “Start my free 30 day trial” had increased CTR by 90%.

In many cases the best copy might be seem wordy and out of proportion from a design perspective. But in my world that doesn’t really matter as long as it’s the version that gets the most conversions. Therefore, it’s crucial to keep your mind open to long copy variations when your designing your buttons.

I have expected this topic from oli but Michael you have also shared good knowledge. I would like to add one point that position(place) of CTA also matters. You can try different position to utilize your effective CTA.

[…] to increase sales for an European e-commerce site by 35.81% (via product pages). Their team has a great guide for designers to make the most (and see direct, bottom-line results) from optimizing your call to action […]

[…] One link at the very bottom of an email isn’t going to cut it, especially for readers who don’t feel like scrolling down to find it. Include at least one link per paragraph. Forget about being “cool” and make your links clearly look like links. Bring it home by using strong calls to action. […]

[…] Should I design the CTAs myself? Like everything else in life, it depends. It depends on your design sense, your schedule, and your willingness to create multiple options. If you’re handy with programs like Photoshop, you can certainly give it a go. Otherwise, you can hit up your web designer for some guidance or outsource to a web/graphic designer. Some marketing software, like HubSpot, comes with CTA-making capabilities baked right in. Do a Google search on “designing call to action buttons that convert,” and you’ll find lots of resources like this one from online marketing guru Michael Aagaard. […]

[…] optimization, penned a series of free articles on improving conversions. In part four entitled “How to Design Call to Action Buttons that Convert,” Michael Aagaard walks through several examples with statistics showing the dramatic effect that […]

Thanks for the article. I’ve only recently found unbounce.com and it’s crammed with excellent information. And thanks for the link to buttonoptimizer.com – that’s a great tool for someone like myself just starting out in the industry

[…] be the main focus of your site and main part of your home page. You must also have some sort of call-to-action. Now that you have their attention you need to get them to do something. Most cases it’s […]

[…] Start with your landing pages because they are where you should be getting the most conversions. Tell your visitors what they’ll be doing on your CTA and a hint of what they’ll be getting as benefits as a sort of tease that will persuade them to click. Place them were they are easily visible such as at the header or at the sidebar. […]

[…] also be able to keep the visitors focused on equally important areas of the design, such as the call to action buttons, the headlines, the promotions, and other places you want people to pay attention to. While you […]

Great blog post! I like your point about long copy on buttons – most people don’t seem to consider that. Do you have any examples of buttons with longer copy that performed well, I’d love to see examples. Thanks!

[…] Start with your landing pages because they are where you should be getting the most conversions. Tell your visitors what they’ll be doing on your CTA and a hint of what they’ll be getting as benefits as a sort of tease that will persuade them to click. Place them were they are easily visible such as at the header or at the sidebar. […]

[…]
An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context.
[…]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…]
An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context.
[…]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

[…] The words you choose to use on your CTA are just as important as the colours and position on the page. Words will direct visitors to the action that they are about to take. So the instructions on the CTA button needs to be both informative and enticing. Lets have a look at this example provided by Michael Aagaard: […]

[…] An easy way to add focus to your checkout page is to implement calls to action. Calls to action are somewhat of a science, and people have performed a lot of tests to find the call to action that will work on any website. However, we believe it all depends on context. […]

This is an impressive post with so much information and detailed explanation about conversion. I love how changing the colours of buttons can raise the conversion so much. I want to learn more and more about it. Thank you.

[…] within your web design strategy must be a strategy that helps you design call to action buttons that convert. Inability to weave this strategy into your larger web design strategy results in call to action […]

Nice article. Hope it help us to improve our ranking and knowledge about CTA’s. We are trying to improve https://www.wishingwell.es, an on line marketing agency that comes from the off line, so we need this kind of excellent articles. Tanks a million.