Have you given much thought to what the “action” in a call to action really is? Whether you’re asking visitors to subscribe to a newsletter, schedule a demo, sign up for a free trial or buy your product, what you actually want them to do is to click a button. This may seem like an over-simplification but, when it comes right down to it, effective calls to action are the ones that result in clicks. That’s because, without the act of clicking, there can be no conversion.
Looked at this way, creating effective calls to action is a matter of addressing the two questions your visitors will ask: Where should I click? and Why should I click? The first question is answered through the look and feel of the CTA button, while the second question is answered through the text on the button and the surrounding copy.
1. Where Should I Click? (the button)
Based on past experience and prior behavior, website visitors expect the call to action. When visitors get to your page, they are ready for the experience of being prompted to act. This means one of the first things they do is try to spot something on the page that looks like a button and that cries the equivalent of “click here.”
Does the button look like a button?
The first thing a CTA button should do is communicate that it is a button. In other words, it must say, “I am an interactive, clickable element of the UI.” There are a number of ways it can do this:
Contrast. Making elements on a page look different is a key principle of design. Contrast attracts the eye and helps us make sense of what we’re looking at. Use color, size, whitespace or typography to make your CTA button stand out so visitors not only distinguish it from other elements, but identify it as the most important one.
Example: MailChimp Sign Up Page
MailChimp’s big, orange sign up button stands out from the rest of the page through use of contrasting color and lots of whitespace.
Color. Instead of worrying about which color will have the desired psychological effect, think about how to use color to make your CTA button stand out in the UI and signal its importance. One way to do this (and following on the concept of contrast) is to use complementary colors (colors that are opposite each other on the color wheel). For example, you can create a red button on a blue background or a blue button on a green background. A general rule of thumb is to make your button noticeable enough without interfering with the rest of your design.
Size. Using larger sizes is another good way of making the CTA button stand out. The actual size of the button is not important. What matters is the size in relation to the other elements.
Shape. To make your buttons look more like buttons, use rounded corners and apply shadow, border, bevel or gradient effects. Rounded corners also point inwards and so draw attention to the button text.
Feedback. Using visual cues to indicate the status of a button is one of the main ways to signal interactivity or “clickability.” Use changes in color, hue, typography or shape to indicate when a button is in the default, hover and click state.
Can visitors find the button? Can they find it at the right time?
Location and timing of the CTA button are as important as how you make the button look.
Absolute Position: One school of thought is that the button should always be above the fold since few site visitors scroll past that point. Others argue the button should appear at the bottom of the page.
Contextual Position. An alternative to using a hard-and-fast rule for location is to place the CTA button on the page in relation to the page’s content. For example, placing a Buy Now button near the top of the page is not very effective if the visitor is not yet familiar with what he or she would be buying. In this case, it makes more sense to place the CTA button below the copy that describe’s the product’s features, benefits and, yes, cost.
On Load, On Scroll, On Exit. When the button appears is something you can control if you use a lightbox or a modal popup to display your call to action. For example, if the traffic source for a landing page is a referral site or another page on your site, it may make sense to display the CTA as soon as the page loads since you know visitors are already engaged. But if visitors are anonymous, it’s more effective to display the CTA on exit after they’ve had a chance to get to know your product or service.
Example: GrubHub Exit Intent Opt-in
GrubHub’s email sign up form appears as a modal popup window when visitors exit the site.
2. Why Should I Click? (the copy)
Just because your visitors are expecting the CTA does not mean they will convert. The design of the CTA button may have done the job of helping visitors find it and arrive at that “click here” moment, but it’s up to the CTA copy to finish the job. It is ultimately the text on the CTA button and the surrounding copy that will convince visitors to go through the act of clicking by giving them a reason to do so.
Does the copy make the CTA clear and direct?
Just like any other button, the CTA button should clearly communicate through its text what action will occur when the user clicks it. In the case of CTA button, however, the text must be more specific and direct than a simple command like “Submit,” “Add,” or “Edit.” It must clearly let prospects know exactly what they are being asked to do and what will happen after they have done it. And it must do this in a few simple words that can be read and processed at a single glance.
Example: NEILPATEL Blog Sign Up
In six simple words, Neil Patel’s CTA button tells you right up front what you’re doing (signing up to receive email) and what’s going to happen (you will be sent lessons on traffic building).
Is there a benefit to following the call to action? Does the CTA copy make the benefit evident?
The call to action copy should make the benefit of following the call to action clear. If possible, put the benefit right on the button itself instead of just in the surrounding copy. Again, Neil Patel’s Blog CTA button is a great example. Another option is to list the benefits in the surrounding copy.
Example: GrubHub Account Sign Up Form
GrubHub’s account sign up form clearly lays out the benefits of creating and account.
Does the copy simplify the visitor’s decision?
The button text should also try to boil down the called action to a simple Yes or No decision. Should I subscribe to this newsletter? Yes/No. Should I sign up for a free trial? Yes/No. Should I buy this product? Yes/No. That’s because having too many choices actually makes it harder for people to make a choice (what’s known as the Paradox of Choice) and can lead to a level of stress that results in the inability to make any choice at all (what’s known as Analysis Paralysis).
Are multiple CTAs unavoidable?
There are many cases on a website where a prospect has to choose from a number of options. A typical example is a prices page, where the prospect can choose from several subscription plans.
Example: WIX Plans and Pricing Page
WIX has a fairly complex subscription plan structure, but its plans and pricing page does a great job of making it easy for prospects to understand the options and pick the one that’s right for them. The layout of the plans makes the most popular plan the most prominent one. It also makes it the one that is selected by default so visitors can effect their decision in just one click.
Does the copy influence visitors and draw on their emotional needs?
Psychology is behind everything we do, including buying. Tap into this psychology to create effective calls to action. A good place to start is Cialdini’s Six Principles of Influence (also known as the Six Weapons of Influence). The principles are reciprocity, commitment, social proof, liking, authority and scarcity. Let’s take a look at two of those.
The principle of scarcity says things are more attractive when availability is limited or we might miss out on a good deal.
Example: Crate & Barrel Limited Time Mail In Rebate Offers
The principle of social proof relies on feelings of uncertainty and says we are more likely to do something if lots of other people are doing it.
Example: Basecamp Free Trial Sign Up
Basecamp’s free trial sign up uses the principle of social proof by letting prospects know how many other companies have signed up in just the last week.
These are just some of the ways you can address the two questions visitors will ask about your calls to action. If you have ideas you’d like to share with us, please use the Comments below.