Did you know that just changing the color of the Call to Action (CTA) button can increase the conversion rate of a website by 35%? Is it worth placing a button above the fold line or at the bottom of the page? How do you change the text on the button to increase its efficiency by 68%?
We collected more than 10 interesting case studies and prepared a complete guide on how to create an effective Call to Action button to increase the conversion rate of your website. We will analyze what CTA buttons are and show how to place them correctly on your website, insert the necessary text and choose the most effective design.
Let’s start with the theory.
What is a call to action button and what four things are important to know about it?
The Call to Action (CTA) button is a graphic element of the website that prompts the user to perform some kind of targeted action. Examples include register, subscribe to a newsletter, buy, download, upload a file, etc.
There are several types of CTA buttons:
- An interactive button with a text that tells you what will occur after it is clicked: “Download a book”; “Get a discount”.
- A button that sends a visitor to another page, for example, with detailed information about the product: “Learn more”.
- The button as a part of the lead form. It helps to bring the data transfer process to its logical conclusion: “Send”, “Subscribe”. The user clicks them after filling in all the fields in the form.
When choosing a CTA button for your website, you need to take into account at least four main points:
- Where to place buttons;
- What design to choose;
- What to write on the button as well as above it and below it;
- How often to use CTA button on the page.
We will answer all of these questions further in the article to help you to create the most effective CTA button for your website.
That’s what the problem is:
When the user is not familiar with your proposal, where should you place the main CTA button – above the fold line or at the bottom, as the logical end of the webpage?
When should the CTA be placed above the fold line?
This solution seems risky because you are asking the client to click a button just after they arrive. Nevertheless, this approach is justified, if:
- You have a “hot” lead, who already knows your product and learned about it elsewhere. For example, you are bringing users to the landing page from your subscriber base to offer a product discount.
- You have a “warm” lead, if the first screen is designed as a mini-version of the landing page.
Six rules for placing CTA above the fold line
- A short headline to attract the client’s attention;
- An auxiliary headline that explains the point of your proposal;
- A photo or video that clearly conveys your proposal;
- A review of benefits;
- Social evidence and triggers;
- “Call To Action” button that describes what the client will receive.
This is the formula from Unbounce for the effective operation of CTA on the first page spread.
How can the placement of the CTA at the bottom of the webpage increase the conversion rate?
Buttons at the end of the webpage work better when you need to inspire confidence and give the user more information for making a decision. Such pages should be built according to the AIDA model:
- Attract Attention (the headline is usually answer for this),
- Hold attention through Interest (list the benefits to the client),
- Arouse Desire (make a tempting offer), and
- Call for Action – that’s where you need a good button.
A case study from ContentVerve proved that the CTA’s location at the end of a page, but not at the beginning, can increase the conversion rate by 304%. The research task of the study was to find out which option would be more effective: the CTA being above the fold line or below it.
From the above, there’s a logical conclusion:
- If your product or service is already familiar to the client, place the CTA button above the fold line asking for a simple, targeted action that does not take much time to decide on.
- If you have a complex product or service, and a potential customer needs to digest a lot of information in order to make a decision, place the CTA button after all the information about the product, as well as advantages and trust triggers, has been presented.
KISSmetrics has created a diagram to show how CTA button placement depends on the complexity of the product or service:
To choose the right CTA design, remember these five principles:
1. Make the button contrast
The point here is not just color; the button must be noticeable against the background of the other elements of the webpage.
Here is a curious case from the company RIPT Apparel. They conducted A/B testing of CTA buttons and compared the efficiency of an inconspicuous black button and a contrasting green button.
The button text color can also affect the conversion rate. So, as in the next case, replacing the black text with yellow made the button less efficient.
2. The button should look like a button
A flat and inconspicuous button can be mistaken as a design element. Do not neglect effects such as color changes or the appearance of a shadow when you hover over the button – this tells the user that the item is clickable.
A practical example: on one website, the button color was changed from blue to green, and the corners were rounded. The button became brighter and contrasted better against a gray background. It looks more like a button.
3. Button size matters
A button that is too small will not be noticed, while one that is too big will not be recognized as a button. In the example below, the button size was increased, leading to a 10% conversion rate loss.
Here’s another case where changing the button design increases the CTR on a commercial website.
4. Use special elements to attract attention
Contrasting, attention-grabbing arrows, as in the previous example, can work for you. And in the following case, when the arrow was removed from the button, the conversion fell by 12.29%.
5. Use negative space
You can make the button more noticeable with the help of so-called negative (empty) space.
A good example is on the Dropbox home page.
Changing the text on the button can seriously affect the conversion rate.
In the following example, we compared two CTA buttons with different text. A user of the renting premises website who wanted to get more information about the facility had to click on the CTA button to get details on the mail. Two versions of the CTA buttons text were tested: “Order information” and “Get information.” The second version worked 38.26% better.
Another curious case concerns replacing the button on the website with articles. Unregistered users can read only part of the essay on the website. To read the full essay, you need to click the button and register. In the course of the experiment, two buttons were tested: “Read Full Essay Now” and “Get Instant Access Now.”
The first button conveyed not only the value, but also the relevance of the proposal. This is what the user wanted to do at the time of reading the essay – finish reading it.
The text on the button should convey not only the value of the sentence, but also its relevance.
Here is one more example of how more relevant button text can increase the conversion rate. Two variants of the button text for a gym website were tested: “Get your membership” and “Find your gym & get membership”.
It turned out that the location of the gym for its clients was of prime importance, so this more relevant message raised the conversion rate.
The text that you write before and after the button can also help you tell the user what benefits they will get after clicking the button. This will allow you to avoid putting a lot of text on the button itself, keeping its design neat.
To attract attention to the CTA button, you can also resort to additional visual effects; for example, have arrows from the area above or below the button point to the button itself.
You can place help information on the button itself. Sometimes one such clarifying word can make the entire message more understandable and increase the conversion rate.
As you can see, for a higher conversion rate, you need to select button text that:
- will explain to the user what happens after clicking the button,
- will convey the value of your offer, and
- will be relevant to the user’s situation.
In this case, you can place these messages above and below the button, and also use arrows and other effects to steer the user’s view toward the desired text.
If you give most people many options, they won’t be able make any choice at all. For example, the abundance of CTAs on this page confuse the user.
Specify to the user on the webpage one particular path and, at the end offer, one target action. If there is a need to suggest several variants of the development of events, focus on one main CTA button. The rest will be made less noticeable.
For example, Reddit makes the registration button brighter than the login button.
In the following example, the emphasis is on the “Create a Wiki” button, but the other two buttons also grab the user’s attention.
The experience of DrExplain showed that you should not have a few buttons on one spread of the screen. Removing one of the CTAs increased the conversion rate by 26%.
In order not to overdo it with the CTA, follow this simple formula: one screen height, one CTA. If there is a need to place several CTA buttons, make the main one contrast more, and the rest less noticeable; for example, by using links, not buttons.
Now you know how to create a call to action button that will help you to generate more leads.
How effective are your CTA buttons?
Check your CTA buttons’ effectiveness on your website by using this checklist:
- Is there a CTA button on the first screen? If so, are you following the six rules for organizing such a screen?
- Is the CTA button visible on the page turn? Are there any other elements on the webpage that are concurrent with it and can take away from the user’s attention?
- Does the design of your button show that it is clickable? (e.g., by changing the color when hovering, adding a shadow, etc.)
- Does the CTA convey the value of your proposal?
- Is it clear to the user what happens after clicking the CTA button?
- Is the text of the CTA relevant?
- Does the text before the button agree with the text on it?
- Do other elements distract the user on the way to the CTA?
- Do you have several CTAs on the webpage with different messages? Is the main button highlighted among them?
- Do you use additional elements to attract attention to the button?
If the answer to all 10 questions is “Yes”, then congratulations! If not, you already know what to do.
We wish you a high conversion!