<!– wp:acf/blog-intro {
“id”: “block_5f87192dcd286”,
“name”: “acf\/blog-intro”,
“data”: {
“_intro”: “

A lot has already been said on the subject of designing call to action buttons or CTA’s. So what is truly important? There are 3 things you’ll want to pay attention to:\r\n

• \r\n

 

• The call-to-action should be in a striking, contrasting color\r\n
• Ensure your CTA looks like a real button\r\n
• Use visual cues to draw attention to your call-to-action\r\n”,
  “__intro”: “field_5bc075fde333c”
  },
  “align”: “”,
  “mode”: “edit”
  } /–>

   

1. Choose a contrasting color for your primary call-to-action

Let’s start by debunking a myth: the best color for any and all call to action buttons does not exist. It’s not true that red, for example, always outperforms green. Or that blue always does better than orange.

People who tell you otherwise are full of sh*t.

The most important thing is to choose a color in the color wheel that is diametrically opposite to the main color of your page.

What you shouldn’t dois to create a CTA in the same color as your page’s main color.

A call-to-action that blends in with the overall colour scheme of your page is guaranteed to result in fewer clicks.

The proof: Ardennes-Etape

In the original version (on the left) the call-to-action has the same color as the rest of the page.

But a green page with a green button doesn’t work.

In the variation we changed the color of the button. The call-to-action now draws all the attention.

The result: a lot more bookings.

Conclusion

The color of your call-to-action should contrast with the primary color of your web page. And is preferably a unique color in your color scheme. So don’t use the same color for other elements.

2. A call-to-action button should stand out in terms of design

Let a button be a button.

The worst thing you can do, is to not make your button look like a button.

That doesn’t mean you have to use shadows and three-dimensional edges like in the ’90s.

But a word with a line drawn around it is not a button. That’s a word with a line drawn around it.

So be sure not to use ghost buttons.

Proof #1: ghost buttons cause people to click all over the place

Unbounce tested this on their website and compared 2 versions:

• The original version with a bright and bold action button.
• A variation with a ghost button.

The result?

Confusion all around!

This becomes apparent in the click heatmaps. In the ghost button version there are 600% more clicks on elements that are not clickable. Because it is not clear what the real action button is.

Eat that.

Proof #2: 20% less clicks on the action button at a web agency

“Yeah, but that doesn’t really go for web agencies as well, doesn’t it?” I hear some people think. “Because a web agency’s audience isn’t just your average audience.”

Well, see… that’s just like, your opinion, man.
And opinions don’t count for much in our business.

So, let’s put it to the test.

The result? 

20% less clicks on the ghost buttons. Even though on this page there is only one thing you can do: click on “View our work”

Eat that.

Again.

Proof #3: 17% loss of time

A series of first click-tests, set up by our friends at CXL Institute, have shown that it takes users much longer to click a ghost button compared to a regular button. 

Because a ghost buttons doesn’t stand out enough.

The study was always run on pages with only 1 action button.

The result?
On the version with the ghost button, people take 1.3 seconds longer to click the button. In the ghost button-version people take 9 seconds. While in the version with the big, fat action button people only take 7.7 seconds.

I’m going to say it one more time: Eat that!

Decision

Never use ghost buttons. A big, fat action button generates big, fat sales.

3. Use visual cues to direct action towards your call-to-action button. 

So, a big fat action button in a striking color.

What else can you do?

Make your button stand out even more by including a visual cue. 

This could be a subtle arrow in your button.

But the thing that works best, is a notable arrow that points at your button. 

A lot of designers are disgusted by this.

But put it to the test yourself. Go stand in a busy square tonight and look in a certain direction. It’s unlikely that a lot of people will follow your gaze.

Now point in that direction. Want to bet that a bunch more people start looking in that direction?

Does every button need to be a big, fat action button? 

No.

These three design tips concern the primary calls-to-action on your website or app. The buttons that denote the most important action. Getting a quote, adding something to the shopping basket, sending a form…

Secundary calls-to-action should not be as obvious.

That’s why it’s a secundary action button. Because it’s about less important actions, like “Add to Wishlist” or “Compare”.

Those secundary call-to-action buttons should also be visually secundary. 

You can do that by using a lighter color, or no color, for example. It can even be a ghost button. Or just a link.

Make sure that your secundary button is not detracting attention away from your primary call-to-action.

A secundary call-to-action doesn’t even need to be a button. Bol.com, for example, just puts an extra sentence as running text besides the action button:

The sentence ‘On Wishlist’ does not detract attention away from the main player ‘In shopping basket’.

Are there any more designtips for call-to-action buttons? 

Nope.

That’s it.

Rounded corners or square?

Doesn’t matter. Because it doesn’t make a difference. In that regard, choose whatever suits your brand.

But don’t waste hours discussing matters like that. It won’t contribute to your turnover.

But there is much more than design

• The placement of the button on your page
  A good call-to-action is useless if nobody sees your button. So put your action button in a place where it stands out, and where people expect it.
• The most important thing: the copy in your call-to-action
  It’s the copy that will ultimately convince your visitor. In my workshop usability and conversion optimization I provide a lot of tips on the subject.