Mobile Marketing

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

Cansu Saraç
June 6, 2022

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


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.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor pretium massa sagittis cursus. Etiam egestas turpis vitae sem mattis semper placerat in nibh. Nullam tempus ligula sit amet turpis laoreet, et interdum purus hendrerit. Donec tortor massa, ultricies vitae laoreet a, facilisis quis orci.

Pellentesque rutrum erat eget neque accumsan porttitor. Aenean id consequat orci. Aliquam euismod finibus lacus, eu ultrices mauris interdum eu. Nulla tempor ac risus vel congue. Integer imperdiet purus ut turpis ultricies consequat.
  • Sed sagittis, ipsum pellentesque luctus porttitor
  • metus nisl vehicula ex, ut bibendum dui lectus ac odio
  • In faucibus laoreet malesuada. Fusce finibus eros vel nisl sodales congue.
  • Duis in massa mi. Donec venenatis, lectus interdum scelerisque pellentesque, orci lorem maximus ante, fermentum scelerisque dolor est eget nisl.
  • Cras aliquam pulvinar hendrerit. Morbi blandit auctor risus vitae consectetur. Sed auctor mauris eu velit imperdiet tincidunt.
  1. Sed sagittis, ipsum pellentesque luctus porttitor
  2. Ut quis dapibus elit. Nunc non sagittis quam.
  3. Nullam est est, posuere eget orci et, laoreet pharetra tortor.
  4. Nulla felis nisl, viverra sit amet mi id, volutpat ornare est. Ut ullamcorper sed dui sit amet pellentesque. Donec vel lectus id ipsum varius pellentesque et nec elit.
Read more like this
July 1, 2022

Four Features that Maximize Engagement for Web Stories

If you’re familiar with Storyly, it’s likely that you’re also familiar with all the ways that Stories can help brands achieve their engagement and revenue goals. But did you know that we also offer Story capabilities for websites? The same benefits of adding a Story layer to apps are now accessible for websites as well, and we’re constantly adding new features to make them even more fun and effective. Let’s take a look at some of the recent upgrades for Web Stories!
June 15, 2022

Stories: The Leading Mobile Format

Stories are the most popular mobile content form today. What makes them so delightful and how can mobile brand make the most of them? Learn now!
Mobile Marketing
In-App Stories

Subscribe our blog

Get the latest post in your email.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.