Best Practices for CTA Placement

CTA Buttons | April 17, 2018 | 8 min read

In our other sections on CTAs, we’ve recommended best practices for both button design and button copy. But of course neither of these elements can be considered apart from that crucial third element: button positioning. Because no matter how standout a color you’ve given your CTA button, no visitor is going to see it if it’s situated at the bottom of a very long landing page.

That’s not exactly to say you should simply place your CTA front-and-center above the fold of your homepage and call it a day. (Though we do generally recommend above-the-fold placement… indeed, we do it ourselves here at Zoho):

As with just about everything on your business website, the art of placement is a bit more nuanced than that, and you shouldn’t be surprised to hear it takes into account some combination of visitor psychology and user perception. And so, here are our recommendations on placement:

Position it at your prospects’ desire point/s

According to a frequently cited study performed in 2010, web users spend about 80% of their time “above the fold” (in the initially visible portion of a web page—what you see before you scroll down) on any given page. In response to this study, a chorus of conversion pros has recommended that all CTA buttons on all pages be placed above the fold.

These responses fail to take into account two important things. In the first place, it’s no longer 2010. We’ve evolved as the web has evolved; and as we’ve grown accustomed to our mobile devices, scrolling has virtually become second nature. (Note, though, that we only scroll down if we like what we see above the fold!)

In the second place, it fails to take into account the psychology of a visitor who is trying to understand a more complex product or service. Such prospects require a more comprehensive page and time to digest the information you’re offering them. Michael Aagaard once optimized a CTA for a relatively complex subscription service by placing the button well below the fold. That CTA experienced a 304% increase in conversions.

The reason for the increase? The service had to be explained in full before visitors were ready to commit.

It makes sense to place a CTA above the fold on a page whose product or service is straightforward and familiar… or free! That means either your users already know the value they’ll get when they take action, or they’re not taking financial chances on your offering.

For example, Vertical Response offers a free version of their email marketing software. And because their product requires no financial investment, they can put their CTA above the fold (twice!).

However, if your CTA requires a heavy commitment (in terms of money, time, or comprehension), your prospects will likely want to read your entire page before committing.

They’ll need time to analyze your product’s features, benefits, and relevance to their pain points, and to understand why your product is a smart investment. They’re likely to skip past a CTA at the top of the page, and will look for it, instead, at the bottom, once they know more about your offering. In such a situation, you might actually reduce conversions if you only offer one CTA, and it appears on your page too soon. (That’s why we’d suggest one CTA above the fold for prospects who already know the details of your offering, and another after your descriptive copy for prospects who need more detail.)

In other words, there’s a general correlation between product complexity or price and optimal CTA placement. You should predict the point at which your prospect will be ready to take the next step, and put your CTA there. This means knowing your prospects well enough to know where both their desire for your product and their willingness to pay for it will be the greatest. (Heatmaps and scrollmaps are helpful tools for collecting this kind of data.)

Ask yourself what stage your prospects are in by the time they arrive at the page you’re considering. If they know they want your product (or subscription, or free trial, etc) before the page even loads, give them the CTA immediately. If the majority (but not all) of your visitors are unfamiliar with your product, put one CTA above the fold and another at the bottom of the page.

If the page copy is long and there are a few possible points at which your prospects will be ready to take action, disperse a few CTAs throughout the page at contextual intervals, like Copyblogger does for their content marketing program:

Your prospect should never have to scroll back to the top of the page (or all the way down, for that matter) to find your CTA once they’ve made their decision. Your CTA button should be placed conveniently in the path of your prospects’ growing desire.

Use negative space effectively

In design terms, negative space (often called “white space,” though that’s a misnomer) is the space between paragraphs, graphics, images, and other elements of your web page. White space is not an accidental element of a page; it’s a critical part of good user experience (UX), page balance, and overall elegance. As Paul Boag has explained, negative space also increases legibility, as well as viewers’ comprehension and attention.

As a general rule, the emptier the space surrounding an element is, the more noticeable that element will be. Apple uses plenty of “white” space on its product landing pages. (Although if it were up to us, those “CTA buttons” would actually look like buttons):

A CTA surrounded by white space will be more visible than one sandwiched between text and graphical elements. You want your button separate enough from these other elements that it commands attention from your visitors.

Anything that might serve as a distraction—such as social media buttons or unrelated content—should be far away from your CTA. (We talk more about what can be near it in our section on button copy.) Reducing such distractions was one of the ways Open Mile boosted their CTA conversions by 232%.

That said, don’t give the button too much space, or else you run the risk of making it look unrelated to your content. As with so many elements of your CTA optimization experiments, the perfect amount of negative space will come from some combination of common sense and A/B testing.

Keep your pages focused

You’re putting a lot of forethought into a single CTA button. The last thing you want now is for it to compete with another button for a completely different action on the same page. Remember that every new CTA you add to a page reduces the impact of each individual CTA.

Studies have shown, again and again, that the more choices people are offered, the less likely they are to take action on any of them. (Psychologists call this “choice overload” or “analysis paralysis.”)

So don’t offer your prospects too many possible actions at once—we’d suggest no more than two. And don’t distribute their attention too broadly: If your visitor sees two CTAs at once, for example, the second one should be there in support of your primary CTA. You have one goal for your page, and that’s (one) conversion. (Your homepage may be the exception to this general rule, as it’s trying to capture a range of visitors and prospects at once.)

It helps to ask: What is the single most important action I want prospects to take on this page? Maybe it’s signing up for a newsletter. Maybe it’s downloading a free trial. Maybe it’s purchasing a product.

If your answer is all three, then you may have one or two pages too few. Unbounce’s co-founder Oli Gardner calls this keeping an “attention ratio” of 1:1.

Exceptions to the “single CTA” rule

That said, there may be times when it makes sense to have more than one CTA on a single page. For example, you may want to offer your prospects the opportunity to “take the tour” or “watch the video tutorial” before they buy. Offering a secondary (but only a secondary) action may be what pushes your prospect further down your sales funnel, so it makes sense to have those alternate actions placed there.

In such cases, it’s important that you’re clear on the hierarchy of your CTA buttons: Which one leads to the conversion, and which one is there in support of it? Guide your prospects toward the CTA that is most important for your conversions by making that button the most visually striking, and the less conversion-centric CTA less attention-grabbing.

We suggest that you make those lesser CTAs smaller, lighter, grey-scale, or transparent ghost buttons. They’ll still be available to a prospect who needs to take another action before converting; but they’ll pale in comparison to your primary CTA, increasing both its attractiveness and its clickability.

Muting all secondary buttons conveys to the user that the other option—the one with the more vibrant button—is the better choice. Livestream offers a great example of this hierarchy:

Clearly, Livestream prefers that its prospects “Get Started” (this is where the conversions happen for them, after all); but the “Request Demo” ghost button is there for prospects who need more time with the product before they make a decision.

Stripe also considers CTA hierarchy on their homepage:

There are two CTAs below the fold here: “Create Stripe Account” and “Contact Sales.” It’s abundantly clear what Stripe’s primary CTA is, because it stands out more visibly against the page’s light background. (Stripe’s sales team—which is probably fielding fewer emails because some prospects are simply choosing the “Create Account” button instead—may be grateful for this.)

Compare these examples to Salesforce’s homepage, on which visitors are offered two options: to “Watch Demo” or to “Try For Free.”

Salesforce probably wants its visitors to click on the “Try For Free” CTA, since that’s the button that’ll push its prospects closer to conversions. And yet that’s not the button that stands out, because so much of the imagery above the fold is green. From a pure conversion standpoint, Salesforce doesn’t appear to be driving its visitors toward one particular goal.

Neither does NetLine, for that matter:

Undoubtedly, what NetLine wants its prospects to do is “Get Started Now.” But both of their CTAs look exactly the same. And without that visual hierarchy, NetLine runs the risk of prospects clicking on “Watch How It Works” and then clicking out of their site due to boredom, interest sparked elsewhere, or because they’ve got somewhere else to be… all without ever clicking on that “Get Started Now” button.

If A/B testing shows that giving your prospects the opportunity to “Talk to Sales” or to “Watch a Demo” of your product will actually increase conversions, then by all means, place those buttons beside the CTA you eventually want your prospects to click into.

But always ensure that the more conversion-centric CTA (“Create Account,” “Get Started,” “Try it For Free”) is the button that pops.

So there you have it: We’ve covered best practices for CTA button design, copy, and placement. Of course, you’ll have more than a single call-to-action on your business website: Indeed, we recommend you have one on every page. (What that CTA is will depend on your visitors’ state of mind on that particular page.) So it’s worth clicking into the websites we’ve offered to see how those businesses are using CTAs on other pages of their site. Livestream, for instance, has an exemplary CTA hierarchy on its pricing page:

And we think we did alright with the CTA above the fold of our CRM product page:

But it’s worth clicking into the websites of some of your favorite (successful!) businesses to see how well they’re playing the CTA game. Pay attention to how the button colors play with the other colors on their pages. Observe what their button copy is doing, and what language or design elements surround them. How far down the page do you have to scroll to see their CTAs? To what degree is this scroll time a function of the product or service’s price or involvement?

You know the questions to ask at this point. So go ahead and do a little “CTA critique.” Doing this exercise this with other websites will be a considerable help when it’s time to sit down and think about your own.

 

In the next section, we’ve got a CTA button checklist for you. Print it out and keep it near, so that with every new call to action you add to your website, you can ensure you’ve got all your “best practices” bases covered.

Next Chapter
Previous Chapter