3 steps to design a call-to-action button that converts: best practice, examples, and a few unconventional ideas

Knowledge

004-YOYO-NOV18-HIRES-9948.jpg

Pushy car dealers.

If you want to buy a car and walk into a car showroom, there’s one sure way to not buy one: that is to meet a pushy salesman. A pushy salesman might describe all the features of the car in immense detail and with great enthusiasm, but as soon as you feel pressured to sign up even before you’ve had a test drive, the last thing you want to do is to convert into being one of their customers.

And this problem of ‘not converting’ happens with call-to-action buttons too.

On the surface, a call-to-action button is a link that is highlighted on a page. It asks a visitor to your website to click on it and then to take the next step, to sign up to a product, service or email list. And surely, that’s it, and there’s not much to it than writing ‘click now’?

The opposite is true.

Many call-to-action buttons do little to help drive conversions. In truth, there's a lot of thinking that can go into a great call-to-action button that can drive the numbers of clicks on your page.

So how do you do it?

How can you create a great call-to-action button? There are three big ways:

  • The correct position of the button on the page
  • How the button is designed with colours, shape, and words
  • What happens before the button to make you more likely to click on it

So let’s look at the first point.

Before we buy a sofa, one big question that goes through our mind is: where should it go?

We don’t want it in a corner away from the TV because nobody will be able to watch the latest episode of The Crown on Netflix. We don’t want it tucked away in the corner of the room because it doesn’t lend itself to talking across the room to people when they visit. It certainly can’t face the wrong way and look at the wall. So, just like a call-to-action button, both need correct placement.

Where do we place our call-to-action button?

At the top of the page on the first fold or at the bottom? Or both? Or a number of times on the page? And should we have more than one call-to-action?

Let’s take a look.

Most brands place a call-to-action above the fold. It is one of the first things that visitors see when they land. For those who have already bought into the brand and what it’s offering, and don’t want to scan a whole sales page, the call-to-action button is there, ready to click.

This is particularly useful if you have seen a brand who has done a lot of marketing beforehand. You might have seen a great TV ad or social media video that has meant you just want to get on their email list or sign up to the product.

You might have a friend who has raved about a brand, product or service and you just want to sign up to a newsletter or product without the bother of scanning down a page.

That’s why placing a call-to-action button at the top of the page works. It gets people who want to click quickly to click quickly.

Take, for example, Evernote.

Evernote has a ‘sign up for free’ as soon as you land. If the visitor just wants to ‘sign up for free’, the button is there, ready and waiting to be clicked.

evernote

Alternatively, if a user wants to know more, they can scroll to the bottom of the page after reading about the product features, benefits, reviews and case studies, before signing up there and then.

What you’ll notice here is that Evernote includes more fields to fill in manually, plus a quick ‘sign up to Google’ option too, alongside a reminder of the core benefit of Evernote on the left-hand side.

evernote2

However, in practice and in theory, there is a huge benefit of allowing people to sign up at the bottom of the page without having a call-to-action button at the top: the quality of customers that you get signing up to your page.

Surely, most websites have call-to-action buttons at the top and the bottom? 

Yes, they do.

However, some businesses have different goals that don’t involve big email lists of customers who haven’t gone through much quality control. And that’s why it can pay to have a call-to-action button at the bottom of the page, and nowhere else.

Take a look at highly successful website Psychotactics. 

There is no call-to-action button at the top.

screenshot

Instead, the call-to-action button is at the bottom.

screengrab

This means that the visitor has to do the hard work.

They have to scan the page and buy into the philosophy and approach before clicking on the subscribe button. This might sound like madness, but it’s the opposite: the placement of the button here is intentional and delivers email signups from those who have bought into the philosophy of the brand.

Even though this might take a longer time to build a big list, it does ensure a list that is of more quality, a list that will convert more, and take the next step. It ensures that you’re not just going to get people who are there just for a cheap sign up. It’s just like dating: you have to vet the profile and buy into them before you decide that you want to sign up.

It’s clever, but not common.

The placement of the button is clearly important, but what’s equally important is what the button looks like when you find it. It needs to look good and strike an emotional nerve in your brain so you are more likely to click on it.

How are you able to get a beautiful call-to-action button that customers want to click on?

What words have got to go into one?

What has it got to look like?

Let's look at our 2nd point: How the button is designed with colours, shape, and words.

Call-to-action buttons tend to be highlighted in blue, green, or yellow (or the colour of the brand). Sometimes they are coloured in red, which indicates that urgent action has to be taken.

In this example, Unicef has a yellow button that isn’t aggressive or pushy but it is markedly different from the blue and white background colours elsewhere on the site.

screengrab

In this example, Tim Ferriss uses a red call-to-action button to add urgency to sign up now to his email list on a pop-up window.

screengrab

This colour differs from the call-to-action button on his homepage, which is in a more emotionally neutral black with white copy.

The takeout is that if you are trying to drive short-term reaction, red is a good colour to use. However, an overuse of it can be intense and tiring to view, so do use it sparingly.

Once we have the right position, it’s time to move onto the shape of the call-to-action button.

Fortunately, shapes don’t vary wildly with call-to-action buttons and so don’t need much discussion. They are almost without exception squares or capsule-shaped because they resemble a button.

In the 1990s, they used to be little more than hyperlinks, and sometimes contained with a box. (See the example below from Starbucks in the 1990s).

screengrab

Since then, the convention has been to make them look like a button.

If any of your audience is visually impaired, having a large button helps, as well as having large fonts. Not only this, it creates less friction for the user to have to click on it, all which drives conversions from a call-to-action button.

And this sounds rosy.

Until you realise that making a button large too easy to find, can have a downside. If users can find a button too easily, then they are able to click (or not click) and then leave the page. If the goal is speedy conversion for your page, that is fine.

However, from an SEO and dwell time angle, it can encourage people to spend less time on your page.

And if people are spending less time on your page, then not only does it not help your site rank, it also means that visitors are rushing.

Rushing is fine if you are wanting a quick sell or speedy conversion.

But it’s not fine if you want customers who need to buy into you and what you sell. There’s nothing worse that an over-inflated list of unqualified email addresses who don’t convert as they should, simply because they’ve been rushed to signing up.

So, if you want people to sign up, just remember that they need to buy into you long before they sign up, and it can pay to have your call-to-action off-screen or not too easy to find. Otherwise, you’re making life harder, when it comes to converting them to a sale.

Button size, button colours, button shape and button location.

That’s it, right? Can’t we just get going and tweak our existing one?

Well, not quite. There is also one more button in our call-to-action armoury: the copy.

The use of great copy in our call-to-action can persuade a visitor who is hesitating whether to sign up to overcoming that hesitation and signing up.

What are the elements then that make up persuasive copy in a call-to-action button?

  1. The action
  2. The benefit
  3. The tone of voice

Within any call-to-action button, there needs to be [insert drum roll] a call-to-action! Yes, that means there needs to be a command or a verb like ‘sign up’, ‘contact’ or ‘buy’.

It doesn’t take long to find many examples of this, but on its own, more is needed to persuade someone to sign up. And that’s why it’s a useful idea to include a benefit in the call-to-action too.

A benefit is a reminder of the result that people will get when they click on your call-to-action button.

Take the brand 4Ocean.

Their call-to-action is 'shop now' and the benefit ‘pull-a-pound’ follows. That means, that if you shop now you’ll pull a pound of plastic from the ocean.

screengrab

The tone of voice is incredibly important.

The more enthusiastic, more light-hearted and non-pushy it can sound, the more persuasive the button can be to get more sign ups. Instead of a more direct ‘buy now’ or ‘sign up now’, a softer-sell approach can work wonders.

In the example below from Noah Kagan, it is simply ‘spice me up’.

There is no benefit in the call-to-action button, but the benefit of ‘get access to 85% of my hottest business hacks’ s in proximity so doesn’t need repeating.

evergreen

Hostelworld has an emphatic ‘Let’s go!’ button.

Their button doesn’t have a clear benefit in but is so upbeat that you want to just enter your email and just find out where to go. What’s more, it fits with their young and fun brand tone of voice.

screengrab

We’ve covered an awful lot so far:

  • The importance of the position of a call-to-action button
  • The colour, shape and size of the button
  • Why tone of voice and a clear, specific benefit matter

However, there is one final angle that we need to cover off.

It’s an angle that everyone forgets when thinking of a call-to-action button: the emotion that’s created before a visitor gets to the call-to-action button.

No call-to-action button is created equal.

Before anyone clicks on a call-to-action button, they may have either seen an ad (TV, social media, or PPC) or heard about you from a friend. They may have stumbled upon your site from an organic search.

This means that before any visitor clicks (or doesn’t click) on your call-to-action button, they will be in a heightened or even a flat emotional state simply because of the journey they have been on before.

The journey before is so important.

If you have created enough enthusiasm in a visitor before they arrive at a call-to-action button then they are far more likely to click on it. Think of someone who has met you at an event compared to a visitor who lands on your page for the first time.

The visitor who you have moved with your advertising, promotions and landing page sales copy is far more likely to click ‘sign me up’.

And that visitor who hasn’t experienced that same emotional journey is far less likely to, and no matter how big, small or clever the words are on your call-to-action button, they are less likely to convert.

Instead of thinking that just by tweaking your call-to-action button that you will radically improve your on-page conversions, think of the journey the visitor is on beforehand. Make sure that your sales page copy sings, make sure that you are reaching a lot of customers and moving them in how you are promoting beforehand.

When you do that, then you’ll see drastic not just incremental changes to your call-to-action button.

What’s useful, is that you now have a clear process to get a clear result for a more effective call-to-action button:

  1. Right position (above the fold and below the fold, or below the fold only for higher-quality conversions)
  2. Right colour (green, blue yellow, rarely red)
  3. Right shape (round or square)
  4. Persuasive (lead with a clear benefit of signing up with and a command using a next step)
  5. Make sure that the sales copy (and any promotions before the call-to-action button) creates emotion so that people are more likely to click.

And that’s it.

If you want to know more about how Yoyo can help you with call-to-action buttons, creating a website or driving traffic to your website, please contact [email protected]