How to Create a Badass CTA… Everything You Need to Know About Button Design and Copy

·

·

,

In this AWESOMELY complete post we’re going to go over  psychological triggers, design and wording  of the call to action button…
It’s all about how to get people to take action.

Do you need better converting CTAs for your site? Click here to download the Kickass buttons (step-by-step tutorial included)

Here’s exactly what we’ll cover:

  1. Powerful deeply embedded psychological action triggers
  2. Lead up to your cta using the “ Beethoven approach”
  3. How To Nail CTA Copy
  4. Click worthy design
  5. Multiple CTA’s
  6. Common mistakes
  7. The perfect CTA?
  8. Testing

What do con artists and CTA’s have in common?

They take advantage of our base emotions, wants, fears and desires.

Why? Because each of these trigger the lizard brain.
Your old brain, the primal lizard brain is wired to react to your most basic and most powerful needs.

“The lizard brain regulates emotion and effects our  behavior and decisions even more than the conscious portion of our brain… Though we aren’t even aware of it. “ (Neuro web design 184)

It’s a perceptive little bugger that’s triggered by thoughts of sex, money, danger and changes in environment.

lifebeyondlizardbrain00
(image credit: http://www.kristinnoelle.com/2011/05/11/life-beyond-fear-lizard-brain/)

 

Your unconscious brain makes decisions a full 7 seconds faster than your conscious mind.
(Which brings all sorts of things into question like the concept of free will.  Super interesting, but a topic for another time.)

This part of your brain sees patterns and breaks in the pattern far before we consciously recognize them.

It’s so good at pattern recognition that without being told the rules of a purposefully confusing and complicated game you can quickly identify the pattern and get better at the game.

That’s exactly what happened in study performed by the University of Tulsa in 1988.

A participant was placed in an empty room, sitting in front of a computer.  The screen was divided in four quadrants and an x flashed on the screen.  Participants had to predict where the x would appear next.

The rules were ridiculously complicated.
None of the players could say what the rules were.

No one came remotely close to guessing them.
But they all got better at the game.

Then researchers did something really sneaky.  They changed the rules of the game.
And the participants got worse.   When asked why, they weren’t sure.  They said things like they had “lost the rhythm.”  (Neuro Marketing 249)

But we know better ;)  and we can take advantage of it with our copy and design.

A quick quiz:

Before we jump in, let’s see how good your gut is…
Which CTA performed better?

2buttons

(Image credit : http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/)

Bet your gut said the bigger one… then maybe you thought ok, he want’s me to pick that one, so I’ll pick the  smaller one.  But what if it was a double bluff…

I’m going to let you stew on it, mull it over.
I’ll give you the answer in just a bit.

 

Powerful deeply embedded psychological action Triggers:

1. Patterns & Button size

Check out these pricing tables… what stands out?
Take a sec and look…..

animoto pricing

NOTHING.

It all looks the same.    Because of that we’re no more likely to pick one option over the other.

Now look at this… What stands out?

mixergypricing

This example is from mixergy.com.   Andrew warner does a lot of things right.  This is one of them.
He takes advantage of pattern recognition 2 ways.

First Andrew sets the pattern:

  • Headline
  • Price
  • Benefits
  • Opt-in

Because of the pattern, we’re immediately comfortable comparing the two options.
Second, he’s subtly skewed us toward the yearly payment option by breaking the pattern.

Here’s why you immediately you noticed the option on the left:

  1. Bigger headline font.
  2. Longer list of benefits (makes the whole thing bigger)
  3. Bigger option button.
  4. More contrasting optin text

Bigger get’s more attention.  It’s hardwired into us. 

With so much going on in our environment we’re forced to prioritize our attention. To focus on important aspects and ignore the irrelevant distractions.
One of the ways our minds do that is by focusing more on larger objects.  Hint hint… Buttons.

Remember the buttons I asked you about at the beginning… Which performed better?
Here they are again:

2buttons-winner

If you picked the smaller one, you were right.  The bigger one had a 10% decrease in conversion.

The takeaway here is…
Bigger = Get’s more attention
But bigger doesn’t always mean better results.

2. Movement & surprise. 

If you’re going to get eaten by a lion, you learn to be on the lookout for things that move. But it’s not just any movement that attracts attention.

In a kinda scary study about driving, researchers found that while driving only about 15% – 20% of our attention is given to traffic control devices.  Why?   Because they’re expected.  And so we don’t dedicate that much attention to the

We’ve all been driving and all of a sudden a pedestrian “jumps” out.  Really they probably just stepped out a bit into the street, but we weren’t expecting it.

OLYMPUS DIGITAL CAMERA

Unexpected or surprising movement gets noticed.

If you have a lot of stuff that moves on your page, like ads, auto playing video, lots of gifs.  Movement added to your CTA won’t get noticed as much because movement is expected.  But if the only thing that moves or changes on your page is your CTA  then it’s more surprising.  It gets noticed.

This is the button that’s one the landing page for MindHeros…

Speaking about the Mind Hero’s button…  Gives me a chance to take a break and shamelessly tell you that you should join the newsletter because that’s where you’ll find out how to persuade people to take action…

 

 

Join now and get 7 BADASS CTA button designs that convert

Plus a screencast explaining step-by-step how use the code on your site and create your own variations.

Get My Badass Buttons
no credit card required ; )

 

 

Did you scroll over it?  Even accidentally?
It gets bigger.  It draws attention.

3. Contrasting color

We notice differences in color.  Make your button stand out.

Here’s an example from Joanna Weibe of Copyhackers:
Which do you notice?

weibe buttons

Not surprisingly Variation C had the best conversion rate.  It beat the control by 95%.

So what if you don’t have other buttons for comparison?
Simple.  Make it stick out on the page.   Use a color EXCLUSIVELY for your CTA that stands out.

What color should you start with?
Probably red.

Noah Kagan and his team are behind the awesome Sumome set of tools to grow your website.  They have A LOT of data and analyzed what worked best after their users had collected 100,000 email addresses.

That means 100,0000+ CTA clicks.  And  by far and away the most clicked color button on their popups was red.
Probably most sites don’t use a lot of red.  So it’s a contrasting color.

sumome-stats

Interestingly, Sumome’s landing page uses a green button the 2nd most clicked.
Let’s take a look.

sumome-green

But the key is that it’s different & contrasting.

They do a really good job of using similar colors (purple) to create a pattern.  So those things don’t stick out.
All of sudden… Green button.

You see it.  You notice it.  They broke the pattern.
Plus they have some secret sauce right below.
(A crap load of social proof to support why you should try it now)

Just so you can see… I changed their button to red.  A darn bright red.  It had to be bright to stand out from the purple.

sumome-red1

What you may not be able to tell is that the change made the button copy harder to read.

I’ll show you in the design portion how to easily figure out what colors you should be using for your CTAs even if you know nothing about design.

Takeaway:
Sumome says 
Use a contrasting color.
Start with red if it contrasts on your site. 

4. The danger of breaking expectations

We just talked a lot about patterns…  Setting the pattern then breaking it with your CTA.  It’s a pattern interrupt, it’s a straight shot at the lizard brain and it gets attention.

But we’re talking design patterns on your site.  Not general expectations.  Don’t confuse the two.

We’ve been conditioned to expect our buttons to look like buttons.
This example is also from Joanna’s article.

createDebateBefore

Where do you click?   It’s confusing.  Multiple things could be the button.
Your links  should look like links and shouldn’t look like any other text on your site.

It’s common sense.  But it get’s screwed up more often than you’d think.
Don’t %&*# it up on your site.

Lead up to the Click… The Beethoven approach.

Beethoven would stand up on the podium the orchestra quietly playing at the direction of his small, calm movements.  Slowly he’d add a bit more vigor, the music getting louder.  Then before you knew it he’d be acting a mad man, wild movements, the instruments playing louder, louder, faster and more energetically, then BOOM they’d give it all they had.

Slowly they’d decrease the volume pace and energy back to normal.

boom

Your  Calls to action are your BOOM moment.  But that doesn’t mean you can neglect the lead-up and what happens after.  The copy and the design around your call to action button need to help guide the action.

The Copy…

It’s hard not to talk about Headlines and copy when talking about CTAs, because they’re meant to work together.
A great CTA button isn’t worth a red cent if everything else sucks.

As a rule of thumb you need to give the visitor just enough information to say yes before presenting your CTA.  Not more, not less.

Reminds me of a saying… How long should it be?  Just like a woman’s dress, long enough to cover the subject, short enough to keep it interesting.

The more complex your offer, the more info you need to give before showing your button.
This CTA placement graph from contentVerve shows you exactly that.

The visitor needs certain questions answered and benefits presented before decided to make a choice.
It takes longer to get the visitor  ready to click with a more complicated offer.

ctaplacementgraph

For  Segment.com enough information means a benefit-driven headline, subhead and then CTA, followed by social proof below.  (They also make good use of white space. More on this in the design section.)

Segment_-_We_make_customer_data_simple_

 

Or it could be getting the visitor to watch a video for the info… Kickstarter campaigns are a great example.

 

The_Norlan_Whisky_Glass_by_Norlan_—Kickstarter

 

Or it can be a full story, videos and everything like in:  http://autorespondermadness.com/  (the image would be too big to put here).

Each time you present your button, you need to give the visitor at least one more piece of information that’s a compelling reason to click.  You can do it by giving them a reason to buy or by squashing objections they have to purchasing from you or your product.

Copywriter Weigh-in:

Write some “live or die” bullet points. There is a difference between bullet points that give information & bullet points that make the buying decision feel like a “live or die” situation.

A single bullet point should make the prospect feel major relief or as if they are about to fully dominate their issue. Now if you get 5-10 strong bullet points that elicit a strong emotion in the prospect, you have what is called “buying momentum”, which literally forces the prospect to give into their wants and cravings. When the buying temperature is high, all you need is a call to action.

Here are 5 ideas to punctuate your CTAs with the content around them:

  1. Put it next to a countdown timer .

You create urgency and play on the fear of loss.

Mind_Hero_s_Create_a_Landing_Page_Course

2. With a video Explainer (see kickstarter above)

Some products and services are easier to show rather than tell about.   See your product in action or the story of your company can instill the confidence that the prospect needs to click your button.

3. Give proof and reasons to believe.

Social proof of how many users or shares you have, companies you do business with, #1 Best selling, 1 day turnaround etc…

Bryan Harris of video fruit has been featured in some big time places.  Seeing names you recognize like ABC and ESPN instantly gives him credibility and makes you trust him more.

Videofruit___step-by-step_formulas_to_grow_your_business

4. Benefit statement

Quickly answer the question – what’s in it for me?  (The visitor).  Because Brian is so good, he has a benefit statement as his subheadline and it quickly answers what’s in it if you click.

5. Anxiety-Suppressing Info 

Copywriter Weigh-in:

One way to immediately improve your CTA’s is to reduce friction. The fastest and easiest way to do this is to add anything credible/reassuring as close as possible to the button your prospect has to click. Examples include guarantee graphics, the “we don’t spam or sell your emails” text, and the site security graphics.

Danavir Sarria

Copymonk.com

Most often you’ll see this along with a free trial, or purchase buttons.  But the idea can apply to almost any CTA.
Common examples:

  • No credit card required.
  • 24/7 Customer support
  • Money Back Guarantee.
  • 356 day return policy.

How to nail CTA Button Copy

First and most important rule:  Clarity > Clever.

Make sure it’s clear what people will get when the click.
If that means having a “boring” call to action that’s better than having an unclear call to action.  If you can do something witty, then great, but never sacrifice clarity.

Copywriter Weigh-in:

Make your button copy match your message.

For instance, if the CTA in the post says “download your free ebook,” the button copy shouldn’t say “Submit,” it should say “Download my free ebook.” It flows better, creates trust in the reader’s mind, and notice- it’s in 1st person (this makes a huge difference…usually).

I mean, what the hell does “submit” mean? What are they submitting? What are they agreeing to DO when they click it? It’s kind of a bait & switch. But when the button says “Download my free ebook,” they know EXACTLY what they’re doing, and it matches the message from the post.

12 ways to improve your  CTA Copy:

Don’t be generic.
Subscribe is a shitty call to action.  Write a CTA that’s specific to your page/product.

Write in first person

I want to  ________

Give me my _____

Copywriter Weigh-in:

An easy way to come up with the button CTA is to put yourself in the mind of your prospect and answer the question “I want to… ”

Like this: I want to DRIVE MORE TRAFFIC, I want to LEARN MORE, I want to OPEN MY ACCOUNT, I want to INCREASE MY CONVERSIONS, I want to LOSE 10 POUNDS IN TWO WEEKS. Etc.

In a test done by Michael Aagard of Content Verve  changing the button copy on an unbounce landing page from start your free 30 day trial to start my free 30 day trial, resulted in a 90% increase in CTR.

contentvervetest

Be Specific. (It’s more believable)

Use Numbers if possible.
Example: Send me my 3 tips, start  my free 31 day trial, or 11 ways to improve your CTA Copy

Avoid Friction
Don’t make it hard for the visitor to say yes.

Technical jargon may or may not belong in your button copy.

Its an easy way to get someone not to click.   If you use language that only designers understand, then likely only designers will click.  So your list will be very targeted.  Just be careful your tech jargon doesn’t turn off too many people.

Use Action Words
The use journalist formula.  When you read news articles, you’ll notice that most sentences are written around actions.

The formula is easy.
Start with a subject or a strong action verb then finish the thought.
I.E. Catapult (verb) my conversions by 11%

A quick List of words to use in your CTA:

  1. My
  2. Free
  3. Because
  4. Instantly
  5. New
  6. Start
  7. Learn
  8. Want
  9. Need
  10. Get
  11. Today
  12. Now
  13. Begin
  14. Create
  15. Continue
  16. Watch
  17. See how
  18. Download
  19. Join

For more 355 more words check out : https://sumome.com/stories/power-words

Make sure it jives with you headline and page copy
If your headline promises an ebook, your button should deliver.

Test Capitalizing The First Letter Of Each Word.
It Gets More Attention That Way.

Use supporting text
You don’t have to cram everything into the button copy.  Supporting text around the button can address a last objection or reinforce the decision to click.  It’s done a lot with free trials.  Ie. No credit card needed

focusatwill

Guiding Questions

Here are a couple key questions to ask yourself each time you craft button copy.

  1. What is my prospect’s motivation for clicking this button?
  2. What are they going to get when they click the button?
  3. Is there anything standing in the way of them clicking?

Don’t Overcomplicate
When in doubt keep it simple.

Copywriter Weigh-in:

Don’t overcomplicate things. Don’t try to get fancy or cute. Just dig yourself into the mind of the person
reading the page. Think about what the NEXT step is for them, and then write it in a way that’s coming from
their own voice in an extremely clear way . In other words… “Yes, send me my free report!” versus “Yes, send
me your free report!

Make sure the copy is easily legible.  

That means using a contrasting text color.  In general stick to black or white.

There’s almost no reason to use an image as a button these days.  Because your site will be viewed on mobile phones, tablets and desktops your button and the copy needs to be able to adapt.  When you use an image the copy will be resized and hard to read.

Click Worthy Design

Design = Communication.  To communicate effectively, you need to create a visual hierarchy.

The idea is pretty simple, the execution isn’t.
More important ideas and elements should stick out and be on top of the visual hierarchy.

poppy-papaver-meadow-pointed-flower-abstract-plant

 

 

Don’t want to design the button yourself?

Download the cut and paste code so your buttons stand out and get clicked. 
(With step by step explainer video  of how to use and & customize for your site)

Get My Badass Buttons

 

 
We’ve already talked a bit about a couple ways to get your buttons noticed.  But we’ll go into more detail on exactly what to do.

Make your button stick out.   Here’s How:

Size matters.  

The bigger your button compared to other elements around it, the more it will stand out.    It’s the same reason that all guys (maybe with the exception of Ron Jeremy)  should do some manscaping.  It makes you look bigger.

We talked about it above, so ‘nough said.

Use white space around your call to action sections and buttons.

Remove distractions.  The less that’s around your CTA, the more the more the visitor will focus where you want him to.  And they’ll better understand what you’re saying.  Research has shown that use of white space … increases comprehension by almost 20%. (Lin, 2004).

Lewis Howes does this well for his school of greatness sales page.

School_of_Greatness_Academy

Color

Certain colors stand out more than others.  They’re naturally “heavier”  and have more visual weight.
Here they are in order from heaviest to lightest from http://sixrevisions.com/graphics-design/visual-weight-designs/:

Red (heaviest)
Blue
Green
Orange
Yellow (lightest)

Notice anything?
This actually tracks darn closely with the Appsumo data about which buttons perform the best.   The buttons that  got more clicks were a heavier color.

Contrast

The button color has to stand out from anything in the background.  And the button text should be easily legible.

Generally it’s pretty easy to see for yourself.  But if you’re not sure you can use this contrast checker.  It will show you the bare minimum of what you need : http://webaim.org/resources/contrastchecker/

How do you pick a color that stands out, but works with the rest of your design?  
(After all a poo colored button would stand out, but still look like $&%!.)

You don’t need to know anything about design.  You just need to borrow inspiration from someone who does know design.

First Pick a main color. 
If you need some ideas check out http://www.colourlovers.com/.   They have tons of pallets that you can choose from.

colorlovers

Or more recently I’ve started to use https://coolors.co/browser  You can browse, create and save pallets.

Coolors_-_The_super_fast_color_schemes_generator_

Once you have that color.  You need to get it in hex format.

You can get that directly from colorlovers or coolors.  But your inspiration is a color on another web page or from a photo, the easiest way to get the hex number is to install a chrome color picker extension.  https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

color picker

 

Head over to http://paletton.com/.  It’s your new best friend and does the heavy lifting for you.

Pop in your main color.  And paletton will show you the other colors and shades that will go well with your design.  And of course you can add in black and white as you want.

paletton

 

Still not 100% sure about how to use all these tools… Here’s a quick screencast that walks you through. 

Try to limit your colors to 3-4 max.  It will make your design cleaner.  If you use a particular color for a CTA, don’t use it anywhere else around the button.

The bigger the button is and the closer to us, the easier it is to click. (Fitz Law)

ets be clear, making an already huge button, bigger won’t draw much more attention.   We’re talking about making a small button bigger.
And the smaller the distance a user’s mouse has to travel to your button the easier it is to use.   Is your button follow the natural flow of the page?

Appearing visually closer.

It’s not part of fitz law but, a button that appears closer will get more attention and be easier to click.  It’s a technique that we often see with popups.  The grayed out background makes the popup feel closer to us.

overlay

 

The same thing is effective for CTAs, especially when they are placed on a background image.  You don’t always need to add an overlay.  Dark images may not need it, but it can be effective especially if you’re using a lighter image.

Uber doesn’t do this take a look:

Uber

Now check out what happens when we add an overlay.  It feels closer.   And we pay more attention. (Though we may want to change the blue button color to stand out more).

uber2

Go to meeting does a good job of using the overlay.   Though my eye goes the chat box first, which may actually be what they want.

gotomeeting

 

Using visual cues

We want to lead the visitor’s eye to our CTA.  The easiest way to do that is to use white space.  But sometimes we need something more.

First let’s clear up some misconceptions.  You may have heard that people view web pages in Z or F pattern.
That’s true for text heavy pages.

f_reading_pattern_eyetracking

Image credit: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

But for pages with more graphics, it’s up to us to design where the user’s eye goes and place our buttons in those spots.  Pathways, arrows and images can point your user in the right direction.

You can see in this page for rapidology they control the flow by using subtle arrows down the middle.  On the flip side, I don’t think the CTA buttons stand out enough.

Rapidology-TY-2

ManPacks combines social proof with an arrow direction your attention right to the CTA.

Manpacks__Underwear__Socks___Razor_Subscription

You can also use images to direct the user toward your CTA.
Generally people’s faces draw attention and we’ll look in the direction of their gaze.

Use_pictures_to_direct_the_user_s_gaze___AGConsult

Copywriter Weigh-in:

One interesting way to get someone to click something is to make the text physically point to it like an arrow (like this:)

Hey you there with the umbrella.
Yes I am talking to you.
That’s right you.
[Click Here]

Another is to have the person the page LOOKING at the button. Checkout the homepage of KopywritingKourse.com and notice I’m looking directly at the signup button…..that’s not by accident ;- )

The Blur Test

The ultimate test to see if your CTA stands out is the blur test.  You can do it right in your browser by adding a quick bit of code to just about any website.  No need to create an image :)

If you can still tell where you’re supposed to click, then you’re golden.

Here’s how:

I’m in chrome but this will work in firefox too.  So we’ll open up the developer tools by right clicking and selecting inspect.

Then we’re going to select the html element and add this css code to it.   Add everything between the <code> </code> tags.  (Screen cast below)

<code>
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(#blur);
filter: progid:
</code>

Here’s the result on the page.

blur

 

Screencast so you can do it yourself.

Multiple CTAs

You can and you should place your call to action in multiple spots on the page.  They don’t all have to be identical.  You can use different colors and you should change the copy if it makes sense in the context of you page.   The key component here is that all of your buttons are prompting the same action.

Define 1 main goal for the page.  An email signup, a purchase etc… and display it throughout your page.
The big no no is having multiple competing CTAs because it can go wrong really fast.

If you do decide to do it, still define one main goal then a secondary goal.  No more than 2 goals per page.  Just don’t.

toothpaste

Every additional choice that the user has to make increases decision time (Hick’s law).
Give someone too many choices the task becomes complicated and they will do nothing.

That’s why we’ll Keep it to 2 CTA’s max.
The user should be able to compare the choices and say yes to one.

Bounce exchange does this well with their exit popup.  And the question asked makes it hard to say no.

But this is a last ditch effort to keep the visitor on the site… So bounce exchange asks a polarizing question and is pretty bold with button copy.

That’s not typically what you want to do with your buttons.  It should be an either or choice.
I’m not ready for option A (higher commitment like sign up)  so I’ll choose option B (lower commitment like learn more).

bounce exchange

Theme valet does a good job of this.

Order now is clearly the primary action.   But they don’t want to create a situation where a visitor either orders or they go away.  So learn more makes sense here.

theme valet

It’s clear in both examples which button is the main CTA.  In your design the main button needs to be more prominent.  That could mean bigger, bolder, larger text and stronger copy etc…

And your secondary goal button needs to have less (or almost no)  visual weight.  This is probably the only use of ghost buttons (buttons with transparent background and a visible border) that works.

10 all too Common Mistakes (you’re probably making  at least 1)

You’re already ahead of the curve since you’re reading articles like this one.  “53% of fortune 500 companies don’t go by the CTA 1o1 on their homepage, 70% of the small businesses have websites with no CTAs on the homepage.” https://vwo.com/blog/common-call-to-action-mistakes/

But chances are you’re still making one or more of these common mistakes.

  1. Jumping the Gun

  2. Presenting the button before giving the visitor enough info to say yes.

    Your page needs to walk the visitor through the “sale”  whether you selling an email signup or a purchase.  You can ask at multiple times throughout the sale if the visitor is ready to buy.  But if you ask too soon ( present the button)  your conversion rate will suffer.

  3. Doesn’t stand out.

    Make that F***er stand out like Carrot Top in Japan.
    It’s got to be clear where the visitor should click.  So make it look like a button, clear big text, and use the right visual weight.

    A recent trend is to place headlines and buttons on a background hero image.  It looks cool.  But a lot of times the text and the button don’t stand out enough.  So make sure to add contrast.

  4. Too many options.

    More than 2 Competing buttons often leads to trouble.

  5. I don’t need no stinkin’ primary button.

    Your page needs one primary goal and you need to visually display what that is.  Your secondary CTA (if you have one) can’t compete directly, it needs to be subsidiary and have less visual weight.

  6. Message mismatch.

    If you promise a webinar in your landing page.  Your CTA shouldn’t be get the free report.  The landing page copy, CTA and next page after the click all need to be in sync.

  7. Doesn’t match the sales cycle

    If a visitor is on your pricing page, you don’t want to offer you free ebook download.  But on a blog it’s probably to early to use Buy Now.  I’d love to see some examples that prove me wrong and where this works.  Comment below if you know of a good one.

  8. Wussy and vague wording

    Take a stance.  Tell your visitor what to do.  And be bold about it.
    I’m not talking about swearing or using vulgar words (unless you want to).  But use powerful action words.  And make the copy specific to your product.

  9. Not answering what’s in it for me?

    Promise to deliver value to your prospect.  They will always ask themselves the question: what’s in it for me?  The marketer that answers that gets the click.

  10. Forgetting the CTA.

    Calls to action go on every piece of marketing material.  That means on your blog posts.  LinkedIn articles, Email signature etc… They may not always be in button form but always give the visitor a chance to say yes to what you have to offer.

  11. Not Testing

    It can always be better or worse.  You only find out if you test.

The perfect button myth.

There is no such thing.  There’s only what works for you and your audience.
Everything above are just guidelines that you need to test.

From time to time a marketer will come along with a perfected button.  The Belcher button was an example.  You used to see it quite a bit more.  Especially in sites with a more direct marketing feel.  Perry Belcher claimed that it was the most tested, highest converting button.  And maybe that was true.  It has a lot of the elements we talked about going for it.  Try it out if you’d like.  But there is no perfect button and only one rule… (see below)

bb

TEST

Everything I’ve just gone over are  guidelines.  Yes, they’ll probably work for you because they are proven strategies.
BUT,  your users and your site is unique.  That means testing.

Don’t start with A/B testing

If you don’t have much traffic, don’t a/b test your button color and copy.

You need 5000 visitors per Week according to one conversion expert to run an effective AB test.  Or 350 – 400 conversion per variation (Probably more accurate).

If you have less traffic, then your test will either take a really long time or you’re going to settle for crappy results.  Check it out for yourself, here’s an ab test calculator that can tell you how long it would take to run a test on your site.  https://vwo.com/ab-split-test-duration/

Now, we could argue about if low traffic sites should do ANY split testing. I’d say YES.
But only if you’re testing drastic changes like a complete page redesign, which make it easier to see a winner.
Leave the small tests alone till your site is BIG.

Instead…

Do a User Test

One of the easiest tests to run is a user test.  User testing can quickly uncover any major design flaw or confusing copy.
Think of it as removing barriers to the click.  And making it easier for the user to take the action you want.

Research suggests that you only need 5 users to test to uncover 85% of your usability problems (Compare that to 5000 for AB – there’s no contest).  This can be a quick way to see if your buttons are not in the right place, not big enough, not contrasting etc…  Or maybe your page flow is off, and the user’s eye is drawn away from your CTA.

Here are a couple easy ways to start:

You could diy it.  Using screen flow or camtasia and a screen sharing tool.  But there’s almost no reason to.
Plus you’ll have to find people to actually do the testing by going to Mturk, upwork or similar job site.

Tools:
Usertesting.com
http://www.userlytics.com/sitepublic/
http://www.userfeel.com/

 

Woulnd’t feel right if you didn’t get one last chance to join the Mind Hero’s Cabal.

So here it is hermano… Get buttons for your site and more conversion boosting and persuasion advice sent to your inbox.

Send me the CTA Buttons

 
Here’s a screenshot of some of the buttons you’ll be able to make.


11 responses to “How to Create a Badass CTA… Everything You Need to Know About Button Design and Copy”
  1. joan climent Avatar
    joan climent

    Awesome guide Nick! I am so impressed.
    I’ll have to re-read this post again and again to get all the info.
    Thanks!

    1. Nick Julia Avatar
      Nick Julia

      Thanks Joan!
      There are a lot of nuggets in there : )
      What was your favorite tip?

      1. joan climent Avatar
        joan climent

        Probably the Neville Medhora formula because it’s something really easy to implement and I never heard of it before ;)

  2. Paul G Walmsley Avatar

    Great stuff, salivating with the opportunities to increase my conversions. Cheers!

    1. Nick Julia Avatar
      Nick Julia

      Ha, thanks Paul! It’s always exciting to make changes that will (probably) increase conversions.
      Get ‘er done :)

  3. Carolyn Frith Avatar
    Carolyn Frith

    This is an amazing guide. I haven’t had time to read the whole thing yet, but it’d definitely bookmark-worthy. My thought on why the small “create my account” button did better than the large one is that the typeface size did not change. In the large button, the typeface was overwhelmed by the green around it, so the words became less noticeable. I definitely was drawn to the small one first.

    1. Nick Julia Avatar
      Nick Julia

      Good Call Carolyn. If you don’t read the copy then what good is the button?

      I’d be interested to see the landing page, but that was never shared in the case study.

      The guy that ran the test thought “the larger button simply became too big, drew too much attention, and thereby made the prospects feel pressured to carry out the conversion goal.”

      This might have been a good case for a heat map. I think it would give some insight into If people are glossing over the button as you suggested or paying attention, but feeling pressured.

      Let me know what part of the guide you find most helpful once you’ve gone through it.

      Cheers,
      Nick

  4. Kurt Frankenberg Avatar
    Kurt Frankenberg

    WHOAA fire-hosed, dude!
    I’m a “copy” guy… meaning that the way I communicate a call to action is verbal. But the design aspect is too vital to ignore. I’m actually very thankful for the big-ass buttons you hooked me up with; can’t wait to try ’em out. Beside the advice of bigger is better, get the color right, and clarity > clever, the “lizard brain” analogy hit the nail right on the head for me. Thanks for the post and for the giveaway. See you Twitter and Facebook. Keep Stepping, Kurt Frankenberg

    1. Nick Julia Avatar
      Nick Julia

      Thanks Kurt!
      Glad you got a lot out of it :)

      If you’re a copy guy… then make sure that whatever design you pick is one you think will speak to your audience. (Just like you would when picking specific words that speak to your pocket of people).

      Design is critical. But maybe for your audience a plain link IS the best CTA. Or even something that looks like it’s been beaten by the ugly stick. The “belcher button isn’t pretty but it worked damn well for him.

      Anyhow, you’re in the facebook group. So we can chat about it more in there.

  5. Jan Francis Avatar
    Jan Francis

    Great article! Although I noticed a dead link on this.

    The link (http://contentverve.com/10-call-to-action-case-studies-examples-from-button-tests/) is going to a 404 page.
    Dead anchor: (CTA placement graph)

    Looks like the article is no longer online. Assuming you want to fix the link, I’ve got a pretty extensive guide I’d like to submit as a replacement.

    URL: (https://www.izideo.com/blog/10-call-to-action-case-studies-examples-from-real-button-tests/)
    Title: (10 Call to Action Case Studies with Examples from Real Button Tests)

    I am also happy to re-push the link to my Twitter and email list.

    Have a nice day everyone!

  6. Dom Trussardi Avatar
    Dom Trussardi

    Best of the 10+ guides I read. Kept me laughing too.

Leave a Reply

Your email address will not be published. Required fields are marked *