Where to Put Your Call-to-Actions Buttons? What the Research Says About CTAs

Where to Put Your Call-to-Actions Buttons? What the Research Says About CTAs

When we talk about the optimization of web design, much of our focus often goes towards the obvious elements: content, color, sizing, typography, and so on. But as we saw in the analysis conducted on logo optimization, placement also plays an important role in the user experience.

In building a website around the user experience, the ultimate goal is to develop:

  • An aesthetically pleasing design.
  • A customer journey that’s easy to follow from the point of entry through to conversion.
  • Content that speaks directly to the user’s pain and delivers a much-needed solution.

One of the most important elements you can use in web design in order to effectively shape the user’s experience is the call-to-action.

In case you missed Jon Penland’s recent piece on the best practices for designing calls-to-action, be sure to give it a read. He provides tips on how to design buttons to actually look like buttons, why you should use code over plugins, and, of course, the importance of consistency. Once you’ve got a grip on CTA design best practices, let’s take a look at what the research says about the placement of your CTA.

Experts Weigh In: Where Should You Place Your CTA?

Unlike the logo placement argument which only had two studies to back it, this question of “where should I place my CTA?” is one that marketing experts attempt to tackle often. And it’s probably because it’s so frustrating. As of now, no one has come up with one clear solution like “top-right corner of every web page” that solves this conundrum of where CTAs belong for optimal engagement.

Let’s dig into the studies, the various approaches taken, and the reason for this ambiguity, shall we?

Assessment #1: Above vs. Below the Fold

The fold. Ah, yes. This used to play a big role in web design: put all the important stuff up top and then the secondary information down below. But that was before we had A/B testing and heat mapping tools to tell us that’s not always the case—which is the problem we now face with the placement of the CTA.

So, What Did the Experts Find?

According to Kissmetrics, the CTA placement should be dictated by the complexity of a page. For a shorter page with less information, then it might make sense to put the CTA above the folder. For a longer page that conveys a more complex and thorough investment, the CTA may do better below the fold.

In a test conducted by MECLABS, they attempted to demonstrate this point. They compared the conversion rate difference between:

A shorter home page design that contained a distracting navigation bar, a lack of a value proposition in the content, and a call-to-action form in the top-right of the page.

AND

A longer home page design with content that delivered a stronger, clearer, and more detailed value proposition. They also removed the distracting navigation and placed the call-to-action at the bottom of the page.

What they found was that the simpler and longer layout of the page had a conversion rate that was 220% higher than that of the original control page. The basic assumption here being that because they provided all the useful information visitors needed in a clean and simple manner, they didn’t mind waiting until the bottom of the page to engage with the CTA.

As Kissmetrics explained, “The fold has nothing to do with it. It’s all about motivation.”

Assessment #2: Desktop vs. Mobile

As most of us are smartphone users, it’s easy to understand why this question would even be raised. We use our mobile phones for quick, convenient experiences with the web—on the go, at work, while out shopping. So the last thing any of us really wants is to be forced into unnecessarily scrolling or clicking around a website to get to the desired destination.

So, What Did the Experts Find?

Well, it’s important to note first that many of the studies cited in this article were done before smartphones played a significant role in our daily personal and professional lives. Because of this, the question of desktop vs. mobile CTA placement hasn’t been raised much (if at all). However, here is what I was able to dig up:

Although mobile users have adjusted to scrolling through longer pages, the tendency and preference to click higher up on a page still exists.

In an eye-tracking study done by Mediative a few years back, they wanted to know if search behavior on Google changed for mobile users. Here is what they found:

  • The top organic search result still received more clicks than any other result on the page (including paid). Despite it requiring mobile users to scroll past paid ad results, they were willing to scroll find the result that was been deemed the most relevant by Google.
  • Only 7.4% of all users who clicked on the search results page were willing to scroll past the fourth organic listing.

While I recognize that this information pertains to search listings and not a CTA, I’d like to think the same logic applies. In other words, this sums up what most web designers already understand: mobile users don’t want to work to find information that matters most to them. That being said, this doesn’t mean they’re willing to click on any old CTA placed at the top of your mobile web page; it still needs to be relevant. But the less work you make them do, the better.

Assessment #3: Left vs. Right

This is the most cut and dried result finding I could find regarding CTA placement. The answer in every single debate between left or right placement of a CTA is “right.” And it’s all because of the Gutenberg Diagram.

So, What Did the Experts Find?

Most of you are already familiar with this concept, though you might not have known it was called the Gutenberg Diagram. The diagram marks a “Z” across a web page, divvying up the different optical areas within it. Each end and point of the Z indicate different levels of visual acuity and attentiveness of your visitors.

The Dropbox website follows the principles of the Gutenberg Diagram.
The Dropbox website follows the principles of the Gutenberg Diagram.

Based on this theorem, the two spots on the right (at the first point of the “Z” and the very end of it) are where visitors expect to take action. So there’s really no question here as to where your call-to-action belongs in terms of right or left. It should always be towards the right side of the screen.

Summary of the Results

In sum, here is what we can take away about CTA placement:

  • Always consider the AIDA (Attention – Interest – Desire – Action) before inserting any CTA into your page.
  • It’s okay to place it above the fold if you’ve created a “mini experience” that provides all the information your visitors need to make a decision there.
  • It’s okay to place it below the fold if you’ve created a story that your visitors feel invested in and will want to follow all the way to the bottom.
  • You can also place the CTA below the fold so long as you use directional cues to guide visitors to it.
  • Mobile users prefer to do less scrolling, though only if you’ve provided all the relevant details they need in the decision-making process up top.
  • Fitt’s Law says that if you want your visitors to engage with something on your site, it needs to occur within their page. That’s why it’s best to follow the natural flow of your users’ eyes from top to bottom and left to right.

Calls-to-action are tricky. There’s a lot to take into account when trying to execute these correctly: sizing, color, wording, typography, white space, and now placement.

While the results above do give some clear and not-so-clear guidelines, you may be best off doing what you can to place your CTAs based on what you think your visitors will react well to. Then A/B test. There is a logic to how and why CTAs work in different spots, but you don’t always know how your particular audience will react to it, so don’t go with your gut on this one.

Brenda Barron
Over to you: Has your gut ever steered you wrong on the placement of a CTA? Were you surprised by what A/B testing showed you?