Part 3: Call-to-Action Placement & Design
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.
Your call-to-action represents a handshake agreement
between you and your prospects.
Greet them properly and deliver on your promises.
Today’s Course Outline
You’ll want to pay very close attention to what we cover today as it can make or break your marketing campaigns. This part of the course will cover:
- CTA placement
- Above the fold
- Below the fold
- When you should place your CTA below the fold
- CTA button design
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 – The 6-point punch
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:
- A powerful and descriptive headline: The type that stops you in your tracks when you see it in a newspaper dispenser on the street.
- 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.
- 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.
- Benefit statements: These should succinctly describe the core benefits of your product or service and the pain your offering solves for prospects.
- 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.
- Confidence/trust indicators: This is where you backup your claims with a testimonial, customer logos press mention logos.
Using these 6 steps you can create a mini experience above the fold that can improve your potential for an above-the-fold conversion.
1b. 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.
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.
2. CTA Button Design
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.
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.
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 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 Content Verve:
- 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.
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”.
- White space
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.
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.
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.
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.
In this example, we again see excellent contrast, a supporting statement and use of clickability.
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.
Let’s focus our landing page on one thing at a time – the call-to-action!
It’s hands-on time again. Today we’ll see how and why you should remove the clutter to focus attention on only one thing… your call-to-action.
Remember to follow along with a free Unbounce landing page account
You probably already have a free Unbounce account by now to build your landing pages. If not, you can open a free Unbounce account (60 seconds to sign up – no credit card required). This will let you create landing pages for the examples we use throughout the course.
Watch this video to see how you can take your call-to-action from zero to hero
Calling all button experts! Who’s the best?