How To Design a Call-To-Action That Converts
It all comes down to this.
It’s the make or break moment. The decision every visitor must make before they become your customer. Will they take you up on your call to action?
Your newsletter signup form, free trial signup, purchase button, etc. These are all examples of call-to-actions. And they’re one of the most critical components of any marketing website.
Today I’m going to share some tips on how to design your call-to-actions so they have a real, lasting, positive impact for your business. Let’s dig in…
There is a common misconception in the online marketing world that if you apply tried and true styling to your call-to-action buttons, then they will convert like crazy! They say yellow is the button color that works best, so you’d better use yellow every time! Add a circle around that button color, because that’s what the highest-converting pages have done. Don’t forget to slap two ugly arrows pointing at that button. That’s been tested to “work” too.
What do you end up with? Something like this (look familiar?):
Bleh.
Sure, those “studies” about conversion rate optimization that led to these “breakthroughs” in call-to-action button design might be based on real results. And your designs may or may not actually perform incrementally better in the short-term when you take this tactical approach. But it will come at the cost of giving a “spammy” appearance with a disjointed design. That will degrade customer’s sense of trust in your brand. This approach may attract some buyers, but it might also turn away the customers you’re really going after.
The point I’m driving at is this: How well your call-to-action button performs doesn’t depend so much on the design of your call-to-action button itself, but on everything that led your visitor to it.
- Did you present a “no-brainer” value proposition?
- Did that message resonate with your target customer?
- Did you establish credibility using trust symbols and social proof?
- Did you structure your page so that it’s easy to digest and proceed without friction?
These are the things that will ultimately have the greatest impact on how well your pages and calls to action convert visitors to customers.
That being said, let’s cover a few tips when it comes to designing your calls to action:
There should only be one CTA
Every page should lead to one primary call to action. While there can be a number of elements on the page that attract attention (in an orderly fashion, using visual hierarchy), only one of those elements should ask the user to take a specific action, like clicking a button, filling out a form, etc.
If you have too many different calls to action, then they will not only compete for your visitor’s attention, but it will make them work harder to decide which action they want to take (because they can only take one). That can be frustrating and confusing, which may lead them to abandon your site altogether.
So it’s best to keep the focus of one page on leading to a single call-to-action. But that doesn’t mean you can’t repeat that same call-to-action multiple times in one page. These days, as landing pages are becoming longer and relying more heavily on scrolling, it’s common to see a CTA near the top, perhaps one more near the middle, and a final instance of the CTA at the bottom.
In my pre-launch landing page for my book, Design For Conversions, I did just that. The top area displayed the first call-to-action, then I placed another in the middle area, and a final CTA at the bottom.
Effective Labeling
There are two things you should aim for when labeling your call-to-actions:
- Be descriptive and set a clear expectation
- Reduce the natural friction that comes with taking action
You want to be descriptive so that your customer knows exactly what will happen as soon as they click that button. You never want them to second-guess themselves.
For example, let’s say you’re trying to get visitors to subscribe to your email newsletter. Rather than labeling your email signup button “Submit”, you can try “Get My Newsletter”.
That’s a good start. It’s more descriptive. But users are often wary of giving out their email address. They’re afraid they might be spammed, or pushed toward buying something. So you need to reduce that natural friction.
Let’s modify that button label once more: “Get My Free Newsletter”. By adding in the word “Free”, we’re reminding our user that this costs them nothing. We’re giving them something of value for free. This should be perceived as a “no-brainer” value proposition, making your visitor more likely take you up on the offer.
Brennan Dunn has a very effective call-to-action to join his newsletter. He uses elements of social proof (“over 6,000+ freelancers”), reduces friction by reinforcing the fact that it’s FREE, he uses a descriptive button label (“Join Now”) and reinforces friction again by reminding visitors he won’t spam them.
CTA Button Color
Your call-to-action should take one of the top-spots in your visual hierarchy. That means you need to give it a healthy dose of visual weight in order to attract the visitor’s attention.
Size and Space will help. Your CTA button can be large and supported by plenty of space so that it doesn’t get crowded out of view.
But the color of your call-to-action is probably what will have the most impact here. Go for a high-contrast color to make it really pop off the page. But you can take it further by using a unique button color that isn’t seen anywhere else on the page. That will do two things:
- It’s unique color will draw attention simply because it’s different.
- If you have multiple CTA buttons throughout your site, it will make them more familiar and easier for your visitor to find.
Basecamp uses a green color for their sign-up buttons. While all of the other links throughout their site are blue, and some of the key headlines are highlighted with red, the only time you’ll ever see the color green is in their call-to-action signup buttons (and a hint of green in their logo too).
They also do a great job of labeling a reducing friction by using the text, “Start your 60-day free trial”.
So as you go about designing your call to actions, remember:
- What really matters is everything that leads up to your CTA.
- Only have one CTA per page, but it can be reinforced several times.
- Set expectations and reduce friction with effective labels.
- Use color and contrast to differentiate your CTA.
I hope this helped. It was based on some of the material found in my upcoming book, Design For Conversions. If you want to go deeper into stuff like this, be sure to enter your email to receive a free chapter and a coupon code when the book comes out this Fall.