Would you wear a brown belt paired with black shoes to a client meeting? No, right? Then why does your call to action (CTA) design consist of you trying to fit the mythical red CTA button in a purple background?
Before we answer that question, what is a CTA? Over the years, CTAs have evolved, and today they come in all forms and patterns.
A CTA could easily be a subscription to your blog or newsletter. It could be an offer you give out on your products or services, or it could even be an offer for a free trial.
But at the end of the day, a CTA is a simple yet mandatory BUTTON that calls the user to take an action.
Making CTAs look like buttons created a 45% boost in clicks for CreateDebate.
—CopyBlogger
What Can a CTA Offer?
You could be pulling off the black Armani suit, but does that even matter if you are wearing it to a Halloween party?
Similarly, there’s a time and place for a CTA. Even if the CTA is well designed, it won’t make a difference if you have not placed it correctly.
Here are some of the ways you can use the right combination of offer and placement to form the right CTA:
- Inline CTA
- Slide-In CTA
- Sidebar CTA
- Header CTA
- Scroll Intent CTA
- Time Intent CTA
- Exit Intent CTA
- Footer CTA
How Do These CTAs Work?
Personalized CTAs convert 42% more visitors into leads than targeted CTAs.
—HubSpot
1. Inline CTA
People generally use an inline CTA within a blog after several paragraphs. They educate the user about the product/service the CTA mentions before the reader actually gets to the call to action.
The explanation is mandatory because the user needs to find a connection between the blog post and the inline CTA within the blog. Apart from this, the user also gets to feel in control while navigating through your blog.
2. Slide-In CTA
The slide-in CTA rolls in from the side and remains there till you hit “X” or quit the page. This CTA generally appears after the user has scrolled to a certain point.
It usually pops out after a blog has covered the educational information related to the CTA. It’s important to create this CTA so that it doesn’t cover any part of the content of the blog.
3. Sidebar CTA
There are two types of sidebar CTAs: sticky or static. The sticky sidebar CTA scrolls as you scroll down the page.
The static sidebar CTA stays where it is and will come into focus only if you return to the point where you originally saw it.
You can place this CTA on the side of any page, and it usually offers people the ability to download an eBook. Your eBook might be any kind of a helpful guide that would be in demand all year long, such as a website testing checklist.
4. Header CTA
A header CTA could be either static or sticky, depending on the kind of header you use. People tend to use header CTAs for offers that are brand new, such as a new kind of service or a new product launch.
It is common to place a “subscribe” button in the header so that users can easily subscribe to blogs and newsletters the moment they find something worthwhile on your site. You can use Hello Bar to create good header CTAs.
5. Scroll Intent CTA
A scroll intent CTA is similar to a slide-in CTA. The scroll intent CTA also pops up after the user has done a great deal of scrolling on a particular page.
But instead of remaining on the side like the slide-in CTA, the scroll intent CTA covers the entire page like an overlay.
To implement this type of call to action, you need user behavior tracking. That way, you get a better understanding of the timing of a scroll intent CTA. You can analyze user behavior using various tools such as Hotjar and Google Analytics.
6. Time Intent CTA
A time intent CTA pops up after the user has spent a certain amount of time on your page. Analyzing user behavior becomes mandatory here. Timing a CTA badly annoys users, and some claim that poorly timed CTAs have spoiled their user experience.
7. Exit Intent CTA
An exit intent CTA is the one that pops up when a user decides to leave. An exit intent CTA is usually the largest of all the CTAs.
It covers the entire page with a fading background. This CTA usually contains the best of the offers because it pops up when the user shows a desire to leave the website.
In this type of CTA, marketers usually give away certain products or services at a discounted rate or for free. This call to action is all about giving the user an incentive to stay.
8. Footer CTA
Designers place footer CTAs in the footer at the end of the page. The sole purpose is to provide the option to subscribe to your blog or newsletter or to get a quote.
The footer CTA usually targets the page skimmers who don’t read a lot and are in a hurry to finish looking at the page.
Neil Patel found that users prefer to learn about the offer before clicking a CTA.
CTA Design Myths and Realities
Here are some CTA myths and realities you should know! (Free fashion tips also included.)
1. The Right Font
There’s no particular size of a Vera wedding gown that could fit all the brides in the world. Similarly, there’s no one font size or type that would work on every website in the world.
Tip: Don’t meddle with your font type. Keep it same for your entire website and the CTA. You can, however, make the font two sizes larger so your CTA will stand out.
2. The Right Color
As with wedding gowns, there is no one color shirt that would look good on just about everyone. It all depends on people’s skin tones and the color of the pants with which the shirt is pairing. Who in his right mind would wear a brown shirt with black pants?
Similarly, there is no one color that works on every website. Choose your CTA color based on the other colors on your site. Let’s face it, a purple CTA won’t work on an indigo background.
Tip: Use a color that contrasts with the color used on your website. Make sure the color you choose is not so bright that it is jarring and not so dull that no one notices it.
3. The Red CTA Button
Putting purple shoes with a red dress is nothing less than the worst kind of fashion disaster. Yes, I get it! Red evokes the emotion of urgency. But red doesn’t go with purple, and people won’t even notice a red CTA button in a purple sea.
Tip: The color of your CTA button must complement the background color used in the CTA, as well as the brand color.
What You MUST Do, Plus WHY and HOW
Let’s start off with what you MUST do:
1. If you’re using an exit intent, time intent, or scroll intent CTA, make sure the cross sign is visible.
Why: If the cross sign is missing, the users will feel trapped. They will shut the tab and probably never return.
How: The cross must be visible on the upper right-hand side of the CTA in a size and color that will make it easy to see.
2. Make sure the text in your slide-in, sidebar, exit intent, scroll intent, and time intent CTAs have the punch of a one-liner (i.e., use few words).
Why: Readers are impatient. If you can’t convey your message to them quickly and in simple words, no one will click on your CTA.
How: Use phrases such as “Click This,” “Click Here,” “Download This for Free NOW,” and “Join X Number of Subscribers.” Only use the last example if your number is greater than 50,000. Don’t use more than seven words.
3. Make sure the text you use in header and footer CTAs is shorter than what you put in your other CTAs.
Why: Increasing the words in your header and footer CTAs means cluttering the header and footer of your site.
How: Use phrases such as “Subscribe,” “Get a Quote,” etc. These expressions directly convey the message to users in very few words.
4. The text above an inline CTA must explain the importance and effectiveness of the product. The flow of the words should lead the user to the offer.
Why: There’s no point in adding an inline CTA for downloading a free eCommerce guide when the blog talks about user experience through navigation.
How: Explain the effectiveness and power points of the product to evoke the need for the product within the user. Then you can place the inline CTA within the blog.
5. Use the incentives of urgency and scarcity.
Why: Everyone wants anything that is scarce and urgent. Words that imply scarcity will make the user take quick action.
How: Use phrases such as “Last 2 Hours to Go,” “Free Today,” “Last 20 pieces Available,” etc.
6. Size matters.
Why: The size of the inline, slide-in, or sidebar CTA must not be too large. If they are, they will take the user’s attention away from other web elements on the same page.
How: The above three CTAs must be only so large that six sentences broken into two paragraphs are present above and below the CTA.
7. The slide-in CTA must have an “X” sign and must not be superimposed on the website’s text.
Why: If the slide-in CTA is superimposed on the text on the website, it will annoy the users because it will break the flow of their reading. And if users cannot click out of the CTA, they will simply leave the site.
How: Adjust the text margins on the site, as well as the size of the CTA, so that it is not superimposed and so that the cross sign clearly visible.
8. Place your CTA with enough space around it.
Why: A CTA with a lot of website elements around it won’t grab the user’s attention. It will make the user think less of the cluttered web design.
How: Make sure there is ample white space around, as well as within, the CTA. If there are too many web elements on a page, don’t place your CTA there.
9. Give users only two choices if you must.
Why: In case you get the urge to give users a choice in the CTA, give them only two. More than two choices will weaken the decision-making power of your users.
How: Make the choice really easy. For example, it could be choosing between “Yes! I want the free eBook today” and “No! I want to pay $9.99 for the eBook tomorrow.”
Reducing clutter around their CTA increased Open Mile’s conversion rate by 232%.
—VWO
Takeaways
The size of the CTA must be such that it neither merges with the background elements nor dominates the rest of the site.
The color you use in the CTA must make it stand out from other elements. At the same time, it must contrast with the background color and fit with your other web elements.
The text in the CTA must not be very long, but rather punchy and to the point. It should fit the context of everything that you explain about your product before readers arrive at the CTA.
Ensure that your CTA doesn’t hinder the content on the website and that readers can exit the CTA when they want to do so.
The text in the CTA must include the incentives of scarcity and urgency. Include no more than two choices, a smart one and a dumb one.
Lastly, place your CTAs in an uncluttered environment with ample white space around it.
Tools
Here are a few tools for you to consider.
Kissmetrics
Kissmetrics is an analytics tool that lets you analyze and create CTAs according to user behavior.
Hotjar
Hotjar will let you visualize user behavior, visitor recordings, and get a form analysis in order to help you decide on the best CTA placement.
OptinMonster
OptinMonster is a lead generation software that helps marketers create awesome CTAs.
Tip: Make sure that you convey your CTA message as clearly as possible so that users get the exact idea of what they are doing and why.