Landing Page Course Home

Part Three

Call to Action Design and
Where to Put it on Your Landing Page

Your call-to-action (CTA) is one of the most important elements on your page. It’s the final point of interaction and the last opportunity to convert your visitors.

©2018 Unbounce.com - The Conversion Platform for Marketers

Where should I put my call to action?

1. CTA Placement

There are generally two ways to look at the placement of your call-to-action. Above the fold and below the fold. Which location you choose comes down to the complexity of your offer.

Let’s explore this in more detail:

1a. CTA Above the Fold

Placing your CTA above the fold is the most common placement choice. However, this can be expecting too much of someone who has just arrived at your page. A solution to this is to create a mini landing page experience that contains the critical elements of your page packaged up into a block of content above the fold. Then any supporting content can appear below for those who need to read it to be convinced of your page’s purpose.


The benefit to this approach is that it can increase the understanding of what your page is about very quickly, helping to reduce bounce rates.

A good way to visualize this is something we call the 6-point punch, which works like this:

If your offering requires detailed explanation, test placing your CTA below the fold.

When it comes to creating a button for your landing page call-to-action, it’s important to understand some of the tried and tested button design best practices.


The 8 guidelines of effective button design
Applying these foundational rules to your button designs will help increase the chances of them standing out for your visitors and being clicked more often.

Contrast
Contrasting colors are the best way to make your button stand out from the rest of the page. Choose the color that makes it stand out the best, rather than the color you like the best.

Clickability
Make it look like a button! If it looks flat and unclickable it could be just another design element on the page. Give it some kind of 3D design (without making it look like it was designed in the 90s). You can also increase the feeling of interaction by including a rollover state where the color or depth changes when you hover the mouse over it.

Size
Size matters. If your button is buried on the page it’s less likely to be clear that it’s the target element for a conversion. Go big or (your visitors will) go home.

Directional cues
Pointing to your call-to-action is a great way to make it stand out, and guide your prospects attention to where you want them to click. Here’s an example of a button design that performed better than the version without by 12.29% (test performed by 


 

 

 

 


Call-to-action copy
The text on your button is of paramount importance. As a general rule it should describe exactly what will happen when it’s clicked. For instance: “Download my free ebook” or “Request a consultation callback”. Never use something like “Submit” or “Click here” – they don’t describe what will happen.

Supporting information
A short statement that supports and clarifies the purpose of the button can allow you to keep the CTA copy short and to the point, while adding extra detail. This text is typically smaller in size than the main button text and sits either inside or below the button.

Urgency
If there is a time or quantity limitation on your offer, be sure to re-state it beside your button to encourage the click. For the text on your button, try including words like “Now” or “Today”.

Whitespace
Where is the button? If that’s the response of your visitors you aren’t making it obvious enough. Give it some breathing room so it’s very easy to spot.

2. Call to Action - Button Design

Try the Unbounce Landing Page Builder

No signup required. Give it a whirl to see what you think.

PLAY WITH THE UNBOUNCE LANDING PAGE BUILDER^ TOP

The 6-point punch

1. A powerful and descriptive headline: The type that stops you in your tracks when you see it in a newspaper dispenser on the street.

2. A complimentary supporting sub header: This is designed to to give you both the ability to keep your headline short and sweet, and to provide the extra information that would make your headline a bloated mess if it was included.

3. The hero shot: This is your best photo/video that showcases your offering. The best style of hero shot is something that shows your product/service being used in context. For instance, for a foldaway step ladder, you could show a series of photos of it being used to reach a high shelf, followed by it being neatly stowed away in a tight space.

4. Benefit statements: These should succinctly describe the core benefits of your product or service and the pain your offering solves for prospects.

5. A call-to-action that describes exactly what you’ll get: This should be really closely tied to the title to reinforce your page’s purpose.

6. Confidence/trust indicators: This is where you back up your claims with a testimonial, customer logos press mention logos.

Your call-to-action represents a handshake agreement between you and your prospects.
Greet them properly and deliver on your promises.

"

CLICK MY CTA OVER HERE!

Good job! Now keep reading.

This part of the course will cover CTA placement (above and below the fold), and some visual design tips for styling your buttons.

Using these 6 steps you can create a mini experience above the fold that can improve your potential for an above-the-fold conversion.

TAKEAWAY

Sometimes it’s okay not to ask for a conversion right away. A good A/B test idea is to try placing your CTA at the end of your page vs. placing it above the fold.

 1a. CTA Below the Fold

Some marketers might remember a concept called AIDA.

It stands for Attention, Interest, Desire, Action, and is based on the idea that a visitor progresses through a series of linear steps on their way to making a decision to take action.

The page below illustrates this flow, and is a good example of placing the CTA at the bottom of the page once the visitor has followed the progression of your marketing story.


Let’s break down the template to illustrate how it follows the AIDA principles:

ATTENTION: You capture the attention of your visitor with a highly relevant and punchy headline.

INTEREST: Through the use of the video, you gain the interest of your visitor.

DESIRE: Desire is created through the use of features and benefits that appeal to the needs of your visitor.

ACTION: And finally, a strong call-to-action completes the story at the point where your visitor has been convinced that your solution is appropriate for their needs. In this case, it uses contrast and color and defines what you’ll get when you click the button, with a little extra nudge in the copy beside the button.

If you can turn your page’s message into a story, then the AIDA approach can be a very effective way to build a landing page.


 1c. When Should You Place Your CTA Below the Fold?

 The diagram below (from the KISSmetrics blog) demonstrates the correlation between the level of complexity and the best choice of placement on your landing page.

 

 

 









If the product/offer is very simple, and the prospect doesn’t have to do much thinking in order to make an informed decision, positioning the CTA above the fold generally works best.

If the product/offer is complex, and the prospect has to digest a lot of information in order to make an informed decision, positioning the CTA lower on the page generally works best.

Tests have shown that for pages that require a high level of trust – such as those in the health industry – the page performs better by letting visitors read the full story before asking them to convert.

In an experiment by Marketing Experiments, they found that by moving the call-to-action right to the bottom of a long page, the reader was able to digest the amount of information suitable for the purpose of the page – rather than being asked right away to fill in a form, which applied unnecessary friction to the original page.

Another example from ContentVerve shows similar results, where the form was moved to the end of the landing page:

In this case there was a big improvement in the conversion rate of the version with the CTA at the end of the page.

Effective CTA design requires: Contrast, clickability, directional cues, urgency, whitespace…

Button design examples

Now that you understand the rules behind successful call-to-action buttons, let’s look at some examples to give you some inspiration.   

Example 1 

This example shows good use of the clickability rule with a tasteful 3D effect. It also has a supporting statement to clarify the purpose of your click.   







Example 2   

Here we see good color contrast, a descriptive call-to-action text and a directional cue (the arrow) all in one. The word free and a dollar value is also connected via the arrow as a reminder of the value of your click investment.  

  






Example 3   

In this example, we again see excellent contrast, a supporting statement and use of clickability.   





 

 

Example 4   

This example shows the principle of white space to give it breathing room. It also uses color contrast and a supporting statement.   





 


 

 

For more button design examples (including the four above) check out this blog post on beautiful buttons.   

For more guidance on the rules of effective call-to-action design, watch the presentation below, which has 20 Do’s and Don’ts for call to action design.