Your call-to-action (CTA) is the best closer in eCommerce. It’s your Al Pacino from Glengarry Glen Ross.

But for such a small element, a lot can go wrong. As in face to face sales, a single misstep can lose a prospective customer for good. Your CTA needs to be as sharp as possible, but thankfully there’s good news. There’s enough usability research, practical experience, and innovative CTA design techniques below to wake up your call-to-action.

Here’s a handy quick-reference guide of 9 easy to understand and easier to apply design tips.

1. Mute Other Buttons

Muting the secondary buttons suggests to the user that the other options – the one not muted – are better. Pushing other links into the background brings the main CTA to the foreground, and you don’t even have to touch it.

There are different ways to mute buttons. A classic fade is always adequate, as it using a lighter and less aggressive color. Another new strategy is to make all secondary buttons into ghosts.

CTA Design Techniques Example 1

Source: T.C. Pharma

Aside from looking modern and guiding focus to more poignant background images, ghost buttons can also increase the clickability of non-ghost buttons by making them seem more attractive.

And what if you want the ghost button style for your actual CTA? Simple. Just strip away the outline from the other buttons. The spirit of this technique remains the same: the call-to-action should be more interesting visually than the other options.

2. Explain What Clicking Will Do (And Won’t Do)

The internet can be a scary and deceptive place, and security and trust are important to your users. Visitors aren’t going to click a vague button unless they know what to expect.

Calls-to-action are most effective when they’re upfront about what they do. Since there’s not enough room to explain on the button itself (see #6), you want to make the most out of your lead-in text.

The Spare Time Calculator

Source: The Spare Time Calculator

Basically, you want to convey:

  • What happens after they click. Is it a sign-up screen, a credit card screen, a direct link to a download. Not answering this question leads to suspicion, which leads to bouncing.
  • Why they should click. Take a moment to succinctly restate your value proposition. Explain why it’s in their best interest, not yours, to click.

If you can afford the space, even just a line, assuage some of their fears as well. A single sentence like “We won’t send you spam,” or “If you’re not satisfied, we’ll give you your money back,” can make or break a conversion.

And, as always, be brief. Your users may want reassurance, but they definitely don’t want to read any more than necessary.

3. Place the CTA in the Proper Screen Area

Luckily for designers, human sight patterns are a lot more predictable than other human behaviors. Eyetracking studies have revealed enough common habits that we can safely section off which areas of the screen are better for certain elements.

While the upper-left hand corner is the most common starting place for Western users (who read left-to-right, up-to-down), it’s not great if the call-to-action is the first thing users see. You need to first establish context, and explain value.

Banana Scarf

Source: Edwin Europe: Banana Scarf – Red

In the entire left side, the user is scanning for information and less receptive to tangential suggestions. However, on the right sight, the user momentarily pauses at the end of a line or row because dropping down to the left again. This is the perfect place to introduce a call-to-action.

If there’s not a lot of other competing content, the center is a good location. Placing your CTA dead-screen with few other elements around it is a safe strategy for getting it noticed, especially for entire pages built to funnel traffic to another location.

Even the left side is permissible with certain criteria met: the right and middle should be dominated by an enlarged product image, as with our own LemonStand home page below.

LemonStand homepage

This up-and-coming style deviates from the standard site patterns and encourages the reader to scan the left-set text more deeply. But avoid left-sided CTAs if there’s text content on the right.

4. Not too Big, Not too Small

Calls-to-action should be big, but not oppressive.

Big buttons may be design 101, but it’s not as simple as “bigger is better.” There are actually 3 logical reasons that stem from applying Fitts’s classic law to design:

  • More clickable area means less effort to activate. Assuming your entire CTA button is clickable (and it should be), a bigger button means the user has to move their cursor or fingerless to activate the link. Such minuscule movements add up, so it’s better to spare users any unnecessary effort.
  • Bigger insinuates more important. A CTA seems more imperative, more urgent, if it’s bigger.
  • Bigger items are seen first. Size is instrumental in influencing visual hierarchy. Make it big enough to be noticed, but not big enough that it dominates the entire page.

There’s a pretty important caveat with this technique: you don’t want your CTA to be too big. Size is most useful when making small items big. It is ineffective, even detrimental, when you make big items even bigger.

Uber

Source: Uber

Strike the right balance for size, and remember that there are also other ways (see #8 and #9) to get your CTA noticed.

5. Contrast Colors

Like size, color is another basic design tool that goes deeper than most designers think. For example, each color has an opposite, and pairing them makes both more exuberant.

Adidas CTA example

Source: adidas Football Ace 16+

Colour example

Source: BYR color wheel. CC BY-SA 3.0

If you want your call to action to stand out, set it at the opposite color of the background. Simply locate your background color on this color wheel, then set the CTA as the color on the opposite side of the wheel (green—red, purple—yellow, etc.). Bonus points if you sync up the colors to match your brand.

This may be a common design trick, but the reason it’s so popular is because it produces results.

Related posts:  How To Get Started With Cart Abandonment Emails

6. Limit Text to 5 Words

… And one of them better be “free.”

As Vince Sevilla explained, a lot of conversion trouble comes from the site bombarding users with text. Users, in general, don’t like to read, so you want your pitch and value proposition to run as smoothly as possible.

When it comes time for the CTA microcopy, limit it to around 5 words. That’s not an exact rule — you can make a successful call-to-action with 6 or even 7 words — but for the most part, 5 is a good limit.

Netflix CTA example

Source: Netflix

Use the lead-in text to gently guide the user (see #2), but save the actual microcopy for a swift push.

7. Use Bold and Actionable Text

Limit the button copy to 5 words, but not just any words… these few words need to speak volumes, so make them count.

CTAs should almost always be phrased as commands. Do this. Click there. A good salesman has confidence in their product, and calls-to-action are just the closing sales pitch. Don’t be timid. Don’t apologize for offering your users a product or service they will improve their lives!

Part of being bold is using simple words. Complicated or formal words are something people use when they’re nervous as a means to mask themselves. Words like “submit,” “download,” and “register” have actually been proven to harm conversion rates.

Jetlag CTA example

Source: Jetlag

Confident salespeople speak plainly because they have nothing to hide. For example, this Danish company increased conversions by 38.26% just by using the (equivalent) word for “get” instead of “order.”

And try throwing the word “now” at the end. This adds a sense of urgency, not to mention the power of suggestion.

A foolproof example:

Get Started Now.”

8. Empty Space: Getting Something from Nothing

Empty space (a.k.a. white space, a.k.a. negative space) should be used as a design element itself, even though strictly speaking it’s the absence of all other elements. In other words, empty space is more than just “whatever’s left” when you finish populating the screen with high-priority content. As we explained in our Be Seen in ‘17 post, white space is going to be a major design factor in the upcoming years.

White space in eCommerce

Source: AArk Collective — Shell-White

As a quick rule, the more empty the space around an element, the more noticeable it becomes. With this in mind, calls-to-action should have a healthy buffer of empty space around them. If the entire page is dedicated to a single CTA, you can even make it the only element on the screen.

9. Remove All Other Avenues

We’ll end with an extreme strategy. This isn’t applicable to every site, but can be a powerful CTA design technique when used properly.

If the entire page revolves around a single call-to-action, simply remove all other links. Get rid of all the exits but one.

Okcupid CTA design

Source: OKCupid

This is risky, because you’re essentially forcing your user to make a decision between clicking where you want or leaving the site. And they will often leave. This strategy is only advisable if:

  • The user is already invested in the site. Sites like OKCupid already have a reputation before users first enter, so little explanation is necessary.
  • The CTA isn’t asking much. It works best when the user is redirected to a non-committal site, but the strategy also works well for eliciting users to fill in sign-up forms or subscribe to mailing lists.

One of the best benefits of this strategy is it quickly polarizes your users and separates the serious buyers from the window-shoppers. People with no intention of committing can suck up your time and energy, so if you don’t feel like trying to convince them, sometimes it’s better to sift them out at the start.

If your site is brand new or otherwise unknown, you may need to smooth-talk your users a bit before your closing pitch. But if you have a bold brand and can explain your value bluntly, this risk could pay off.

Have any techniques you’ve found useful? Don’t keep them to yourself! Share your tips with the LemonStand community in the comments section below.

[wpcb id=”16″]