19 Dec, 2022
You have a website. You get traffic.
Your visitors take one glance at your site and immediately get in touch with you.
If the first two steps are there, but your click-through rates and conversions are low, you’re not getting your happily ever after.
So what’s going wrong?
Maybe the visitors who come to your site are not well-suited for your company.
But if you are attracting your target audience and they still aren’t clicking that CTA button, it could have something to do with your CTA buttons.
What if your visitors can’t find your button? What if they’re unsure if it’s an ad or malware?
No need to risk losing all that traffic.
We’ll help you maximize your conversions and CTR rates with some CTA button best practices.
You can skip straight to the practical tips. But we suggest you stick around so you don’t miss the vital context.
A CTA button is the part of your website that solicits a response from the visitors and guides them on where to go next to help them engage with your site the way you intended.
CTA stands for “call to action” or, in this case, “click to action.”
CTA buttons are a web design staple because they’re sharp, clickable, and grab the readers’ attention better than standard text links.
You probably have a few buttons sitting on your site, looking like this:
Now let us ask you this: have you clicked on every single button you’ve come across?
Why not? They’re all buttons and have calls to action on them, right?
But not every button seemed relevant to your needs and worth your time.
Either that, or you couldn’t tell exactly what the button was supposed to do or why you should care, and didn’t want to bother figuring it out.
Your site visitors feel the same way.
So just plastering some buttons on your site to tick the box isn’t enough.
The real question is, what does a good button do differently?
The most effective CTA buttons do one of these four things:
And that’s why they’re successful.
If a site visitor doesn’t understand the button’s purpose or it seems irrelevant (whether that’s really the case or not), they simply won’t engage.
So let’s ensure your buttons do their job and get visitors to click.
We’ve established that having buttons isn’t enough of a reason for your visitors to click on them.
But you can make that click happen.
Here’s a quick overview of the CTA button best practices to help you get there:
|CTA button best practices||Key points|
|Use powerful conversion copywriting|
|Make it accessible and clearly visible|
|Design with mobile in mind|
|Keep the primary CTA above the fold on key pages|
|Give your CTAs a hand with supporting text and images|
|Stay in touch with current design trends|
|Meet your new best friend: A/B testing|
And below is the full CTA optimization roadmap.
Conversion copywriting is specifically designed to engage the visitor and drive the desired action, be it a purchase, registration, donation, download, or something else.
It explains what to do and why (or when) it’s a good idea for your visitors.
You might think anything you put on your site counts as conversion copy.
But if your copy is fluffy or vague and doesn’t serve much of a purpose other than “well, we gotta put something on there,” – it doesn’t really qualify as conversion copy.
You need a more focused approach when it comes to CTAs and the surrounding copywriting. These pointers can help:
Here are two great CTA button examples that demonstrate how to do this if your company is B2C or B2B.
The first one is B2C from the American Red Cross:
This short website section is simple and effective:
All that with barely four lines of text, including the button.
Here’s the second, a B2B example from Lavender:
Again, a few things to steal – uh, get inspired by:
Both of these CTA button examples also follow the best practices we’re talking about next.
The CTA button should be the most obvious and eye-catching item on the page.
The best copywriting won’t matter if visitors can’t read it or find the button in the first place. And if your button isn’t easily visible to people with color blindness or impaired vision, you’re missing out on potential customers.
You need to make your CTA button accessible to everyone.
So make sure it stands out in more than one way:
In this mock-up, the button rises when you hover over it:
You can also use animation to draw the eye towards the button, like this:
Accessible button design welcomes every visitor to your site and widens your reach. And colorful, fun elements ensure that nobody misses the memo.
Do you absolutely need these effects? Of course not.
But think of how many websites your visitors see each day.
Making your CTA buttons stand out can increase your conversions and make you memorable enough for return visits.
Desktop and mobile buttons shouldn’t be in the same location on a web page.
While we’re at it, desktop and mobile page design shouldn’t be identical because their layout is miles apart. What works on PCs doesn’t necessarily work on mobile devices.
Here are some things that often get lost in translation if you’re not careful:
To make the most of your elements, pay attention to how your site renders on each device and make individual adjustments accordingly.
Here’s an example from State Creative’s portfolio.
The desktop version of Zuli:
And the mobile version:
There is no weird horizontal scrolling or information overload. Only what you truly need, with the CTA button still above the fold.
“Above the fold” denotes the part of your website that visitors see without having to scroll. It’s where they land on your homepage or services pages, and it’s where your primary CTA should be.
The logic is simple:
This part of your website gets the most attention, so you are sure that 100% of the page’s visitors will see your CTA button and potentially click on it.
Clear navigation is a crucial part of user experience.
Website visitors fully expect you to guide them from the moment they arrive, so don’t make them look around too long or backtrack to find a CTA.
People may choose to stray and scroll a bit first or click on something from the menu. But that’s only fun as long as it’s a choice.
If they have to work for it, they’re more likely to bail.
You can prevent that by plotting CTA buttons around your site like signposts, so visitors know where to go next, no matter where they land.
The CTA button doesn’t have to fend for itself. It’s best to complement it with surrounding elements like images and text to ensure clarity and a solid UX.
With that additional context, there’s less pressure on the few words that can fit on your button to relay the message on their own.
Take Charity:Water’s homepage, for example:
Each element is utilized to create a cohesive design and stress the same message:
Yes, the CTA button itself only says “join today.”
But as a visitor, you’re already immersed in the story, and there’s no doubt about what that means.
Websites have been around for a while.
If you don’t make an effort to keep up, you risk your site looking outdated compared to competitors.
If the site seems particularly rusty, potential customers might assume you’re not in business anymore.
Not a look you want to have. You’re offering modern services, so your UX and design need to reflect that.
Use these current CTA best practices to make the right impression:
CTA optimization doesn’t have to be complicated.
Here’s a simple and effective example:
This button fits with the style and voice of the rest of the site.
Note that it could have easily said: “learn more” like every other button ever – but “see our animals” lets the reader know what they’re getting, and fosters the message further.
But this doesn’t mean you should just do what everyone else is doing. Use the current design trends as your guideline, but add your own innovations.
Then, start strategically tweaking and test, test, test.
Did we mention testing?
A/B testing compares multiple versions of the same page on your site to see which version results in better metrics. It’s the quickest way to measure which version of your CTA button performs best in terms of CTR rates and conversions.
You can google “CTA button A/B testing best practices” and learn all about them in theory.
But testing your options in context will give you the most precise and tailored advice possible.
There are plenty of case studies that prove A/B testing is a great idea. Here are two simple ones:
Wondering what’s the best CTA button color or placement? Test it!
But do it in a controlled setting, one element at a time, so the results of each action are clear.
If you change your button placement, copy, color, and size all at once – whatever the results are, you won’t know what caused them.
Positive examples and tips are necessary to show you what to strive towards. But sometimes, you need to see examples of what not to do and why.
What’s the worst that can happen?
Mistakes in web design can cost you way more than it would take to fix them. When it comes to CTA buttons, these are the six to avoid:
If they can’t read the text on the button, visitors won’t take a chance on it.
Two common readability issues can ruin your UX:
Here’s an example of what not to do:
Using buttons like this results in your visitors squinting at the screen and clicking away.
Additionally, if the surrounding text looks like a wall of fine print, even attempting to decipher it can feel like too much commitment.
Your visitors aren’t there yet, especially right off the bat on the landing page. You need to remove obstacles between them and the action you want them to take.
So make the button and its text large, and use contrasting colors and simple terms.
Clarity comes first; persuasion after.
Before your visitors decide whether they’re interested in your offer, they need more information. Here’s what won’t work:
Buttons like “click here” or “buy now” with no other context aren’t likely to drive a response from anyone.
Sure, you know what each of your buttons do.
But the reader doesn’t. And they need to know what’s in it for them.
Visitors don’t want to solve a riddle to find the information they need, or perform an action simply because you’ve asked them to.
They could even suspect it’s malware and avoid clicking the CTA button altogether.
You can prevent that. Build trust with visitors and make the button relevant to their journey:
|What to change||Examples|
|Make the button text descriptive|
|Combine it with the surrounding text to provide more context and convince the visitors|
|Know who you’re targeting and make it all about them|
That said, you shouldn’t over-explain or offer too many options either.
Choice overload is a real thing.
Competing CTAs can be overwhelming. You don’t want to confuse visitors or send them on a scavenger hunt around your site – they won’t stick around.
We’re not saying options are bad.
You can provide multiple options. It’s a good practice to account for people in different stages of the customer journey and varying degrees of familiarity with your brand.
Some people need more education on the subject matter. Other visitors know precisely what they’re looking for and simply need you to convince them that you’re their best choice.
Still, try not to give them more than a couple of the most logical options via CTA buttons.
Focus on the UX flow and use the buttons to guide the visitors to the next most logical destination.
And don’t worry.
If they happen to need something you didn’t put on a button – that’s what the navigation bar is there for.
This mistake is pretty straightforward and follows our previous point’s conclusion: the more isn’t necessarily the merrier when it comes to web design.
Your CTA button can be challenging to find if:
While we’re at it, if you’re using an image for a button, it can become invisible because it’s inaccessible to screen readers.
Nothing indicates the button is there. And if the image doesn’t render, it won’t work.
Avoid this mistake by making your button large enough, contrasting the colors, and leaving enough white space around it, so no other element steals the spotlight.
This point depends on your brand and audience. Generally speaking, your copy should:
However, always be respectful.
If your approach comes across as too negative or aggressive (whatever that sounds like to your target audience), it can offend or annoy visitors and backfire.
Don’t guilt-trip them into clicking or make the “no, thanks” option sound too self-deprecating.
Stick to softer persuasion and let your points speak for themselves, so the visitors feel like you respect their decision, even if it’s to leave your site.
That way, you leave the door open.
So, even if the readers don’t need what you’re offering right now, they might come back if the situation changes.
We don’t need to point out that most people access the internet from their phones.
If you only have a desktop version of your website, it likely gets jumbled on mobile and ruins the UX for many visitors. Some things, like links, may not even work.
Optimizing for mobile should be a high priority so you can tap into every opportunity that comes your way and maximize your returns.
Ensure your CTA buttons work on any device. Even if they do, check again every once in a while.
If they don’t? Well, maybe we can help.
Outdated design, unconvincing copy, and misplaced CTA buttons are okay if you want your site visitors to remain visitors.
But you don’t. You want them to convert to paying customers and donors.
The first step is helping visitors understand:
The best CTA buttons do just that.
But all that conversion copy and A/B testing might seem… unappealing.
So why not let us do it?
State Creative can take a look at your site and handle your CTA optimization, among other things, as part of our Website Maintenance and Security pro and custom packages.
In the meantime, continue your journey of website improvement by reading about website maintenance and SEO next website maintenance and SEO next.