CTA buttons or Call to Action buttons are the attractive buttons on your website or app that you want your users to click in order to achieve a goal, for example, buy a product or download a movie.
As the name suggests, CTA buttons call out to your users to act. They are meant for conversion.
For example, a CTA button may be asking the user to download some stuff, sign up for an account, subscribe to a boring newsletter, donate a kidney or even buy one from the internet. Studies have shown that a small change in the CTA button can work wonders for your conversion rates. Creating a CTA button that converts is a quite hard and smart task for any UI/UX designer. Following are some basic rules to follow to make sure your CTA button gets the action it deserves.
#1 Contrast the color
What good is a button if it does not catch the eye? Use contrasting colors in your CTA button. Make them stand out! For example, if your background is white, use a black colored button. Do not use colors that mix with the background and have a chance of being ignored by the eye. Statistics say that green and orange colored CTA buttons perform the best! Look below how the left button fails to look like a button.
#2 Curve the corners
The shape of the button matters a lot too. Instead of using rectangles with sharp corners, use soft and rounded corners. Round corners are easier on the eye whereas sharp edges throw you off the path. It is a tried and tested trick that round corners work way better than sharp corners. Information written inside a rounded rectangle is not only easier to process but also appears trustworthy as compared to that written in a sharp-edged rectangle. The reason for this is based on human psychology and visual design.
#3 Use jazzy text
Instead of using boring text like ‘Submit’ and ‘Contact’, use words like ‘I am done’ and ‘Let’s talk’. Write text that is interesting and different and has better chances to be clicked. Keep it fresh. Writing ‘Fair enough. Let’s go’ has better chances of someone reading your terms before continue as compared to the usual ‘Agree and Continue’. See how the button on the right relates to the user more.
#4 No bullshit
Keep the copy of your CTA buttons as clear and simple as possible. But that does not mean you should take a knife and stab creativity in the chest. Keep it creative but firstly, simple. Don’t say too many things in a small tiny button. One of the most important principles of good UI UX is keeping your copy as crisp as possible.
#5 Place it right
Our eyes are conditioned to read from top to bottom or from left to right. So, keep your CTA button at the bottom or at the right according to your design. The CTA button is an action button and the content on the page should lead to the CTA button, ideally.
#6 Test, test, test
The last and the best tool is to keep A/B testing your buttons. When you A/B test, you get to know what works better directly from your audience. There is nothing better than testing that will make you perfect in the art of designing effective CTA buttons.
A tip at last!
When you have two or more CTA buttons, highlight the one that is your first priority for the user to click. It works!
