Call-to-action buttons are often associated with sales, but they are there to do much more!
A good CTA can help the user find their way through a website by simplifying the process, boost the overall performance of your pages, while also showing results on parameters such as click-through rates.
It may seem simple, but crafting a perfect CTA takes consideration. You need to consider your brand and content to find out what fits them best, while also having your users and their habits in mind in order to make the most out of their visit.
There are multiple aspects of a call-to-action, and only developing them all in synergy will get you the best results. Let’s talk about all of the steps needed to adapt CTAs to your advantage and give your website that extra polish.
Develop A Perfect CTA For Your Website
Same as with your entire website, investing just a bit more time into a visual presentation of your CTA can go a long way.
Sure, you can just place a rectangle with the big SUBSCRIBE or BUY text on all the pages and call it a day, but not only does it look lazy, it can prove to be a disadvantage, as many users are tired of generic CTAs.
So, what can you do to make the CTA stand out? There are some overlooked tactics you can apply to increase the chances of your visitors actually clicking the button intentionally.
Make it clear that the CTA button is clickable
When it comes to getting conversions, you shouldn’t assume anything – even though it may look obvious, you should always make sure that your audience knows where to click.
You don’t need to do anything too dramatic that doesn’t fit in with the rest of the page. One of the simpler ways to make the CTA stand out is by adding some 3D effects. Both gradients and shadows can help you grab attention. Either way, just don’t overdo it – you just need to create a little bit of depth.
If you want to go with a flat design, try to make the button look more like exactly that – a traditional button. Make the edges more rounded and don’t put the text too close to them.
Choose the right size
This goes both for the frame and for the text. When you’re placing your CTA message, the first thing to consider is if it’s legible and large enough.
The size should be enough to be readable, but not too large and overwhelming compared to the rest of the content on your website. Aim for a slightly bigger font than the paragraph text on a given page.
As for the button size, it's better to “let it breathe” and increase visibility by using negative space instead of simply making it larger. Let the lack of content and colors help it stand out.
Think about the colors
To complete the design, you should use the appropriate colors to make the CTA distinctive.
As we already discussed, it needs to stand out, but be careful not to go too out there and make it look like a scam pop-up. Some of the most frequently seen choices are green and red. This also shows that the perception of colors doesn’t always have the same weight as in other cases – red can often grab attention and push conversions even if it may be associated with something negative.
The color choice may also come from your branding – take a look at your color scheme and pick something complementary.
After you’ve decided on the design, you need to think about the perfect spot to place your CTA. The visual work you’ve done will be going to waste if the placement is not thought through.
Even though you should rely on your data and experience, this one is almost always best done when it’s intuitive – you don’t want your website visitors to backtrack in order to find the button.
Try to align your CTA with the flow of your page and place it in the appropriate part of the users’ journey. You want them to sign up after they’ve already read about your offer, as they now have the necessary information, so you should place the button after the explanation. This means that the CTA should help them complete the next logical step and move them along the funnel.
Even though you don’t wanna place the CTA before all of the essential information, it’s important to keep the button above the fold so that the users don’t miss it. You can keep some additional content below to contribute to the decision, but move it below the button to keep it from distracting and make sure that the button’s placement makes it easy for the users to notice it.
If you’re still unsure, the “F pattern” can be helpful – it’s an outline of how users tend to scan the page – starting from the first word in the top left, going right, then down the left side as if they’re drawing the letter F. Even though this rule isn’t without exceptions, it can help you land some more clicks.
When the content is longer, the CTA should come as a natural continuation, both in a narrative sense (more about that soon) and visually. Just try to avoid putting too many buttons on a single page, as they could confuse the audience.
With visuals and positioning taking the spotlight, the text of calls-to-action can often be overlooked because it seems so simple.
Don’t fall into the trap of always using the same CTA and making all of your buttons look the same. You should put at least the same amount of work into the message as in the design aspect.
As it says in the name, you want the users to take action, so make that a part clear as possible so that the users know what exactly they need to do and what will be the result.
Don’t be afraid to be straightforward, but always have the tone of your sentences in mind. You should also stay positive and affirmative, even if it might sound too promotional – remember that you’re offering value. There are a couple of small tweaks that can help you make the most out of your messages.
You need to get specific, as the CTA comes after a longer piece of content, and you don’t want your prospects giving up just as they were about to convert. In most cases, up to five words should be enough. Of course, you still need to send the message, so don’t leave anything ambiguous – for example, add “Our brand new ebook!” after “Download”, and you have a short but enticing CTA that tells the users exactly what they’ll be doing.
Play around with alternative CTAs
It’s good to add something that fits your brand voice. Try and make things more custom and personalized. It also doesn’t have to be anything over the top – for example, use “Let’s have a chat!” instead of “Contact us”, as it sounds more like a continuation of the previous content they read instead of a completely separate action.
After the Setup
When you’ve put everything in motion, you’re not quite done yet.
After you found the perfect spot for your CTA, thought the design out, and wrote the message, you still need to double-check if you’re taking the users to the right place – confirm that the landing page matches the intent.
As we mentioned, the result of their action should be clear, so you need to make sure that the “Download our amazing app” will take them to the download page and the “Call us now” actually starts a call.
If you had dilemmas about the colors and styles to use earlier, the best way to make the most out of your CTAs is to A/B test them. Let the users’ feedback make the decision for you. Just don’t forget to change one element at a time, so that you’re sure what made the difference for your users.
Testing is essential for every part of the journey, so you should always apply it in analyzing the ways visitors interact with the content. By using a heatmap tool, you can get a better understanding of the way users behave on your pages. This can make the positioning and layout even better.
If the users are not converting, see at what part of the content they are leaving and try making some changes to the order to bring the decision closer to that point. Maybe switching the places of a button and a banner is all it takes!
The most important thing is to keep switching things up according to the situation. The more variation you bring, the more options you will have to gather feedback and further improve.
It’s best to consider CTAs as a part of your story, a continuation of the content that not only brings conversions but also helps the visitors and ties the story together for them.
Dennis Vu is the CEO and Co-founder of Ringblaze, a virtual business phone system company that helps teams to better serve their customers, anywhere.