What four characteristics distinguish a great call-to-action button from a bad one? Learn how to see results inside.
Even in today’s GPS-ready era, we still often rely on signposts and street signs to help us find our way.
And the same logic applies to our digital journeys on the web. The difference is, instead of signposts, we have call-to-action buttons to tell us what to do next.
These buttons are used when the time comes for your customer to take action.
Download. Add to Cart. Buy Now. Sign Up. They’re all examples of buttons we’ve probably clicked at one time or another.
These buttons can serve many different purposes, but they all have one thing in common: getting people to click them is incredibly important. They’re also ridiculously overlooked, considering they’re one of the most important conversion tools on the web.
As ConversionXL’s Peep Laja put it, “The web is filled with bad calls-to-action. That’s because most people don’t think for themselves; they copy others or just don’t know any better.” So what are the ingredients of a good, highly clickable call-to-action button? And how can you offer call-to-action buttons that your prospects just can’t help but click?
In my opinion, there are four core components.
1. The Offer
The first, crucial decision, is which action you’d like your users to take. Do you want them to buy? Download? Sign up? They’re all perfectly valid options, but there’s one that industry experts say works particularly well.
Free trials rock:
Conversion expert Neil Patel is a huge advocate of free trial offers a tool used by high-performing websites such as Shopify, Insightly and ahrefs.
“There are certain calls-to-action that you can’t help but click and the “free trial” CTA tactic is one of them,” he writes. And he backs it up, too. While 84 percent of users will bounce if you invite them to buy after your first encounter, he writes, you could actually increase conversions by 328 percent by offering a free trial.
The gift of choice:
Of course, not everyone will be ready to take the exact same action on the first visit to your site. This is where secondary calls-to-action come in. Think of these as runner-up prizes.
These are most often seen on E-commerce sites like Amazon, where users are primarily urged to Add to Basket but, if they aren’t ready to buy right now, they can also Add to List. These are designed in such a way that the most desirable action is clearly the most eye-catching, bigger, brighter and more prominent (more about this shortly).
Your users might all take the ideal action, but these secondary CTAs can be used to at least entice them into taking some action.
2. The Wording
There’s a lot of weight behind the words that you use in your button. Albus Dumbledore called words our most inexhaustible source of magic, and it’s hard to disagree. I mean, the guy’s Dumbledore. He knows stuff.
Short is sweet:
Firstly, let’s avoid making it too long. There’s no fixed rule, but experts tend to agree that around five to seven words are the upper limit of what you should aim for. Three to five seems to be the sweet spot.
Long live the verb:
Remember, the key word here is action. You want to inspire that action by using verbs. These include words such as:
- Download
- Buy
- Start
- Try
- Get
- Join
- Learn
- Discover
- Contact
Wishpond’s ‘The 25 Best Words to Use in Your Call-To-Action Buttons’ is a handy list to help you craft great CTA copy.
Urgency inspires action:
- Get it now.
- Buy it while you can.
- Start your free trial before a monster gets you (OK, maybe not that last one.)
We all know that urgency and scarcity are key drivers of action in today’s age of instant gratification.
You don’t necessarily have to use these words, but there are plenty of experts who advocate their usage. We’re talking:
- Now
- Today
- Immediately
You can also use copy elsewhere on your page to create urgency. Author Ramit Sethi, writer of “I Will Teach You To Be Rich”, combines creative page copy with a great CTA button to really hammer home the message; you need to download this now.
3. The Design
Design isn’t just the art of making things look pretty. Color, size and logical hierarchy all plug into the subconscious psychology of web users. Without even thinking about it, these factors give us very clear clues and prompts on where we should be looking and clicking.
Yes, we said “button”:
First things first, there’s a reason we’re talking about call-to-action buttons, rather than text, links or images. Modern web users are so short on time and have such limited attention spans, that they subconsciously rely on a number of visual cues to help them navigate a website without fully engaging their whole brain.
There’s always a temptation to do things differently, but you really should adhere to accepted logic and rely on the sense of familiarity this builds among your visitors. People know what to do when they see a button, so leverage that familiarity and resist the urge to go against it.
Big and bright:
Experts disagree on specifically how long most visitors spend on your website, but the commonly accepted logic is that it’s typically under a minute. This makes it absolutely crucial that your call-to-action button is visually striking. It really needs to attract the eye of your visitor. Make sure it stands out from the page while fitting into the overall design theme. You don’t want to make it so garish that it’s entirely off-brand.
There are all kinds of crazy stats out there regarding which colors, specifically, convert best but frankly, I take them all with a grain of salt. When it comes to the best button color for your audience, your focus should be less on the button color part and more on your unique audience. In other words, it differs from site-to-site and the only way to really understand what works best for your business is to A/B test, A/B test, and A/B test again.
However, you can start out with a simple (slightly weird) way to measure this yourself.
Go ahead and cross your eyes, then look at your page. If your primary desired action isn’t totally clear, even with your eyes crossed, then you need to look at it again. I blurred an image of the Publi.sh home page to illustrate this.
That big green button? It’s the primary goal of our home page. We want people to sign up for awesome free content and, as you can tell from this experiment, that’d be obvious even if you couldn’t read a word of text.
I’m a big fan of the VWO website. The orange button catches the eye without being overly distracting. It’s also large enough to see from a distance, without being so ridiculously oversized it takes away from the rest of the content. See how you almost feel magnetized toward the big orange button, but are still able to read the white text easily and clearly? That’s what we’re looking for.
To illustrate this point still further, how about this call-to-action on German website myownbike.de? I don’t speak a word of German, but Dein Bike designen? Don’t mind if I do. When you can understand the key call-to-action without even speaking the same language, you know you’re in good shape.
4. The Positioning
Of course, call-to-action buttons are just one element of your web page. No single element can exist in a vacuum. The success of your call-to-action button also depends heavily on what is happening elsewhere on the page. Clearly, the button needs to be easy-to-find, in a logical position that is in the path of the reader. It’s pretty much common sense that you don’t want to be hiding the call-to-action in a dark corner of your page.
Beyond that simple advice, however, things get a bit more complex. Experts disagree fundamentally on a general best practice. Most accepted logic says the CTA should be positioned above the fold but Neil Patel found that this actually decreased conversions by 17 percent, with users preferring to learn about the offer before clicking.
GrowandConvert published some research suggesting where CTAs performed best on a website, and, although the results are fairly subjective, they are pretty interesting:
- Sidebar: 0.5 – 1.5 percent
- Generic, end of post: 0.5 – 1.5 percent
- Popups: one to eight percent
- Sliders and bars: one to five percent
- Welcome gates: 10 to 25 percent
- Feature box: three to nine percent
- Navbar: Varies
My personal advice is to simplify and declutter your pages. Whitespace is your friend. The fewer distractions on your page, the more eye-catching and clickable your CTA button will be. According to VWO, for example, Open Mile was able to increase their conversion rate by 232 percent by reducing clutter around their call-to-action.
You might also want to look into subtle, directional tricks. Check out the Jedi mind tricks of the guys at Chemistry.com. The female model on the front page is looking right at the call-to-action area, a subtle clue for the user as to where they should direct their attention.
This case study, shared by Wishpond, tells a similar story about how directional cues can influence user behavior.
The key, perhaps, is to divorce yourself from your own page and look at it with new eyes. Pretend you’re a viewer, visiting the site for the first time. Is it immediately clear where you’re expected to head next? If it’s not, take things back to basic. Simplify, and go again.
Closing Thoughts
There’s no disputing the importance of a highly clickable call-to-action button. High conversion rates, invariably, contribute to successful, profitable businesses. And there are definitely some best practices that seem to apply to the best-performing ones.
- They should be a color that stands out from the rest of the page while remaining on brand.
- They should be large enough to be seen from a distance, without distracting from the rest of the content.
- They should have clear, action-led copy and, ideally, convey a sense of urgency.
- They should be prominently positioned on a page with plenty of white space, and a clear value proposition.
Beyond this, it’s tough, because no two websites are exactly the same. You need to do research on your own particular audience to work out what’s most effective whether it’s market research, feedback forms, surveys or A/B testing. Running split or multivariate tests lets you deploy multiple variations of your website, and analyzing which one works best.
Over a period of time, you can test every single aspect of your CTA buttons, from color and size to copy and positioning, as well as pretty much any aspect of your CTA you’d care to mention.
