Welcome back to our series on landing page elements. If you've been paying close attention (and we're pretty sure you have!), you've already read about:

But now it's time for some action! The Call-To-Action, that is.

Now, bear in mind that each and every one of the above-mentioned items are crucial to make a landing page work, but, together, they all serve an ultimate purpose: to get your visitors to click on the call-to-action or CTA.

When we first talked about the call-to-action, this is how we introduced it:

"As it name suggests, [the CTA is] where the action takes place, where the conversion begins. An effective CTA makes your visitor sign up for a trial or newsletter, request more info, download a freebie, even actually buy something! The call-to-action is the focal point of what you built your landing page for: conversion."

So, basically, everything else on your landing page should point to your CTA. Images, headlines, copy and testimonials are there to have your visitors head toward the call-to-action and click on that big, shiny, beautiful button.

But as with everything else, one does not simply design a box with a "Submit" message, place it anywhere it looks nice on the page and call it a highly-converting CTA. There are proven guidelines and best practices to follow if you want to gain and optimize conversions on your landing page. We'll show you how.

Design to Action

Design is a key element of the actionability of your CTA. As we mentioned above, it's not just about colored boxes—there are a few key elements that you need to take into account when designing a call-to-action for your landing page:

  1. Sizing: you want your CTA to be noticeable, not to get lost inside your page's copy and graphics. And although there's no "one-size-fits-all" in CTA design, the general consensus is to make it big enough to stand out on its own. However, as with pretty much every other element in landing page design, CTA sizing is definitely something you have to test for optimal results.
  2. Color: another way to make the CTA stand out, in conjunction with the right size, is by using strongly contrasting colors, that is, your button's color should be in contrast to your page's palette, in order to be more easily spotted by your visitors. Take a look at this example from Evernote, all sharp green against a blurry brownish background, pretty hard to miss:
  3. Directional cues: as if sizing and color contrast weren't enough for drawing your visitors' eyeballs toward your CTA, you can also increase your chances at conversion by actively using directional cues, clever design elements that actually point you toward an intended element of attention, namely, your call-to-action. Some of the most commonly used directional cues include arrows, fingers, and eyes looking intently toward our CTA, as exemplified by Wordstream's arrow below:
  4. Placement: the jury might be out on this one and—yet again—you might need to A/B test your CTA button placement for best results. However, you still have your choices and your landing page objectives and design might dictate your decision on placement. These choices are:

    • Above the fold: the go-to option for CTA placement, the fold, or that all-important area of your page that can be viewed without further scrolling, gives your call-to-action a prominent position. If it's big and colorful already, it'll be hard to miss. However, just don't shove it on your visitors' faces if you have other content or copy below the fold which you'd rather have them see and engage with. Anyway, it's generally a safe bet to place CTA's above the fold on landing pages where the rest of the elements (headlines, USP's, graphics, directional cues, etc.) are already working well in conjunction.
    • Below the fold: as explained over at Unbounce.com, placing a CTA below the fold depends on mastering the "AIDA" approach (where AIDA stands for Attention, Interest, Desire, and Action). In short:

      • first you get the visitor's attention (by means of a nice headline),
      • then you spark her interest (through videos, hero shots, graphics, etc.),
      • create a desire (by describing the offer's benefits and/or features), and finally,
      • get her ready to take action (by clicking on your call-to-action!)

      In this way, the visitor takes a tour of sorts through your landing page till she gets to the CTA and clicks on it, gaining you a conversion in the process.

  5. Making it look clickable: needless to say, the CTA button should look like a... button. You know, something you can click on. Borders, beveled edges, hover states, drop shadows, glossy effects, and more, are all elements and techniques that can be used along with all the design elements discussed above to make sure the button looks like one, as you can see in the following example from I Will Teach You To Be Rich, with just a small border below doing the whole trick:

    Make sure you don't go with a flat box that might be taken for just that, a box and not a clickable button. When it comes to landing page design, ambiguity is pretty much undesirable.

The Secrets of CTA Microcopy

The "call" part in call-to-action is all about the microcopy and its power to make visitors click on that nicely designed button. And a sure way to make that happen is by using active sentences, i.e., sentences that begin with verbs and concisely state the value the visitors will get by clicking.

In other words, describe what will happen when your visitors click: if it's a free ebook you're offering, use something along the lines of "Get your free ebook!". If it's a webinar you're hosting and your landing page is aimed toward enrolling attendees, go with something like "Reserve my seat now". A software product trial could be "Start your free 30-day trial."

Microcopy should eliminate friction by using words that imply you'll get some sort of gratification or saved work. On that same previous link, Joanna Wiebe from Copyhackers.com suggest the following "low-friction words":

  • Get
  • Check Out (as in “check this out”, not “checkout”)
  • Discover
  • Reveal
  • Earn

On the other hand, the microcopy is where the call-to-action meets your unique value proposition: you offer a value and the CTA tells you to get it.

Take a look at this classic example of concise CTA microcopy writing:

By clicking on that button, you definitely know what you're going to get: a "heatmap" of your website. That's what Crazy Egg offers, that's what their CTA says you will get. Swift.

Another consideration to take with regards to CTA microcopy is to keep the language simple whenever possible, staying away from unnecessary technical jargon. Of course, from time to time, and depending on your intended landing page's audience, and if you're offering something that's definitely on the hi-tech end of things, you might need to use a little bit of specialized jargon, but whichever the case, there's really no reason to go overboard with microcopy language: you want your visitors engaged and click-happy, not overwhelmed.

So you get the idea: be succint but descriptive in your call-to-action microcopy—avoid falling in the easy and potentially bouncing trap of a plain "Submit" or an uninspired "Send".

Examples

Let's take a look at some nifty examples of CTA craftmanship:

Successful blogs have a way of using compelling CTA's in order to get email subscriptions, and the Shopify Blog is no exception—it's got it all: social proof, value proposition, benefits and a clear, direct call to get updates. Check it out:

The seriously manly guys at Manpacks put the contrasting color and directional cues approach to work in their CTA to get you to sign up and be a man:

WPCurve offers a set of tools for content marketing through their blog, and their CTA tells you pretty much what you will be able to do once you click on their blue button and "get the tools":

Now, this is how you break the rules:

Blogger Chris Lema uses run-of-the-mill CTA microcopy, just what we advised you against above. But take a look at the text on the left. It features social proof (5,000+ subscribers) and that sweet, little bit of text that we find so cool, every single time: "My posts. Your inbox. Beautiful." How can you not subscribe to Chris' newsletter?

A final example on directional cues comes from Bear CSS. See how the bear's finger is pointing directly to the "Upload HTML" CTA. By the way, this is not your typical "get something in exchange of your info" call-to-action, but the principles of directional cues, "clickability" and color contrast are in full effect in this CTA:

A Recap on the Action

Don't underestimate the importance and power of your landing page's call-to-action. It is not a standalone item within your page—everything else on it should be prepping your visitors to click on the CTA.

And that's why landing page design and copy should be a harmonious effort, with every element guiding the visitor toward the CTA, and the CTA itself finally making the visitor take the desired action by clicking on it and signing up for your newsletter or service, getting the freebie or the premium deal, registering for your webinar or master class... you name it.

Be creative, be direct, state the benefits of clicking and make that call-to-action button stand out (not stand all alone) on your page. After all, you've worked hard to make every other element serve its purpose, so don't fall for a poorly designed CTA.

And last but not least, please, don't you ever forget to A/B test, A/B test and then A/B test some more! Your CTA's potential for conversions should not be left to sheer luck and/or intuition (in fact, no other part of your landing page should either). So again, whatever you choose in terms of design, copy, placement, and so forth, test it for optimal results.

In a nutshell: make your call-to-action shine and start converting like the pros!

Tell Us Now!

How has been your experience so far with CTA's? Do you have any call-to-action success stories or lessons learned you want to share with us? Feel free to contribute in the comments section below and thanks for your time!