Expert techniques for designing CTAs

The nature of conducting business digitally puts you at a disadvantage compared to face-to-face meetings or even phone calls. You and your prospects are separated by entire continents, multiple time zones and the limitations of coding. But, as with traditional sales, certain closing techniques have emerged in the digital industries and proved themselves more effective than others.

When it comes to closing, these techniques mostly revolve around calls to action or CTAs—those buttons that tell you to buy, click, download or sign up.

CTAs are a design artform all their own. They’re the pivotal step that turns visitors into customers, the gatekeepers for conversions. As such, they demand their own design rules because the success of your CTA is the success of your entire brand.

In this article, we’ll go over the essentials you need to know about designing CTAs. These techniques can be applied to any type of site and are proven to increase conversions. But first, let’s talk about why CTAs deserve special treatment from designers.

Why are CTAs important?
—

CTAs are the website or app equivalent of your closing line. However, instead of coming up organically when the salesperson feels their prospect is ready, CTAs are fixed and the same for every visitor. This makes it harder for them to strike an emotional chord—but not impossible.

By properly designing the CTA’s look, message and placement, designers can effectively increase their success rate. Just as phrasing your words just right can land a sale, designing a CTA that’s just right can elicit more click-throughs and engagement in general.

And that’s not just designers overestimating the impact of good design. The power of CTAs has been firmly documented:

Emails with CTAs increase click-throughs by 371% and sales by 1,617% [source]

By tweaking their CTA design, content marketing firm Brafton increased revenue by 83% in just one month [source]

The power of CTAs makes perfect sense if you consider the moral of Steve Krug’s seminal design masterwork Don’t Make Me Think. It’s not fair to say users prefer to be told what to do, but they are more likely to follow a clearly marked, preset path than a path they one they have to forge on their own.

5 types of CTAs
—

In the introduction, we likened CTAs to closing a sale, but in practice they can be used for more than than commerce alone. Essentially, you can use a CTA every time you want the visitor to do something, even if it’s just to stay on your site a little longer.

CTAs can be divided into 5 key categories:

Guide

The first kind of call to action plays the role of the guide. A website may seem linear to a designer who’s been working on it for months, but to a stranger seeing it for the first time, the next step might not be so apparent. Even a few seconds of confusion can cause abandonment.

The home page for Kvell’s site emphasizes the “Discover” call to action as the first step for visitors to take, but it still has a smaller, less noticeable menu option to avoid restricting the user.

CTAs that show visitors how to proceed act as sign posts and keep traffic flowing. The attention-grabbing designs of these calls to action makes them more noticeable, and consequently helps people find their way. Naturally, effective guide CTAs increase time on a site, but they also improve the general user experience.

Along with helping users navigate through your site, CTAs can also encourage users to do what you want them to do. Eliciting an onsite action is where CTAs become strategic and require a bit more design nuance.

Noble & Savage has their CTA in a sticky menu at the bottom of the screen while you browse the product photos. Notice how the bold blue button background draws more attention than any other element on the page — even the images.

Onsite Action CTAs are the bread and butter of ecommerce sites, aiding the sales process by landing products in the cart, shifting carts to checkout and ensuring the checkout process is fully completed. Obviously a CTA alone can’t sell a subpar product; but their presence can support the process overall.

In addition to ecommerce, CTAs like this are frequently used to support white paper/ebook downloads or to usher visitors to tactical pages. They’re also integral in getting users to fill and submit forms for any purpose.

Signups

The most common CTA that you see on sites these days is for email signups. Whether for newsletters, special discounts or barter for a free download, email addresses are a valuable currency in today’s digital landscape. While it’s easier to get an email address than a monetary sale, it still takes some finessing to separate a person from their contact information.

Social media sharing

As we said above, users don’t like being told what to do, but they are open to suggestions. CTAs that ask visitors to share content on their social media pages are gently reminding them that this is an option. This CTA targets users who may enjoy the content enough to share it. Remember, users don’t want to think, so reminders are appreciated.

Social media sharing CTAs don’t need to be fancy because people already know how they work. Being present as a reminder is enough.

Engagement (comments, likes, reviews, etc.)

Last, CTAs can be cues to elicit more engagement. Like social media sharing, it might slip a user’s mind to interact with a post or page even though they’re willing to. The mere presence of a CTA can spark more engagement and a proper design can even encourage or incentivize profitabe actions.

How to design CTAs
—

Now that we’ve covered the basics of CTAs, let’s talk about a few advanced design techniques to optimize conversions.

Visuals

First and foremost, you want your CTA buttons to look like buttons. That’s not a joke. You need to show their clickability with an instant glance; this isn’t just a best practice for calls to action, but design in general.

While methods vary based on the style and theme of the site, generally we associate elongated, rectangular shapes with rounded corners to be “buttons.” A few years ago, it was also common to use shading and/or dropshadows to add a 3D feel, but that has gone out of style with the preference for flat design.

Getting deeper, you want to make sure your CTAs are noticeable. Because they create conversions, CTAs should be the most noticable element on any given page.

Huffington Post shows off its design knowledge with their CTA button visuals. The rectangle-oval hybrid perfectly epitomizes today’s CTA trends, and the color contrasts beautifully with the background photo. The size suits it as well — the headline draws the reader to the text before climaxing with the CTA.

One way to draw attention to them is with color. A contrasting color against the background is a surefire way to get the button noticed. You should also play with the color of the typography within the text. That’s at least 3 colors (site background, button background, button text) that you need to sync together to maximize the effect.

Another visual technique is size: objects with bigger sizes on the screen get noticed first. However, there is a cap to this, so after a certain size, you’re just wasting valuable space. As a rule of thumb, you want to make your CTAs bigger than other less important buttons, but not so big that they dominate the entire screen.

Relation to entire design

Your CTA should be clear and bold, but it also needs to fit in with the rest of the screen. Keep in mind that your call to action should be the thing you most want people to do after visiting your page—think of it as the entry point to your sales funnel. That’s not to say the CTA should steal all the attention away from the screen; rather, the other elements should build up and flow organically into the CTA.

This is best explained by Neil Patel, who found that placing the CTAs above the fold decreased their click rate by 17%. His reasoning is that your site content needs to build up to the CTA, especially with value proposition (explained below). Think about how ineffective a salesperson is when they start by asking you to buy before explaining why.

In terms of getting attention, it’s best to provide ample negative space around CTAs. Negative space is a quick trick to getting elements noticed: the more emptiness around a call to action button, the more significant it seems.

Another strategy is to mute other options and buttons. Having too many attention-grabbing buttons waters down the effects of each individual one. Because your CTA is the most important, you want to design other buttons to be less flashy. You could turn them into ghost buttons (transparent buttons), or give them a lower-contrast color scheme.

Red Bull’s parent company T.C. Pharmaceuticals uses CTA techniques well. Their use of colors for the Find Out More option and choosing to “ghost” “View products” shows they want visitors to click on the former over the latter.\

Wording

Your visuals and presentation can only do so much. At the end of the day, what converts isn’t a cool-looking button, but the sentiment behind it. That’s why the wording in and around your button is one of your greatest assets in earning clickthroughs.

Namely, you want to express your value proposition clearly. In simple terms, this means you have to give the visitor a reason to click the CTA. If they click, will they receive a free download? If they sign up to the newsletter, will they receive a special discount? These are the incentives that are worth mentioning in the text in and around your CTA button.

Another helpful tactic is to address objections openly. Take the frequent example of email addresses and spam; probably the biggest objection to people giving out their emails is they don’t want random companies spamming them. You can improve conversions with a quick disclaimer saying exactly what you’ll email them and some reassurance that you won’t share their email with third parties.

Neil Patel’s site QuickSprout uses words well: the text here explains exactly what the user can expect, adds a little bit of humor, and keeps things brisk with its brevity.

Our CTA

What’s your experience with CTAs? Do you have any questions? We want to hear your thoughts, so share your opinions below in the comments section now.

Need help designing a CTA for your landing page or banner ad? Our designers will give you tons of great ideas to choose from!

The author

Matt Ellis is a freelance content writer, specializing in web design and ecommerce. For over a decade he's been sharing his industry knowledge through ebooks, website copy, and blog articles just like this one. You can learn more about his career and writing services at https://www.mattelliscontentwriter.com/.