SEE ROCK CITY
Have you ever seen the billboards with those three words in all caps?
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 and gardens because it wasn’t noticeable to passersby.
Carter decided to hire a painter to transform nearby barns into billboards by painting SEE ROCK CITY in bold, white letters across the rooftops. Those words induced visitors to drive up to the mountain-top attraction and eventually saved Rock City. When the painter retired three 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 include calls to action that induces, urges and instructs visitors to click. A marketing website without a call to action is incomplete and buttons that don’t call users to action are just links.
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, users will click away and opportunities will be lost.
In this post, I’m going to share where to put call to action buttons on your website.
1. Top of the Page / Above the Fold
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’s not visible.
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-pattern 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 pattern. Personally, I’d worry less about positioning CTAs on the left, right or center of pages and focus more on creating clear and effective CTAs that pop off the page and induce users to click.
In the example above, the popular password manager, 1Password, uses four CTAs above the fold. Since users often have to encounter a CTA several times before clicking, keeping the language consistent is key. That’s why I would’ve changed all of 1Password’s primary CTAs to Get Started and added a benefit statement in the hero section that says 30-Day Free Trial.
- Position the primary CTA below the header — either on the left, right or center of the page.
- Use a secondary call to action like Learn More or See Menu for users who aren’t ready to buy.
- Include a benefit statement or urgency statement below the primary CTA on the hero section.
- 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
In marketing, AIDA is an acronym that stands for Attention, Interest, Desire and Action. It describes the steps that users progress through — from becoming aware of a product or service to becoming a customer. As users progress through a website’s marketing story, they need to be called to action with primary CTAs, but also secondary CTAs that answer objections, provide supplemental information or move users to an email list if they’re not ready to buy.
Xero, the online accounting software, uses multiple secondary CTAs. While there are seven CTAs in this section, it works beautifully because they differentiate each group of CTAs. The Learn More CTAs are in all caps, the Play Overview CTAs are also capitalized, but have a smaller font size.
The section concludes with a button to Explore more features. And since Xero uses a fixed navigation, visitors can click the green Free Trial button anytime they’re ready to try the software.
- Consider the AIDA acronym, so there are CTAs for each phase of the marketing funnel.
- Use secondary CTAs like Learn More, Watch Video, Read the Blog and Join the Newsletter, etc.
- For blog posts, use CTAs that promote offers or use CTAs that build your email list.
3. Bottom of the Page
The bottom of the page concludes the marketing story, usually with the same primary CTA that was used above the fold.
Hello Fresh, the meal delivery service, uses the same primary CTA at the bottom of the page that’s used above the fold — View Our Plans. Like Xero, they also use a fixed navigation bar. This way, the Unlock Offer CTA is always visible — even at the bottom of the page.
- Repeat the same primary CTA that was used above the fold to conclude your marketing story.
- For blog posts, use CTAs that promote your offers.
Many small businesses who’ve DIY’d their websites often ignore the footer. The footer is key because it appears on every page of your website. Use that to your advantage!
The recipe app, Kitchen Stories, understands that CTAs start with action verbs. Not only do they have CTA badges to Download on the App Store and Get it on Google Play, but they have text-based CTAs to do the following:
- Follow us
- Subscribe to our newsletter
- Get the app
- Change language
- Use primary or secondary calls to action.
- Include a newsletter sign up form since it appears on every page of your website. If possible, use a CTA that offers something of value for signing up like Sign Up for Offers.
How To Design an Effective Call to Action Button for Your Website
Design an effective call to action (CTA) button for your website that’s clear, concise and enticing.
8 Calls to Action for Restaurant Websites
Use these primary and secondary calls to action (CTAs) on your restaurant website to increase conversions.
You just learned where to place call to action buttons on your website. Think about where you expect CTAs when you visit websites. What do you expect above and below the fold? Start strategically positioning CTA buttons and use A/B testing and heat map tools to analyze user data and adjust accordingly.