There are many businesses and website owners out there who successfully manage to drive traffic to their website, but when it comes to capturing leads and converting visiting prospects, many feel they’re not reaching their initial goals.
In many cases, the lack of results stems from a failure to call their visitors to action. Or, in other words, they might be paying too little or no attention to the elements on their website which should inspire users to engage – either by learning more about the business or by making a purchase. These elements are usually called CTAs or calls-to-action and most of the time when we talk about CTAs, we actually talk about buttons.
There’s a whole little science behind designing effective CTAs. In this article we’re going to explore key elements which, when properly tweaked, can make all the difference.
Before we get very practical, I’d like to point out that the core characteristic which distinguishes efficient from inefficient CTAs is that the first manage to connect with website visitors on a deep, even subconscious level. Behind each of the technicalities involved in design, there’s actually a lot of psychology. Having that in mind, let’s start exploring the most important CTA elements:
Scientific studies have established that a connection exists between colors and our moods. In other words, how you use color on your CTA can either encourage or discourage action on a subconscious level. For this reason, you should not feel bound by the colors of your brand, but instead choose a color for your CTA that will best captivate your users.
Take a look at this chart to learn the effects colors can create:
Image source: www.opentopic.com
Two colors that are probably most frequently used on CTAs are orange and green, even though blue is also very frequent on business websites and websites of different service providers. There’s a lot of debate as to which of these two achieves better conversion results – green or orange? The most probable answer is: it really depends.
In the first place, it depends on the overall design of the website or landing page. If the primary colors of your website are orange and white, green CTA will probably perform better. Why? Simply because it will stand out from the rest of the page. The same principle applies to orange, or to any other color. It’s really important to pick a contrasting color that will make the CTA stand out from the rest of the page and naturally draw the eyes of your visitors.
Let’s take a look at this example from the Contently homepage:
Contently used neither orange nor green color on their CTAs. They used two shades of blue which are in contrast to their bleached background image and thus make both CTAs stand out from the rest of the page.
Notice how the color of the “Learn more” CTA also appears on other page elements, while the color on the “Talk to us” button does not appear anywhere else. Even though both CTAs are clearly prominent, visitors want to click on the “Talk to us” button first because it appears as unique.
Shape and Size
In the online world, rectangular CTAs are probably the most common. But if you look carefully, you will notice that you will rarely stumble upon rectangular buttons with completely sharp edges. What you will find is that the majority of CTAs have round edges.
This is because most people instinctively avoid sharp edges as a form of threat. You will also notice that sharp edges point outwards and draw attention from the text on the CTA, while round corners do exactly the opposite – they draw attention to the center of the CTA where the message is contained.
Compare the effect these three button shapes create:
Image source: en.blog.wmaker.net (French screenshot)
There’s another very practical reason for using rectangular CTAs: everyone is used to seeing rectangular-shaped buttons. If you decide to use an unusual shape, you run the risk of confusing visitors as they might not recognize the button as clickable. Yes, you might increase the clickability by adding a drop shadow effect, but the risk of buttons going unnoticed is still pretty high.
Take a look at some examples of unusually-shaped buttons. Would you recognize all of them as buttons, especially if their color didn’t stand out from the rest of the page?
Image source: getelastic.com
As for the size of CTAs, there’s no strict rule, but common sense dictates that they should be in proportion with other page elements – not too small to go unnoticed, not too big to look awkward.
CTAs should also be designed with mobile users in mind. Nearly half of all website traffic comes from mobile platforms, so CTA buttons on mobile websites should be optimized for easy tapping. According to Apple, buttons should be 44 x 44 pixels or larger, to match the average fingertip size, while Android recommends 48 x 48 pixels. Tap this:
The location of CTA on the page is in direct correlation with its performance. Although opinions about placement on a page vary, there’s a common agreement that the primary or the most important CTA should be placed “above the fold” – which means in the upper part of the page that users can see without scrolling down.
Here is an example from the Dropbox website. When users arrive to the website, they can see the “Sign up for free” CTA without first needing to scroll down:
Notice also how the main blue-colored CTA is placed in a prominent spot, so other web page elements don’t detract from it. There’s actually lot of empty space around it, as well as around “Try Dropbox Business” button. In web design, this is called “negative space”. Because nothing is cluttering the CTA, users’ eyes are naturally drawn to it.
If we digress to landing pages for a moment, in order to prevent users’ eyes from wandering off from the CTA, some experts recommend removing usual site navigation and leaving just the CTA and perhaps one or two links where users can get more information about the offer.
To get back to CTA placement, in some instances it is clever to use multiple CTAs. For example, you can create one CTA that sits above the fold, and another one below the fold. This is exactly what Dropbox does. Above the fold CTA is intended for visitors who are already acquainted with the brand and their service, and they wish to take action immediately – register another account, for example.
But what if this was the visitor’s first encounter with the brand? They would naturally want to learn more before signing up for the service. If you scroll down the Dropbox homepage, you will see they provide the most important information about their product in a very digestible and eye-friendly way:
Now that visitor has a clearer idea of what Dropbox is all about, they can sign up through the secondary CTA:
When you craft the text that will appear on your CTA, you need to have four objectives in mind.
First of all, you need to clearly describe what users will get by clicking your button. It’s all about getting the WIIFM (What’s in it for me?) right. You need to offer a real solution to a real problem.
Check out the CTA SteamFeed is using to get visitors to subscribe to their email list:
The value proposition is very clear and the CTA text conveys a very powerful message expressed in just a few brief words.
The second important thing is to pay attention to the psychological triggers that can positively or negatively act on your visitors’ need to feel empowered and to be in control of things. If you ask visitors to “submit” or “pay now”, that’s most likely going to turn off many of them. And then all the effort you had invested into getting them to visit your website in the first place will be wasted.
So, rather than using authoritative, pushy or robotic language that your website visitors might experience as threatening, give them valuable information that will motivate them to take action of their free will.
Image source: unbounce.com
Thirdly, your CTA should aim to inspire a direct action. You can achieve that through the use of simple, strong and actionable wording. Here are some tips that might come in handy:
- Use active, rather than passive words.
- Switch the conversation from second person to first person. For example, instead of saying “Start your free course”, you can say “Start my free course”.
- Condense the message into five or less words.
- Include numbers as they tend to add value. For instance, instead of saying “Get my free report”, you could say “Get my 50-page free report”.
Finally, use expressions that will create a sense of urgency, such as “now,” “today,” and “immediately”. Users will be less likely to hesitate if they know they could lose a valuable opportunity. But make sure how you craft the rest of the message, it should sound assertive, not desperate.
Here are some other ideas how to create a sense of urgency:
You can give visitors an extra nudge by warning them that the price of your service is going to rise after a certain date. Or if you’re giving away a product in exchange for subscription, you can clearly state the product supply is limited. First come, first served.
The point is, when you state a definite expiration date or you let visitors know that the number of free gifts is limited, the ones who really want your product or service will likely respond to your CTA. Just imagine what a counter with the number of free gifts left could do!
Besides page elements that create a sense of urgency, another useful addition to CTAs is social proof. In a nutshell, social proof shows people they can trust you. How exactly? Well, by showing off how many others trust you and why they trust you. And in case you’ve got some big names in there, that can really make a difference.
Social proof can take many forms. Let’s take a look at a few examples from the Brand24 website.
They have endorsements from big names like IKEA, H&M and Intel:
Then, there are testimonials from industry experts:
The number of users (nobody wants the honor of being the first customer, right?):
The prizes they have won:
Alignment with the Purchase Cycle
Last but not least, even if you’ve nailed all the CTA elements we discussed here, don’t expect to just sit back and watch visitors convert. It doesn’t work that way. Why? Because visitors to your website will be in different stages of their purchase journey. What does that mean?
For example, for some of them this will be the first encounter with your business and they will want to learn more about it before taking any decisions. You really wouldn’t want to get too pushy with them or completely miss to provide them with information they need and let them drift away.
Instead, you can guide them to take the next step on their purchase journey. You’re wondering how? Through multiple CTAs that you can include below the fold, like in the Dropbox example. The only difference here is that Dropbox offered the same CTA twice, while you would actually include CTAs that would lead visitors to very different places, depending on their stage in the purchase journey.
Let’s see how Marketo does this:
To establish trust with visitors in the awareness stage, who have arrived to their website for the first time, they included CTAs that will take visitors to the complete databases of Marketo’s small business and enterprise customers:
Once the trust is established, they gently push the users a step forward in the purchase funnel – to the interest or education stage. They do it by offering access to hundreds of pieces of their free content, as well as to their marketing blog:
Finally, when users are in the consideration phase and know enough to make an educated decision, they can click on the very straightforward CTA “Go to Marketo LaunchPoint” which will take them to a more sales-oriented page where they can find applications, contact and hire Marketo experts and more.
Over to you
Simple changes to your website, including the addition or modification of CTAs can make a big difference in your conversion. But remember, as we’ve mentioned at the beginning of the article, it’s not about the design tweaks themselves, it’s about making things work for customers.
Changing button color on a page that lacks basic information about your company, that doesn’t instill trust, that is difficult to navigate or makes it very difficult for customers to understand what exactly is the difference between all those things you’re offering– is hardly going to achieve anything. Make sure you start from the beginning and work your way to details. And when you get there, be open-minded and try out different things to see what will work best.