8 Rules for Designing Call-to-Action Bars

A call-to-action (CTA) bar is a widget area on your page, typically in a color that stands out from the rest of the design and invites visitors to take an action. Using anchor text in your call to action can increase your conversion rate by as much as 121 percent. Call to actions matter, and the way you deliver them matters.

You already know that UX is extremely important – the user experience is everything if you want visitors to stay on your site. Figuring out the best way to present even a CTA bar can mean the difference between strong conversions and weak ones. If you aren’t quite sure how to utilize a CTA bar, here are eight rules you can follow to make sure yours is as effective as possible.

1. Color

Just as with CTA buttons, the bar needs a color that stands out and grabs the user’s attention. In multiple case studies, red buttons convert better than other colors. An orange-red converts the best. Keep this in mind when adding a bar to your website. You want the color to grab the attention of the user and encourage him or her to take an action.

However, don’t be completely tied to always using red. Your palette still needs to make sense. Consider Instagram’s call-to-action bars on sponsored posts. In this instance, they place the CTA directly under the ad, and then they match the color of the bar to the colors in the ad. This is a brilliant move that allows the advertiser to present a professional look that entices the viewer.

2. Typography

What typeface should you use in a CTA bar? Since the text tends to be condensed to a smaller size, you’ll want a type that not only converts well on mobile and at different sizes but that is sharp and easy to read. Stay away from script fonts or fonts with a lot of serifs. The blockier and heavier the font is at smaller pixels, the better your result.

Good typography looks clear whether you have bold, standard or italicized sections of text. Note the popup CTA bar you’ll find in the pricing section at WP forms. It utilizes color as mentioned above, but it also utilizes strong typography that is very easy to read and has a bold section to inform the customer of a special offer.

3. Location

Where your CTA bar is located can make a big impact. Traditional marketing methods say to put it above the fold — or the top part of your page that a visitor sees when landing there — and this is the most common place to find a CTA. However, some sites have had success with placing the CTA at the bottom of the page where people are used to seeing a button. You can also mix things up and place it right in the middle of your page.

4. Rotating Bars

There is no rule that says you have to put up a CTA bar and leave it there. One way you can maximize your bars is to create multiple offers and target them to the user. You can either do this by creating multiple landing pages or by using cookies to deliver content to just the right user. However, the second is a very advanced coding technique, so if you have a small budget, you’d be better off creating multiple landing pages and advertising to your target audience for each.

5. Content

The actual content you place in your CTA bar is as important as the color, size and location. If the wording isn’t right, users might not take the action you want them to take. You need to think of words that will entice your typical users. Think about what to offer them that they will most want.

Note the wording at Sincerely Nuts as an example. Not only do they let their visitors know that shipping is free, but they also let you know what products are available or back in stock. The bar then asks you to “shop now,” which is a direct command that the visitor can follow. The wording on this bar is quite effective and aimed directly at the typical consumer who shops on this site.

6. Size

At first glance, you might think of a CTA bar as a narrow horizontal line that runs across the page, but the size of your bar can vary widely. Some bars are quite tall, which can work particularly well in the middle of a page or as featured content just under the navigation bar. If you want to use an image or video to really grab the attention of site visitors, you can place this inside a bigger CTA bar.

Take a look at how tall Hootsuite’s CTA bar is. It is located just under their navigation, captures the ability of the software in a background image and then invites the site visitor to start a 30-day free trial or compare the available plans. A taller CTA bar also allows you to add a bit more text or a headline in a slightly larger font.

7. Overall UX

When you’re creating your call-to-action bar, you need to consider the overall user experience. Even though it might make sense to put the bar in the middle of the page, if it is going to obscure the visitor from seeing content, then that isn’t a good placement. You also want to check your bar on different screen sizes. Something that works for a desktop might take over the whole screen in a mobile device.

8. Linkage

Create a link within the CTA bar so visitors can click and go directly to the location you are commanding them to go to. This might sound simplistic, but some sites design a CTA and make the link area so small that it is difficult to find. Try not to use a single word to link. Either add a button within the bar or make the entire bar clickable.

CTA Bars for the Win

Adding a CTA bar can grab attention and help increase your overall conversion rates. There are many different programs out there that will allow you to create a call-to-action bar and many different ways to present them. Remember, the bar should go with the overall look of your site.