Where to Put Call to Action Buttons on Your Website

 
 where-to-put-cta-buttons-on-website

“See Rock City”

Have you ever seen the billboards with those 3 words?

In the 1930s, a Chattanooga real estate developer named Garnet Carter struggled to promote his tourist attraction atop Lookout Mountain that consisted of unique rock formations, gardens and the curious Fairyland Caverns because it wasn’t noticeable to passersby.

As a result, Carter hired a painter to transform nearby barns into billboards by painting SEE ROCK CITY in bold, white letters across barn rooftops. Those 3 words induced visitors to visit the mountain-top attraction and saved Rock City. When the painter retired 3 decades later, he'd painted more than 900 barns that spanned 19 states.

For almost 90 years, anyone passing those billboards has been urged to "See Rock City" –– and that makes it one of the best and most enduring calls to action (CTA).

Likewise, your website should also use calls to action to induce, urge and instruct visitors to click. A website without a call to action is incomplete and buttons that don’t call visitors to action (e.g. Hair Salon Services) are just links. CTAs start with action verbs (e.g. Book Now).

While the size, color, text, font and white space are key components to emphasize a CTA, knowing where to position buttons on the page is also critically important. Otherwise, visitors will click away and opportunities will be lost.

In this post, I’m going to share 4 areas to put call to action buttons on your website.

1. Top of the Page / Above the Fold

 above-the-fold-cta-1password-example

Above the fold is a term that originated with the newspaper industry where the main headline is visible when a paper is folded. Below the fold is everything else that is not visible when a paper is folded.

In web design, above the fold is used to describe the top of a page that’s visible without scrolling on desktop, tablet and mobile devices.

So, where is the best position for a CTA above the fold? According to the Gutenberg Diagram, Western readers scan pages in a “Z” formation because that’s how we read — left to right and top to bottom. As a result, the best position for a CTA is the end of the "Z." This is why CTAs are stuffed into blog sidebars. Personally, I'd worry less about positioning CTAs on the left, right or center of pages and focus more on emphasizing CTAs, so they pop off the page and induce visitors to click.

My favorite password manager, 1Password, achieves this with 3 CTAs (see image) above the fold; 2 primary CTAs in the navigation bar and website banner (Get started) as well as 1 secondary CTA (Watch Video).

Secondary calls to action provide visitors with supplemental information (e.g. Learn More, Watch Video, Read the Blog, Subscribe to the Newsletter, etc.) or funnel them to an email list if they’re not ready to buy. Just like 1Password uses an outline button instead of a solid button, secondary CTAs should be visually different from primary CTAs.

Still, 1Password should capitalize all of the text on the primary CTA (Get started) or change the CTA to “Free Download” and add a benefit statement below like “30-day trial.” Even though calls to action start with action verbs (e.g. See, Call, Buy, Shop, Subscribe, etc.) –– “Free” is the exception. Consumers associate “Free” as a call to action.

Action Step

  • Position the primary CTA below the header and/or sub-header — either on the left, right or center of the page

  • Use a secondary call to action like “Learn More” or “Watch Video” for visitors who aren’t ready to buy

  • Include an urgency statement or a short benefit statement below the CTA

  • If necessary, use directional cues that point to the call to action

  • Use A/B testing and heat map tools like Crazy Egg or Hotjar to understand how visitors navigate your website and use that data to create higher converting CTAs

2. Middle of the Page

 middle-of-page-cta-xero-example

In marketing, AIDA is an acronym that stands for Attention, Interest, Desire and Action. It describes the steps that a website visitor progresses through — from becoming aware of a product or service to becoming a customer. As visitors progress through the marketing story, they need to be called to action with both primary CTAs and secondary CTAs.

Xero, the online accounting software, achieves this by using multiple “Learn More” and "Play Overview" CTAs (see image). While there are 18 CTAs in this section, it works beautifully because of the icons, organization and how Xero illustrates how they solve several different business problems. And since Xero uses a fixed navigation, visitors can click the bright green "Free Trial" button anytime they're ready to try the software.

Action Step

  • Consider the AIDA acronym before adding CTAs

  • Repeat the same primary CTA that was used above the fold

  • Use relevant secondary CTAs

  • For blog posts, use CTAs that promote relevant products/services or use CTAs that build your email list



3. Bottom of the Page

 bottom-of-page-cta-hello-fresh-example

The bottom of the page concludes the marketing story with the same primary CTA that was used above the fold.

Hello Fresh, the popular meal delivery service, uses the same primary CTA at the bottom of the page that's used above the fold on the banner image — “View Our Plans.” They also use a fixed navigation bar. This way, “Get Started” is always visible, even at the bottom of the page.

Action Step

  • Repeat the same primary CTA that was used above the fold to conclude the marketing story

  • For blog posts, use CTAs that promote relevant products/services or use CTAs that build your email list

4. Footer

 footer-cta-kitchen-stories-example

Many small business owners who've DIY'd their website often ignore the footer. The footer is key because it appears on every page of your website. Use that to your advantage!

With Kitchen Stories, the recipe app, the footer is made up entirely of calls to action –– buttons and text. There are CTA buttons to "Enter email address" and Download on the App Store" and "Get it on Google Play," but there are also several textual CTAs that consists of the following:

  • Connect

  • Join

  • Find

  • Follow us

  • Subscribe to our newsletter

  • Get the app

  • Download on the App Store

  • Get it on Google Play

  • Change language

The web designer at Kitchen Stories clearly understands the power of verbs.

Action Step

  • Use relevant secondary calls to action

  • If you need help creating CTAs, get my free Action Guide — 200 Call to Action Examples (below).

Wrap Up

You just learned 4 places to put call to action buttons on your website. Think about where you expect CTAs when you visit a website. What do you expect above and below the fold? Start positioning your CTA buttons more strategically and use A/B testing and heat map tools to get the visitor data and adjust accordingly.

Now, go master your website.

Where to Put Call to Action Buttons on Your Website first appeared on the Bento Sites Blog by Jeff Shibasaki.