How to design your Call-To-Action for maximum engagement
Understanding human psychology 🧠
Call-To-Action (CTA) is like a nuclear reactor for your business. Either it can work as a power plant for you converting all your leads or it can go full-on Chernobyl on you. It is one of the things that prevents your business from reaching its full potential. No matter how much advertisement or marketing you do, but if your CTA is weak, everything else falls apart.
And here is a glimpse of the power this nuclear reactor holds,
- Emails with a single call-to-action increased clicks 371% and sales 1617%.
- Adding CTAs to your Facebook page can increase click-through rate by 285%.
But if you are looking for one standard thing that will always work then sorry this blog can not help you. In fact, there are no other blog or resource out there which can help you in that matter. Believe me, I have read tons of them before designing for Appointy. It is impossible to say which color converts the best or which font type/size works the best. There is just no standard thing when it comes to CTAs. Every business is unique, telling a different story to a different audience. So you need a CTA telling your story to your audience, simple right? eeh, along with the design and wording, there is an itsy-bitsy of human psychology involved here. We have to understand what triggers an action and how can we make this act of clicking on the CTA seamless. So here I am to help you out, let’s dive in.
Color 🎨
Some people believe that one specific type of color, for example, green works best in every case. That's not true! Try placing a green button on a green background or on a yellow background. It wouldn’t grab attention. The only thing that matters is how well your button stands out against other elements on the page. There should be more hue difference between the color of your website and the color of your primary CTA. Use complementary colors or high contrast colors. Stay away from analogous colors. You can use color psychology as well, but it is more important for the button to stand out.
The best way to test your color scheme is to switch to grayscale mode using a color blindness simulator. It will also help people who are visually impaired.
Some examples of good color use:
Size and Shape 🔲
According to Fitt's law, the time to acquire a target is a function of the distance to and size of the target. So as you increase the size of your CTA button, it gets easier for the user to target it. But there has to be a balance, a button too large will overpower everything else and make the page look overwhelming and a button too small will be a wallflower. It is the relative size of the button that matters. Also, make sure you are using a CTA button not hyperlinks, they are not very catchy and easily escapes the eye.
Regarding the shape, there is psychological research which says that
- Rounded corners point inward and draw the attention to the inside of the button. A square edge on the opposite, points outward and draws the attention away from its object.
- Rounded corners settle your subconscious. Studies have shown that we are ‘programmed’ to avoid sharp edges in nature (primordial reaction) because they present a possible threat. We try to avoid sharp objects due to their destructive nature (knife, blade, etc)
- Rounded corners take less effort to see. I would like to quote Professor Jürg Nänni, author of the exemplary Visual Perception: “A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down”.
But that's not an always goto rule, A/B test what works better for your audience. And keep your primary CTA button solid, not outlined. Your CTA button should look like a button, use shadow, 3D effects or subtle gradient, just make it look like you can click on it.
Some good examples:
Placement 🎯
Above the fold? Wrong! Well not entire but, when did you went to a shop and bought a new product without trying it out? Or without reading its features. A visitor also looks for the right fit, show him why he should use your product and hit him with the CTA once he is convinced.
I am not saying to remove it from above the fold. But place it at a point where everything is starting to make sense. Whether it is above or below the fold. A scroll heat map will help you the most here. Study it for patterns, how much your visitor scrolls before leaving the landing page and place your CTA there. Along with this, place your CTA in your navigation and at the end of the page.
People generally tend to read in an F shaped pattern, so place your CTA on the left of your landing page instead of right. That makes it easy to find. You might also consider the rule of thirds for the placement.
Add white space around your CTA, to make it stand out from the surrounding content and create a break. Only things which can help the case like “free-forever account” or “no credit cards required” are allowed near. It also helps mobile readers to tap easily on the button.
Some good examples:
A/B Testing 🧪
It’s not a day job! You can’t just start it off in the morning and have results till midnight. You have to be patient and test every single thing about your CTA. Creating a CTA is a marathon and not a sprint, you will get it right eventually through all the experiments. Even subtle tweaks like changing the button size can lead to exciting results.
So, keep track of your CTA from day one. It will take some time but it's all worth it.
Conclusion
Perfecting your CTA takes time, It’s like finding a wand that suits you in the world of Harry Potter. Except that there is no wand shop here. You are the wandmaker, you have to identify your phoenix feather (design) and create your magic wand (CTA).
Also, your text is equally important if not more. Because what converts isn’t a cool-looking button, but the sentiment behind it. The button will only tell where to click. Don’t just put something there because it looked good or because it worked for someone else. Don’t make assumptions. Test your theories. Here is a final checklist:
- Visually striking
- Short punchy copy
- Easy to understand
- Action-oriented
- The result of clicking is obvious
- A compelling reason to click
- A designed button that stands out from the rest of the page in color and design
- A hover effect on mouseover
Design keeping marketing aspects in mind. Cheers!
Did you know?
You can give up to 50 Claps on an article? Just hold the clap button for a few seconds and bam! Try it out.
