Top 10 call-to-action which actually converts
Strong CTA’s are crucial to the lead generation process, here is a list of the best CTA buttons that have been very well received.
How much of a role in conversions do you think a CTA button plays? After all it’s just a button right? It is completely up to the visitor to click or not click on a CTA depending on their mood.
There is nothing more inaccurate than that last statement!
A CTA button on a web-page — homepage, on-boarding page, landing page etc, is the force that drives more users to explore and engage within the website.
When you go to a store, the store keeper doesn’t just let you look at a few things in the store and leave. He would make sure you have explored all of the options the store has to offer. Similarly you want the visitor of your website to stick around. A CTA button does that for you.
A CTA which stands for Call-to-action is an action oriented button that is meant for visitors to click on, in order to perform a specific action — Download, Signup, Add to cart, Learn more.
Whether a visitor clicks on it is not just up-to to the them. You have the responsibility to design a CTA button that is able to encourage people towards it. I must say it took me a while to really grasp this psychology behind a CTA button since i had never looked at it as anything more than just a button.
Ideally to design a CTA that converts, you need to carefully decide the following
- Size
- Color
- Copy/message
- Location
The best way to learn how to design CTAs would be through really good examples. Here are 10 CTA examples to inspire you.
Firstly this is a great landing page. It doesn’t say too much but just makes sure that it conveys the targeted message. KlientBoost does an excellent job with its CTA. Instead of using common action terms like Learn More or Contact Us, They offer you something that is Free and immediately draws your attention. They say- Get my free proposal. So you know what you will exactly get on clicking it.
The red coloured button is a good contrast to the rest of the page and is placed just below the Title text with minimal negative space since the title text and CTA copy are meant to be subsequent messages to a visitor.
2. Okcupid
Okay, i agree with you that the CTA copy here isn’t great and out of the box. It just says continue. But the simplicity and ease of selection is what makes this a good CTA overall. You are not asked to fill out any big form to start looking for a partner. So you just make the quick selection and click on continue. The main copy has a nice, humorous text that reassures you that you will only be matched with someone you deserve and face value is just secondary. The placement of the CTA button is right next to the selection dropbox. This is a perfect location since you have nothing else to scroll.
3. Warby parker
This website uses a clever interactive method to get visitors hooked without forcing them to buy. The interactive CTA quiz helps the user find the right pair of frames in a personalized manner.
Quizzes usually are more trustworthy and give you a feeling of being guided to what would be perfect for your needs.The white CTA button contrasts the blue background. Simple font is used for the CTA copy to blend in with text in the rest of the page.
4. Grammarly
Grammarly has an extremely effective CTA. The red colored button stands out from the rest of the page. Notice that the CTA is personalized to the browser you are currently using. If you are using Firefox, it would say add to Firefox it’s free. And you can automatically add the extension by clicking on it.
This is a wonderful landing page as well since it contains all the information needed for one to download the extension including an example text with all the corrections made by grammarly.
Only thing left to do is click on the bright red button and get on with it.
5. Intercomm
Intercomm is already known for its fun illustrations. It maintains consistency in CTA in two places both above the fold. The Illustrations show an old traditional way and a new simpler less chaotic way, and immediately asks you to get started with the simple procedure of entering your email ID. The simple blue and white contrast makes the button stand out.
This one is for all the avid readers. Haruki Murakami as you all might know is a highly acclaimed author. His website has a captivating aura. The white text over the graphic close up of the eye of an animal invokes intrigue. A ghost CTA is one that is transparent with thinner border and text. Generally this works when the CTA needs to be placed over a graphic image or any kind of photography with a flat design as it does for this webpage. Even the navigation CTA are all ghost buttons to maintain the consistency of the page.
7. CrazyEgg
This is a great problem-solution type CTA. While the main text poses a very
Significant question — What’s making your visitors leave? The solution is immediately provided within the the CTA itself. Show Me My Heatmap is quite a compelling text since any user would be curious to learn the about the activity of their website visitors through a heatmap.
The procedure is very simple and would hardly take seconds. Just enter your website URL and the heatmap is generated.
Show me my heatmap is the type of text that would work better than say, get heatmap, or show heatmap.
This is another example of personalization in CTA.
8. ResumeBaking
Building resumes is the most painful process and we could all use some help with them at least during our initial days of worklife. This one uses persuasive techniques. I like how they are pointing to that fact that you can do 4 things by clicking on just one big red button. And by pointing I mean literally pointing ->. Create resume is the perfect text or copy for this CTA as it tells you that this is what we are going to be doing right now and reassures that it is quick and easy.
Needless to say that the red button contrasts with the blue background.
The slight out of shape nature of the button must have to do with the crookedness of the arrows and other illustrations.
9. Huemor
Sometimes I fail to understand why there hasn’t been much experimentation with the shape of the CTA button and most people just bank on a rectangle with either sharp or curved edges. This button works brilliantly and is kind of irresistible to click. On clicking this circular button, it gets transparent. It perfectly follows the statement on the main text. The limited options provided here draw all your attention towards the text and CTA. The webpage is culminated with a beautiful flat design and it would be hard not to be an astronaut yourself explore it further.
10. Whistle
Here you have a primary and a secondary CTA and of course it is evident which one is given priority. The ‘Buy Now’ button is given priority by giving it a contrasting colour over the watch video button which sort of blends in rather than stands out. Save $30 included on the button attracts you more towards it and create a sense of urgency.
How can I quickly change my CTA design?
For getting your CTA designs right, rigorous testing is a must. Any design without appropriate testing is a gamble. So in order to test your multiple CTA designs, you need to be able to make designs quickly and test them live on your website. Visual Inspector helps you make these live design changes and visualize how it would look on your website. You can experiment with, colour, size, position, gradient, typography, text/copy, opacity of your CTA buttons within seconds. You can download it from the Chrome Store for free.
Below is the homepage to our website. We experimented with the design of our CTA using the in-browser Visual Inspector widget.
Experiment 1- Gradient, colour and text on the CTA button changed within seconds using Visual Inspector
Experiment 2- Size, position, shape, colour, font changed within seconds using Visual Inspector
CONCLUSION
You may have gotten a fair idea by now about how CTA buttons are a big deal for your web pages. When creating a CTA button there is no clear cut formula. For it to be persuasive enough you have to do a lot of experimentation and testing.
Do you have any CTA button stories or experiences to share? Or do you have any feedback on what you have just patiently read?
Let me know in the comment section.
Share this blog with your designer friends as much as you can.
Siftery brings you lifetime subscription of Visual Inspector for just
