The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

Call to Action Buttons: The Ultimate Guide on Which Ones Convert and Why

Posted in How To on April 18th, 2013

Ask around, what are the 3 main elements that you have tested on your landing page? I think 9 out of 10 people will tell you that they have tested their call-to-actions (CTAs) at some point in their testing process.

CTA Buttons are not only easy to play with but are also the main element that you ultimately want your visitors to notice and click. Anyone who has tried A/B testing knows what a good call-to-action can do for their conversion rates. This is why some of the most common A/B tests involve change of red button to orange, yellow to green and so on; or, people often love playing around with its button size (if it’s large, they make it small; if it’s small, they make it large) and then track which one converts better.

The sad part is, instead of making an attempt to understand the psychology of visitors and form justifiable hypotheses for button tests, the majority of site owners consider this a hit and trial thing. While there’s nothing wrong in saying that it’s all a guessing game. But “educated guessing” is the key phrase here.

True, there’s no rule of thumb in testing and even the best practices cannot be counted upon until a winner is declared. But if not to try best practices, you can bookmark this article to explore innovative ways you can experiment with your call-to-actions.

Again, you’ll first have to test these suggestions, and see which combinations work best in your case.**

**Feel free to jump to the next subheading if you always have only one call to action per page as a rule!

Prioritizing Your CTAs

Although it’s highly recommended across the industry by experts that you stick to only one CTA per page. But if you really have to add another one, it’s important that you’re clear which of the two CTAs is your priority.

For example, a college website may have registration forms fill-up as their main conversion goal, which is closely related to revenue of the company. So, one CTA has to be about completing the sign-up for the course. But what if they have another “download  the course brochure” CTA for visitors who wish to know more about the course before they sign up? Which of the two should be the primary CTA?

Many of you might be thinking, make form submission as the primary CTA and make “download brochure” the secondary CTA. It’s so simple. What’s there to think about it? Silly.

Well, not really. There’s actually a lot you can think about before jumping onto a conclusion, just like that. Like, what if previous statistics of the website reveal that while 2000 visitors submitted the form directly, only 10% (200) went on to pay the fee. On the other hand, let’s suppose 1000 visitors download the brochure and 30% (300) pay the fee.

Who seems silly now, sporty? This sure shows that “download brochure” should be the primary CTA and registration process should be the secondary CTA.

But this was just one variable that I used to prove my point. Real life testing scenarios can be a lot more complicated than this and may involve a lot more variables than just the revenue conversion rate of individual CTAs. In that case, I suggest that you make a table like the one given below to decide your primary and secondary CTAs and hypothetically score each of the variables on 5. Total out the score to find your primary call to action.

Variable 1 Variable 2 Variable 3 Total
CTA 1 4 5 1 10
CTA 2 3 2 4 9

The variables here can be anything, like previous CTRs, revenue conversions, ease of convincing management, technical complication, and others. Every case is unique and can have it’s own set of complexity of variables. The important thing is, you should know how to get your priorities straight in such cases.

One thing you should know here is, even when you have two call-to-actions on the same page, they should still be somewhat related to each other. And the ultimate conversion goal of both buttons should be the same.

Like, call-to-action to register for the CA course shouldn’t be given next to the call-to-action to sign-up for the CFA program. You might be thinking that students who’re not interested in CA, might want to consider going for CFA as their next best option. But this will only distract the majority and reduce your conversion rates.

Offering the “Download CA brochure” as the secondary call-to-action when your primary call-to-action is to register for the CA program seems like a better idea, to me.

4 Factors You MUST Consider for Higher Converting Call-to-Actions

Because CTAs form a crucial element of your landing page and the conversion funnel, paying close attention to its smallest detail makes good sense.

1. Button Text

Value. Yes! Your call to action buttons should answer the question “why should I click this?” Try that your button text makes sense as a stand-alone element, even when it’s not seen in context of the page you plan to place it on. A neat example is the Firefox button given below. People download Firefox all the time, they don’t read the whole page before they download. Their button text not only communicates exactly what you’ll be downloading, but also customizes it further with essential details, like the language and the OS as its button text without making it look cluttered.

Firefox CTA Button

So yes, no generic text please! Sometimes there’s nothing more lame than vague button texts, like “click here,” “download now,” “book now” and so on. “Why should I click here?” “What’s the download for?” “Book what?” Your button text should be specific. The more details you provide, the better.

You can say, “Download your free fitness e-book here” “Book your movie tickets now” “Click here to subscribe to our blog posts”…you got the drift..right? Keep it simple and crisp.

On the contrary, in some cases, it’s okay to stray away from the mainstream “be specific in your button text” approach. Sometimes context of the page does help. Agreed! And in such cases, it can be redundant to make the text more specific. Like, if you look at our Visual Website Optimizer homepage, on the top right, there’s a call to action button that says “Free trial.” Now this is generic text, but the other page elements make the context clear in an instant without any ambiguity. So, changing it’s button text to, say “VWO free trial” would only make it redundant.

Visual Website Optimizer CTA Button

You can even think of the primary benefit of your offering and try to use it as a button text for your CTA. Be sure to keep it short though, like for the Firefox button, text can be “Browse with Firefox 3.6,” while other specifications can remain as is.

One more hindrance that button text can eliminate for you is, anxiety. People on the Net many times hesitate in taking an action because they fear that it may take time. But if you include things, like “It only takes 60 seconds to sign up” or “2-step checkout” in your button text, you make it easy for them to proceed with the conversion goal of your website. You can see how Amazon makes this work on its website:

Amazon CTA Button

Creating urgency is a time-tested mantra that usually doesn’t disappoint. By including additional button text, like “Limited time offer,” “40% holiday season discount” and others, you compel visitors to take the action without any delay. Otherwise, this will leave them with a sense of loss.

2. Button Color

Did I hear the word “orange” or “red” maybe? Let me blame it on telepathy, this time (you know it’s more about popular opinion influencing your mind. Don’t you?).

Contrary to the expectations of many, I’m not here to suggest that orange has better conversions than red, or green is the color you should stick to, for your CTA button color. This is no “one size fits all” deal. Blue call-to-action on purple background won’t work, as it will almost merge with the background and fail to attract the attention it should.

Your button color should be in stark contrast to your background colors. Something so vibrant that it catches attention in the first glance itself. And preferably the color that hasn’t been used anywhere on the web page.

Kissmetrics understands this very well, as is evident in the image below from their homepage:

Kissmetrics CTA Button

The same tip can be used if you have two call to action buttons on the same page, like it is given in the image below from Logbook:

Logbook CTA Button

Apart from contrasting color, there is one more notable thing here – did you notice how the small download icon or the unlock icon on the buttons in the above image make things so much more clear and interesting at the same time? Don’t miss out on these small cues. They can make a huge difference to your revenue if they prove to be successful in testing.

3. Placement of Your Call-to-Action

Okay, we all know that it should be at a prominent position on the web page. No points for calling out page header, left sidebar, or center of the page.

Did someone say, above the fold? Interesting but not always true! Yes, “the fold” is just a myth. Many times moving the call-to-action below the fold has shown to have higher conversion rate. As it seems, for some complicated offers, people like to understand the deal a little better before they prefer to take action. In such cases, if your CTA is placed above the fold, not many people will bother to click it.

And of course, you know whitespaces are the best to place attention-grabbing call-to-actions. Although in an attempt to place your button on whitespace, make sure you do not end up placing them so far from the main text or surrounding elements on the page that it starts to look disconnected. This can again reduce your conversion rate.

See how Paypal uses whitespace on their website:

Paypal CTA Button

Having a curved arrow that points to the CTA or a picture with eyes focused on CTA can also channelize attention towards the CTA. Check this out in the image below from Chemistry.com:

Chemistry.com CTA Button

4. CTA Size

Yes, bigger is better. It’s almost a rule. But there are circumstances, especially when you’re talking about two call-to-actions on the same page, when reducing the button size of your secondary call-to-action makes sense. You can see how this works in the image below, taken from wufoo.com:

Wufoo CTA Button

Some additional Tips

Place Your Privacy Policy Below Your CTA Button – This improves credibility of your offer for consumers. And is also considered to be a good SEO practice by many webmasters (there’s no proof available for this), especially because it might contribute to site’s credibility factor if it undergoes Google’s manual review. Still, it won’t make much of a difference to your site’s ranking though.

For those concerned that the link to “Privacy policy” page placed next to call to action buttons may distract visitors and reduce the conversion rate, you can be at peace. Not many people really click on boring “privacy policy” pages, so the mention of the link only increases site’s credibility and in many cases, even the conversion rate.

Remove Distractions – Let the surrounding area around your CTA to be free from all clutter. Social media buttons, any unrelated videos, content, should be nowhere near the CTA. Only elements that can push the offer better should be near CTA. You can check out how Open Mile saw a 232% increase from their homepage by reducing clutter around their CTA and placing it over whitespace in the center of the page. Read the complete case study here.

Your Turn

Have you ever tried testing any of these ideas before? What was the result? Why do you think variation won or lost? Share it with me in the comments section.

 

Smriti Chawla

Content Marketer at Visual Website Optimizer by the day, SEO enthusiast by the night. I love reiterating quotes and collecting weird people. You should follow me on Twitter.

The Complete A/B Testing Guide

Know all that you need to get started:

  • What is A/B Testing?
  • Is it compatible with SEO?
  • How to start your first A/B test?
Show Me The Guide


Tags

15 Comments
Jon
April 19, 2013

Hey Smriti,

Thanks for the great post! One question… you mentioned:

“Place Your Privacy Policy Below Your CTA Button – This not only improves credibility of your offer for consumers. But is also considered to be a good SEO practice.”

It’s very likely I may be missing something or unaware, but I’m curious what the direct SEO benefit would be from doing this.

Thanks!
Jon

William Carr
April 20, 2013

I agree about the button colors. It’s not about psychology (red means stop, green means go). Instead focus on contrast + value.

John Hyman
April 20, 2013

Very well thought out post. But, where do you keep the weird people that you collect?

Smriti Chawla
April 22, 2013

@Jon, Privacy policy is a low-risk page for SEO if you talk about Google bots only, however if your site undergoes Google’s manual review, existence of pages like privacy policy, contact details and security seals may add more credibility to the website. This is why a lot many webmasters recommend adding a privacy policy page. But there’s no proof about its direct SEO benefit, per se. It’s more about maintaining transparency on your site.

Now I think I should update the post as well. So, thanks for pointing this out. :)

@John, I keep them in my closely-guarded circle of friends. :)

uday
April 22, 2013

excellent post, even changing colors of CTA button plays pivotal role in getting leads.,

Jon
April 22, 2013

@Smriti thanks for the note and clarification!

That’s what I figured you’re were getting at :) and from a manual review standpoint I’d most certainly agree.

Again, nice post! I hope you have a great week!!

Peter Netz Lassen
April 24, 2013

Hi Smriti Chawla

This was a good read. Size and colors text and clear message. I got it… It really helped me get my head around the CTA thing.
How’s your take on contrast in a design vs button color.

VWO site is “dark” in it’s purple color and your buttons are also kind of a “dark” color but text is white? – I find it hard to determine what contrast to use on my site(s)

Peter

Smriti
April 25, 2013

@Uday and @Jon, thanks for dropping by. :)

@Peter, just checked your website. I can see you’re using green and pink color for your CTAs that have already been used in your page header quite prominently. Testing contrasting colors, like blue or orange should be a better choice for a CTA button. You can also try to prioritize your CTAs first.

Check out this article for better understanding about color choice: http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

Gerben van Ouwendorp
May 13, 2013

Great post. And I love the part about the myth CTA color, it’s the bigger picture. Just test it :)

And the only question I had (privacy statement & SEO) is already answered.

Prachi
August 6, 2013

Hi Smriti,

Very useful and informative post. I guess I should add privacy policy page to my site now.

Thanks

Mark
September 10, 2013

Hi Smriti,

Well done on a solid post. I now have a greater appreciation of how to approach multiple CTA buttons on the same page. This will come in handy for a website redesign that I am currently working on.

Nice one

Cheers

Mark

Smriti
September 10, 2013

Glad I could help, Mark!

Peter Side
November 16, 2013

Nice article about split testing, i really enjoyed the test you carried out and the conversion, am going to be trying it out soon on my blog.

Thanks a lot.

Akshat
January 23, 2014

I never thought of testing out colour buttons. Great idea… thanks.

Jackson
April 10, 2014

I think what you have said really resonates with me. Theoretically i can really use this information to my advantage. Thanks.

Leave a comment
Required
Required - not published


7 − one =

Notify me of followup comments via e-mail.

RSS feed for comments on this post.

I ♥ Split Testing Blog


Stay up to date

Recent Posts

Write for this blog!

We accept high quality articles related to A/B testing and online marketing. Send your proposals to contribute@wingify.com