Browse cities

Simple, yet visible enough, actively persuasive, yet not invasive, powerful, yet intuitive. How do you make your mobile call to action buttons intuitively... usable? What are those techniques which, once applied, enhance their intuitiveness?

And thus boost their effectiveness, as well...

How do you know whether your current mobile CTAs aren't optimally designed for mobile devices and adapted to mobile users' specific UX needs? 

  1. users spend too much time on the action screen; it's not obvious enough for them which are the highest priority actions to take, there are too many options crammed in there, too much text, etc.
  2. your click-through rate could be... better, to say the least

Now, here are 10 straightforward, yet highly effective tips to make your mobile call to action buttons more effective:

1. Bold Your Text Labels Differently to Indicate Priority Level

A simple, yet powerful technique, that's often underrated: varying the boldness of mobile CTAs based on priority. This way, you'd put different emphasis on the various actions referred to. 

For instance, is the action of “checking out” more important than that of “viewing the cart”? Indicate this hierarchy of priorities using varied intensity when you bold your text labels: go from the least bold to... the boldest.

2. Go for Button Shapes Instead of... Text-Only “Buttons”

Stick to the safe beaten road of UX when designing your mobile call to action buttons: don't trade straightforwardly shaped buttons for text-only ones.

You'd only end up confusing your users: “Is that a button or a piece of information?” And you'd risk having them miss/skip your most important CTA because... they won't notice it or just take it for... copy.

In other words: place your text labels into “familiar” button shapes.

3. Consider Those Screen Areas of "High Thumb Activity"

Always take heed of “the thumb zone”! It's made of all those key spots on a phone's screen that are the easiest for users' thumbs to reach and to... click on. 

Once identified, strategically place your mobile CTAs there...

4. Consider Users' Natural Scanning Pattern when Placing Your CTAs

Do you want your mobile call to action buttons to be (just) visible or effective?

In this respect, placing the highest priority CTA first, will make it visible, but not necessarily effective, as well. Why? Because users are then forced to scan the screen bottom-up. And this is not their natural flow: first the “Checkout” button, then the “View Cart”, then the “Continue Shopping” buttons...

Any deviation from this familiar flow will affect the “intuitiveness” of your CTAs.

5. Stick to the Best Practices for Mobile Call to Action Placement

Left or right? Top or bottom? Where is it most effective to place your mobile CTAs on the screen?

You'll get the best answer to your question only once you've studied your target audience:

  • what triggers them to... action?
  • what catches their attention first on a screen?

Run some tests to identify those best practices on call to action placement that are most effective for your own scenario.

6. Keep It Straightforward: One CTA Per Page

Challenging users with too many options is another “self-sabotaging” technique. So, make sure you don't fall into the trap of overcrowding your screens with multiple CTAs.

Instead, make the most of that limited real estate on a mobile device's screen and place just one CTA per given space. 

Otherwise, you only risk discouraging users with a too complicated decision-making process...

7. Use Color Wisely to Signal Progressive Actions & Priority Levels

Let's take 3 of the most common actions that mobile users are presented with: “Continue shopping”, “View cart” and “Checkout”

Now, how would you indicate a given user the lowest, the medium and highest priority action to take? How would you signal progressive actions (as opposed to regressive actions, like “view cart”)?

You use the same color, but with different levels of saturation and brightness.

Note: using equally saturated color on all your mobile call to action buttons wouldn't make the hierarchy of priorities very intuitive, while using different colors would only place the same emphasis on all those progressive actions.

Tip: to indicate the highest priority, you could also opt for light text label set against a dark background; as opposed to the dark text on a lighter background, that you'd use for lower priority CTAs.

8. Use White Space to Make Your Mobile CTAs Stand Out

And this best practice goes hand in hand with the “one CTA per given space” technique: let the white space work for you/your call to action button. 

Make sure to wrap it in enough white space to help it... stand out and catch users' attention. 

You'd then:

  • make the most of the limited real estate that you're constrained to work with
  • avoid unwanted scenarios where, due to screens crammed with text and CTAs, users accidentally click the “wrong” links

9. Keep Your Copy Concise, Yet Persuasive

Your mobile call to action buttons should feature text that's:

  • short, yet descriptive enough
  • concise, yet actively persuasive
  • action-oriented

10. Use an Icon to Indicate the Highest Priority Action

What about color blind users? How can you make your mobile call to action buttons visible and intuitively easy to use for them, as well?

For using color wisely and varying the boldness of your text labels to indicate different priority levels sure isn't helpful for them.

Well, you go with an... icon. Just place it inside your checkout button and you'll make it stand out even more. It will be that visual element that they'll spot and cling to once they lend on a screen. 

The END!

These are our 10 easy to implement techniques that will help you boost the “intuitiveness” of your mobile call to action buttons.

Would you have added other ones, as well?

Image by LeoNeoBoy from Pixabay.


We do Web Design

Go to our Web Design page!

Visit page!

Recommended Stories

You Have Your List of Web Accessibility Issues: What Do You Fix First? 8 Simple Ways to Prioritize Accessibility Problems
You've run your audit, you've got your list of web accessibility issues: now what? Where do you start? Before… (Read more)
Adriana Cacoveanu / Mar 27 '2020
Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your… (Read more)
Silviu Serdaru / Mar 25 '2020
Drupal Voice Search: How to Set Up Search Based on Voice Recognition on Your Drupal Site
Drupal voice search has gone from trend to standard these days.  So, you can't help ask yourself:  "How do I… (Read more)
Adriana Cacoveanu / Mar 23 '2020