Call-to-Action (CTA) Buttons: How to Make Them Clickable

Share on linkedin
Share on twitter
Share on facebook
Call-to-Action_(CTA)_Buttons-_How_to_Make_Them_Clickable

Turning a passive user into an active one. This is the power of Call-to-Action (CTA) buttons. A CTA button is the place where you want your users to click to complete the desired action. By focusing on some key elements to refine your CTA buttons, you will not only help your users easily navigate your mobile app but also have a chance to increase your conversion rates.

How to Better CTA Buttons

You are right to be overwhelmed by CTA buttons. From choosing the right shape to its placement on a mobile screen, there are various elements you should consider. Let’s dive into creating the best CTA buttons appealing to users.

Understand User

Following the footsteps of the users directs you where the user will most likely click on the CTA button. Arrange your content and button in a natural reading flow that eventually leads to the CTA button. For example, if we are talking about a registration screen, then most probably what you will see is first a headline, then blanks where users fill with personal information and a sign-up button. Easy to visualize, isn’t it? Why? Because our brains are used to this design that doesn’t distort the flow of information we provide. You should never force users to backtrack to click a button and search for that button. By understanding how your users are used to various structures and their paths in your app, you can have a higher chance of that click. 

Call-to-Action (CTA) Buttons- How to Make Them Clickable
Image: An e-commerce brand, using the common “swipe up” feature that people are used to.

Create Visual Hierarchy

Implementing a clear visual hierarchy will lead users to the ideal action. Visual hierarchy is a concept based on Gestalt Psychological Theory. The German word “Gestalt” means “form”, “pattern” or “shape” in English. What this theory implies is that our brains have tendencies that “structure individual elements, shapes or forms into a coherent, organized whole.”  So, if an element disconnects from the whole, it stands out. 
Image: Gawker The first issue of the New York Times, lack of visual hierarchy complicates understanding which news is more important than others

Although the screen size of smartphones is becoming bigger and bigger, they are still small. So, a suitable starting point of creating a visual hierarchy would be keeping the number of buttons limited. This practice not only lowers the competition on the page but also decreases the likelihood of decision paralysis.

The next thing you should consider is ordering the elements on the screen. One of the most important tools to implement a clear visual hierarchy and hence a powerful CTA button is size. A bigger button or a bigger copy attracts the users’ attention more.

Call-to-Action (CTA) Buttons- How to Make Them Clickable
Image: Creating visual hierarchy with the order
Color has a great impact on users’ perspective, so it is another tool that you should focus on for visual hierarchy and a strong CTA button. The colors you use depends on your brand’s color, background and type of action you are waiting for from your users. There is no right and wrong with but studies show that bright colors with contrasting backgrounds have a higher click-through rate (CTR).  With a superb contrast, your CTA button stands out among other elements.
Call-to-Action (CTA) Buttons- How to Make Them Clickable
Image: iMore, Spotify's contrasting colors

By creating a visual hierarchy, you help users to prioritize and understand the tasks on the mobile screen.

Keep Thumb Zone in Mind

In 2011, mobile interface expert Steven Hoober established the phrase “thumb zone” to express the most comfortable area for touch with one-handed use. Placing your CTA button in the thumb zone increases accessibility, which is a key factor to smooth user experience and makes it more clickable.

Call-to-Action (CTA) Buttons- How to Make Them Clickable thumb zone
Image: Smash Magazine

Ease the Tapping

The size and white space (padding) have the power to affect the likelihood of clicks on your CTA button. If a user can’t spot and select the button, they can’t take the desired action.

The size of our fingerpads and fingertips are, on average, between 10-14mm and 10mm x 10mm. Making these sizes a minimum touch target size is essential to ease user click on the CTA button.

Use white space around the elements (padding) gives some isolation to the components and also avoids confusion on the user’s side. Padding between buttons eases tapping.

On Apple’s design tips page, it is recommended to create controls that measure at least 44 points x 44 points so that these controls can accurately be tapped.
Call-to-Action (CTA) Buttons: How to Make Them Clickable
Image: UX Planet

Choosing the Right Copy 

There is no need to remark on the importance of the copy on your CTA buttons. It is one of the most, if not the most, significant elements of your CTA button since it is directly conveying your message. Give an obvious reason why they should click on the button.

Since you have a limited place on your button, you should be succinct with your message. Try to use 2-5 words. Just keep in mind that no matter how short it is, if your copy isn’t relevant to your users and if it isn’t interesting, don’t wait for good results.

Your text size should be big enough to catch the user’s attention but shouldn’t seem intimidating.

Depending on your intent, you can try to create a sense of urgency or offer incentives to take action. 

Go with the first-person speech. Michael Aagard of Content Verve discovered that changing button text from 2nd person (“create your account” )to 1st person (“create my account”) resulted in a 90% increase in clicks. Watching your language is also important with your verbs, substituting words like “submit” and “enter” with “get”, “try”, “reserve” would create a better result.
Call-to-Action (CTA) Buttons: How to Make Them Clickable
Image: CrazyEgg

Test

Although these tips help you improve your CTA buttons, the only way to bring your CTA buttons to a perfect level is through performing A/B tests and discovering what works best for you and your users. Every user persona may require a different styling or copy to click your CTA button. So keep testing.

CTA buttons may seem ordinary, but they are very important for conversion. If you want to make your CTA buttons even more effective and increase click-through rate (CTR) you can follow the above tips. As long as you keep the user front and center, you are on the right track. Discover now how you can fuel your CTA buttons with the power of stories.

Leave a Reply

Storyly - Bring superb stories to your app | Product Hunt Embed

Recent Posts

Get the latest content first.

Storyly uses the information you provide to us to contact you about our relevant content, products, and services. For more information, check out our Privacy Policy.