Where to Place Call to Action Buttons on Your Website
Learn the 4 areas on your website to place primary and secondary calls to action (CTAs).
“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 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 four areas 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 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.
Bonefish Grill (see image) achieves this with a CTA in the lower left-corner that changes as the gallery of images transitions. These CTAs are a combination of primary and secondary CTAs. The primary CTA encourages users to make a purchase (Start Your Order) while the secondary CTAs (See Menu, See Specials) link to supplemental information.
- 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 “See Menu” 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
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 and secondary CTAs.
Uncle Julio's uses multiple secondary CTAs in the middle of the page (see image). While this is a great area to make use of several secondary CTAs, I think it would be more effective to use "Free Guacamole" instead of "Complimentary Guacamole." Users like simple language.
- 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
The bottom of the page concludes the marketing story with the same primary CTA that was used above the fold.
Poké Bar uses two secondary CTAs and a primary CTA that concludes their story with "Order Now" at the bottom of the homepage (see image). This call to action appears in both the navigation bar and the bottom of the page, making it obvious what users should do — Order Now. While this design is quite nice, I'd prefer "Locations" to be "See Locations" and to use the same turquoise button in the navigation bar.
- Repeat the same primary CTA that was used above the fold to conclude the marketing story
- For blog posts, use CTAs that promote your menu items
The footer is a great place for CTAs because it's accessible from every page of a website. Oak Steakhouse understands the merits of the footer (see image). They've included their primary CTA there, along with hours, contact information and even awards. While awards would be better positioned as part of the marketing story in the top or middle of the page, the other information here works very well.
- Use primary or secondary calls to action
You just learned four areas to place 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 analyze user data and adjust accordingly.
Where to Place Call to Action Buttons on Your Website first appeared on the Bento Sites Blog by Jeff Shibasaki.