How To Design Call to Action Buttons That Convert

ctas 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.

Design Call to Action Buttons

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.

Design Call-to-Action Buttons

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.

Awesome call-to-action buttons

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.

Design Call-to-Action Buttons

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.

Design Call-to-Action Buttons 4

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%.

Design Call-to-Action Buttons

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%.

Design Call-to-Action Buttons

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.

Design Call-to-Action Buttons

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%.

Design Call-to-Action Buttons

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.

For more on how to write CTA copy that converts check out this article or watch this video.

What you should do now

Go over your landing pages and scrutinize your call-to-action buttons. Do they stand out from the page? Are they easy to recognize as buttons? Are they merely there as a part of the design?

Perform the squint test and consider whether you could change the color or ad a visual effect to make the button “pop” more.

Use your observations to come up with ideas for new buttons and use a free tool like buttonoptimizer.com to design a number of treatments that you can test on your landing page.

If you use Unbounce.com as your landing page platform, setting up a button test is as easy as 1, 2, 3. Otherwise, learn more about A/B testing by reading this article.

– Michael Aagaard

About The Author

Photo of Michael Aagaard

Michael Lykke Aagaard is a self-employed, self-confessed split test junkie and copywriting fanatic who’s obsessed with finding out what really works in online marketing. He writes about content, copy and conversion on his blog, ContentVerve.com. Follow him on Google+ or get his new free ebook: 7 Universal Conversion Optimization Principles.
» More blog posts by

Comments

  1. I guess keeping the button as simple as possible will always work ?

    • I can’t tell if it will work every time – you have to test ;-) But all my research points to the fact that a simple button with relevant copy that stands out converts well.

      - Michael

  2. [...] How To Design Call to Action Buttons That Convert [...]

  3. Nile Lars says:

    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.

  4. I am commenting on Behalf of my Blog ! :)
    One thing ! this really helped me … Now I’ll be having some call to action buttons instead of hyperlinks!
    Thanks Again !
    -Arjun

  5. [...] How To Design Call to Action Buttons That Convert, unbounce.com [...]

  6. [...] How To Design Call to Action Buttons That Convert, unbounce.com [...]

  7. Every time I read a blog post on unBounce I come away with yet another valuable and FREE aid to improve my work. Thanks for the tip on the button optimizer site and a/b testing. Using beginning now.

  8. Sunday says:

    This topic of the Conversion Centered Design week is timely because most marketers are having limitations when it comes to CTA buttons.

    Visual effects, size, positioning and message are some of the factors that can really make a difference when it comes to creating call-to-action button that will convert.

    This post was “kingged” in the IM social site – kingged.com, where the above comment was also left.
    Sunday – kingged.com contributor
    http://www.kingged.com/how-to-design-call-to-action-buttons-that-convert/

  9. Andy Kuiper says:

    I REALLY like this article Michael… thanks for the info and super example graphics :-)

  10. [...] Verkkosivustoilla bounce raten ja koncersion välissä seisoo ns. call to action. Tämä tarkoittaa sivustolla vierailevalle asiakkaalle tehtyä kehoitusta toimintaan houkuttelevalla tavalla niin, että verkkosivuston haluama tavoite täyttyy. Käytännössä asiakkaan tehdessä mitä tahansa verkkosivulla, joutuu hän call to actionin kohteeksi. Näitä ovat pääsääntöisesti kehoituksen sisältävät nappulat verkkosivuilla. (http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/) [...]

  11. [...] For a more in depth look at how both button design, color and copy ran influence your conversion, check out this article on designing call to action buttons that convert. [...]

  12. [...] 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 [...]

  13. [...] برگرفته از : unbounce.com [...]

  14. Sully says:

    What font is this?

  15. [...] someone clicks your ad, you know that you you’ve at least piqued their interest. CTAs like “learn more” and “click for a free estimate” encourage a clicker to [...]

  16. Max says:

    Great article, much thanks! Beyond the design though, what do you find are the best functions for calls to actions, e.g. click to call, chat, video, email, call-back, etc…?

  17. [...] 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. [...]

  18. “Get Your Free Ebook Now” is much better than “submit”. I customized my opt-in button from “submit” to “Download Book Now”. Has worked wonders for me so far. This was a phenomenal post by the way.

  19. Ana Hoffman says:

    Ahhh, too bad – I was hoping for a “one size fits all” kind of solution, Michael. lol

    I do think you said the most important thing we should all remember when designing a cta button: it needs to stand out.

    Once that’s done, it’s down to testing.

    Loved the post; linked to it in my recent http://www.trafficgenerationcafe.com/write-great-blog-post/

  20. […] 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. […]

  21. […] 9. Stop what you’re doing and write a Guide, DIY, or EBook: One of the best ways to increase readership is to offer a free guide (make sure it has Calls to Action!) […]

  22. […] 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 […]

  23. Steve Egan says:

    Hey Michael,

    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

  24. […] 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 […]

  25. […] 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. […]

  26. […] 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 […]

  27. Alison Klein says:

    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!

  28. […] 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. […]

  29. […] a bit has been written about call to action buttons in the online marketing space in general. If you’d like to read more about this topic […]

  30. Maninder says:

    hi dear plz tell me how to call to action button like visitor submit our number in batten and its direct connected with my page or email id.i means it notification comes in my Id.

  31. hello dear
    plz mailed me how to use in my given website blogger page how can use call to action button in my page.P,z inform me via mail or PPT of this process

    Thanks

  32. […] 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. […]

  33. […] 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. […]

  34. […] 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. […]

  35. […] 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. […]

  36. […] 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. […]

  37. […] 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. […]

  38. […] 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. […]

  39. […] 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. […]

  40. […] 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. […]

  41. […] 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. […]

  42. […] 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. […]

  43. […] 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. […]

  44. […] 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. […]

  45. […] 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. […]

  46. […] 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. […]

  47. […] 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. […]

  48. […] 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. […]

  49. […] 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. […]

  50. […] 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. […]

  51. […] 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. […]

  52. […] 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: […]

  53. […] 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. […]

  54. […] Aquí un buen artículo al respecto: How To Design Call to Action Buttons That Convert […]

  55. Dan Carter says:

    Great article Micheal. Thanks and the graphics are great.

  56. […] this test he shared on the [highly recommended] Unbounce blog, Michael showed how simplifying the visual design of a call-to-action button led to an 11% lift in […]

  57. Click here to visit the official Gary Davies Option Bot 2.0 website to purchase and download the Option Bot software and complete binary options robot for currency pairs. Gain instant access to the 2.0 version of the software and the most advanced financial feed data that is responsible for earning $1622 in just 45 minutes with the help of software creator and binary options expert, Gary Davies.

  58. […] We might logically assume they would click on “try it free” first. Our button is blue (noticeable against the orange), it is to the right side of the header where people end up when reading left-to-right, and it has an arrow (which increases click rate). […]