Get the click: 8 Tips for effective CTA design

Intro

Reaching the first page of Google search results and getting your audience’s attention is a real challenge, as people rarely click on a result on page two. Optimizing your site for SEO is a must for achieving this goal.

But this doesn’t mean a top-ten ranking spot will necessarily secure you a good conversion rate by default. It’s true you can expect an increase in website traffic, but there’s another element crucial for conversions - an effective call to action.

The main role of a CTA is to direct visitors toward the next step and encourage them to take action — subscribe to a newsletter, download an ebook, purchase a product or service, or sign up for a trial.

However, a poorly designed CTA is as good as none since it will fail to generate clicks and facilitate conversions.

In this article, we’re going to cover the best tips for designing irresistible CTAs your prospects won’t be able to help but click. Read on to learn more!

1. Use a sticky sidebar CTA

CTAs are all about capturing visitors’ attention and getting them to click.

Some web pages, such as homepages or blog posts, have a lot of content, and it’s easy for CTAs to blend in with all the other elements and become practically invisible.

Enter a sticky sidebar CTA.

This floating button is fixed to the side of a web page and remains visible as the user scrolls up and down the page without being too intrusive or distracting. You don’t have to worry whether a potential customer will forget about your awesome offer while they’re reading an article or checking out customer reviews.

ATH Sport gives 10% off the first order and promotes this incentive on their homepage and across their website by implementing a sticky sidebar CTA reading “Save 10%.” That way, visitors are subtly reminded to take action and claim a discount.

(Source: ATH Sport)

2. Leverage negative space

One of the biggest mistakes you can make with your CTA is burying it in the middle of a massive block of text. That’s a surefire way for visitors to miss it and leave without converting.

Don’t be afraid to make the most of negative space, that is, the area of a design that is left unoccupied by text or other elements. By surrounding your CTA with white space, you can create a visual break that helps draw the viewer’s attention to the button.

The fewer distractions around the CTA, the more clickable it will be.

Flamingo gives the CTA on their homepage enough breathing room and separates it from the other elements, thus drawing visitors’ attention to the main goal — adding their leave tracker to Slack. Despite a lot of white space, the design doesn’t look empty or unfinished, so striking the right balance is key.

(Source: Flamingo)

3. Create a sense of urgency

Urgency and scarcity are powerful conversion drivers, which is why you should include these psychological principles in your CTA copy.

Take a cue from Amazon and their clever “Only 1/2/3 left in stock” disclaimer that prompts even indecisive customers to order the product right away before somebody else snatches it.

People perceive products that are scarce or about to be sold out as more valuable, which in turn triggers the fear of missing out (FOMO.) You can play on this phenomenon by crafting CTA copy that revolves around limited product availability.

To highlight urgency, use timing words such as Now, Immediately, or Today.

The CTA on Bed Bath & Beyond’s homepage is a great example of combining both urgency and scarcity. Customers are invited to “Shop now” as the offer is valid through January 8th, but this window of opportunity is additionally minimized by adding “While supplies last.” The fact that the CTA itself is within a big red banner placed above the fold makes it even more striking and persuasive.

(Source: Bed Bath & Beyond)

January’s homepage features a CTA with a slightly different take on urgency. Carefully crafted wording “Join the waitlist” creates a buzz around the app and generates demand by implying that there are other potential customers impatiently waiting for the launch. This simple yet intriguing CTA works because it gives off a somewhat exclusive vibe — it’s like getting on a list of a VIP club.

(Source: January)

4. Include power words

As their name suggests, power words have the ability to evoke emotion in your potential customers. 95% of purchasing decisions are subconscious, which means that feelings play an important role in the process.

So, including power words such as

• Free
• Amazing
• New
• Effective
• Easy
• Instantly
• Guaranteed
• No risk
• Certified
• Protected
• Tested
• Verified
• Extra

will strike the right chord with your audience and get them to take action.

As you can see, some of these words aim to convince customers that it’s safe to click on the button and make a purchase or subscribe to a newsletter. Others focus on highlighting your offer’s value proposition.

Evernote’s homepage promises users they will be able to organize their life with the app while the CTA entices them to sign up for free. And who could refuse such a tempting offer?

(Source: Evernote)

Similarly, BaseLang’s homepage CTA invites users to get started with their Spanish lessons for “just $1,” which is the next best thing to offering free service. The brand’s overall messaging packs punch with the help of other power words such as “unlimited” or “all-you-can-eat,” both of which communicate the value of the offer that potential customers can try out for a week and pay a symbolic $1-fee.

(Source: BaseLang)

5. Make your CTA pop

You’ve probably heard about the 15-second rule, according to which you have only a quarter of a minute to grab your visitors’ attention. This doesn’t give you too much room for maneuver, meaning you need to act quickly and make sure the CTA is among the first things people notice when they land on your web page.

Splashing some color is one of the best ways to achieve this goal. There are different opinions about which color boosts conversions, but the jury is still out on this one. However, it’s safe to conclude that it’s not so much about whether you’ll choose red, green, blue, or yellow but about creating contrast.

For example, you can employ so-called complementary colors that are on opposite sides of the color wheel. If your web page is mostly blue, then an orange CTA will create a strong contrast.

Menlo Caoching’s homepage features white and gray, so the bold red they chose for the CTA makes it immediately visible. The design also benefits from the negative space, which additionally accentuates the CTA button and makes it stand out against the neutral background.

(Source: Menlo Coaching)

6. Don’t be vague

Don’t expect your visitors to make conclusions as to what happens next – tell them.

CTA buttons saying “Click here” or “Submit” will only confuse people, and that’s the worst thing you can do.

The trick is to clearly communicate to your visitors how they will benefit from taking action and informing them about what the next step is.

Dropbox uses this “what’s in it for me” approach on their homepage by telling their potential customers that by clicking the CTA button they will be able to find the best plan for themselves. It’s obvious that on the next page, they will find plan details, features, and comparisons that will assist them in making a decision.

(Source: Dropbox)

7. Add social proof

When it comes to converting prospects, nothing works better than social proof. 87% of purchasing decisions start with online research, while customers read ten reviews on average before placing an order.

But, since you don’t want your potential customers to leave your website while they’re searching for customer reviews and testimonials, it’s best to show them social proof right there before presenting them with the CTA.

This way, you’ll build trust and dispel any potential doubts they might have about the purchase.

That’s exactly what Buffer does on their homepage. Their CTAs are paired with happy customers’ quotes highlighting how using the platform makes their life easier. To add another layer of credibility, the brand included customers’ names and photos. This simple tactic goes a long way as it puts a face to the name and makes social proof more authentic.

(Source: Buffer)

8. Keep things simple

All the tips we’ve discussed so far might give you the impression that your CTAs have to be over the top in order to work.

But the truth is that simplicity is frequently underrated.

In many cases, you’ll get great results by keeping your CTA simple both in terms of design and the conversion process.

Jira’s homepage CTA checks all the boxes with their “Continue with Google” CTA. The devil is in the detail, and although seemingly nothing much is going on here, the effectiveness of this CTA lies in the fact that it makes things super simple for those who decide to sign up.

Instead of a complicated sign-up process, Jira saves users’ time by allowing them to access the platform via their Google account. It takes only a couple of clicks, and there’s no annoying form-filling responsible for many abandoned registrations and shopping carts. Plus, the copy contains that magical open-sesame power word, Free, capable of convincing fence-sitters to click and continue.

(Source: Jira)

Wrapping up

Call to action might be the smallest design element on your web page, but its importance is huge. Without it, potential customers wouldn’t know what you expect them to do and what their next move should be. So, give careful consideration to the design of your CTAs and don’t slight them. These tactics will help you ensure the clicks will pour in.