12 Best Practice for Super Effective Mobile Call-to-Action Buttons

There are currently over 6.6 billion smartphone users worldwide. Even if your site only taps into the tiniest fraction of those global users, I’m willing to bet there’s a significant portion of mobile visitors that comprise your overall site traffic. Why do I say this? Because in the U.S. alone, smartphone users access the Internet, on average, 3-5 hours per day.

Let’s say that statistic is spot-on for your target demographic. If that is the case, this means your smartphone-owning audience spends nearly three hours surfing the web from their phones every day. If you’ve done the work to optimize your site for mobile and search, then ideally your site will hit their radar at some point during that three-hour timeframe each day.

The question now becomes: Is your site prepared to convert those smartphone users?

Recently, I wrote about what research says about how to optimally place calls-to-action on your WordPress site. While I briefly mentioned a possible difference between desktop and mobile CTA placement, there wasn’t much evidence available to definitively prove a clear difference there. That being said, we do know there are other defining characteristics that mobile CTAs have that desktop ones don’t.

What do you say we take a deeper dive into exploring how to optimally design CTAs specifically for your smartphone visitors?

Continue reading, or jump ahead using these links:

• Go Light on Copy
• Appeal to Emotions
• Check the Search Results
• Consider Next Steps
• Remember the Thumb Zone
• Limit the Options
• Stick to the Page
• Utilize White Space
• Use Color Wisely
• Remember the Placement Guidelines
• Size Up, When in Doubt
• Get Creative with Width

Designing Mobile-Friendly CTAs for WordPress

When it comes to something as specific as designing a call-to-action for smartphone users, I like to reflect on my own personal experiences first.

Have you ever…

Struggled to find the CTA on a page because it was too cluttered with text, images, and other design elements?

Felt overwhelmed by the link-through page whether it be a multi-page form you now need to fill out or a too-small-to-read PDF that you really just wanted to be emailed to you?

Tried to tap on a website’s button only to accidentally hit another link or button close by?

Then you know how frustrating it can be when all you want to do is click that CTA, but so many poor design choices keep you from doing so. Here are my 12 recommendations for ensuring you don’t lose your visitors’ interest before they even have a chance to convert.

Tip #1. Go Light on Copy

Unless your WordPress website is solely in the business of delivering blog and article content, visitors most likely show up with a quick action plan. Do they want to find out your store’s hours of operation? Do they need to do a quick product lookup? Is there something people usually want to buy on the fly from their phone? In general, it’s best to always aim to keep messaging brief. This is especially true for a mobile CTA as well as the descriptive text around it.

Tip #2. Appeal to Emotions

Again, it’s important to put yourself in the shoes of your visitors. Smartphones typically equate to “convenience,” so take advantage of that with your CTA messaging. Don’t force anyone to play the guessing game. Use action words that tell them exactly what to do and what will happen right now if they do. If it makes more sense to do so, you could instead try appealing to their current emotional state.

Tip #3. Check the Search Results

Haven’t spent much time in Google Analytics? If you want to improve the user experience for mobile users, you absolutely should.

One way you can do this—which will also help you create super attractive CTAs—is by studying the keywords from both mobile search as well as your site’s search bar. These keywords can help you determine what smartphone visitors want to see first. You can then design CTAs that take them to that spot of your site straight away without having to scroll or dig through the navigation.

Tip #4. Consider Next Steps

It’s not just about designing an eye-catching CTA, it’s making the reward worth it. Always consider what happens after smartphone users click your CTA. While they may be excited to snag up that free downloadable, what are they going to do with that ebook PDF on their phone? Instead of hoping they’ll be able to take the next steps the same as they would on desktop, give them another option (like email).

Tip #5. Remember the Thumb Zone

UX designer Steven Hoober conducted a study back in 2013 that identified the most common ways mobile users interacted with their phones. In addition to recording the percentage of phone calls made and music listened to, the most interesting observations came in the form of how users typically held onto their devices. This led to the revelation of “the thumb zone”–the spots on the phone easiest for thumbs to reach and, consequently, most used by people.

Although you won’t be able to account for all three of the most common cradling positions, you can pay attention to those hot beds of thumb “touch” activity when placing your CTAs.

Tip #6. Limit the Options

In general, it’s a best practice to limit the number of choices your visitors have to make on your site. Too many options and you’ll risk disrupting the peace with the Paradox of Choice. So, when planning out where to place your CTAs for mobile, I’d suggest you try to keep it to one CTA within any given space. You’re already working with limited real estate, so don’t complicate the decision-making process if you don’t have to.

Tip #7. Stick to the Page

Unless you have a CTA that absolutely needs to be served in a timed or targeted popup, I’d suggest you go with a simpler delivery approach: keep all CTAs directly on the page. You may even want to literally make them “stick” to the bottom of the mobile screen so that, regardless of how far visitors travel, the call to take action is always with them.

Tip #8. Utilize White Space

We already know that decluttering is a must for good web design. As you can imagine, this is especially important for calling attention to the buttons you want clicked within the minimal space your smartphone visitors have to view it from.

Include enough white space around your CTA to draw attention to it; too distracting or cluttered of a space could work against you. You also don’t want users to get frustrated trying to click the button, only to repeatedly (and accidentally) hit the Terms of Use link or some other clickable content nearby.

Tip #9. Use Color Wisely

In general, whatever you used for your CTAs on your website should work just fine for mobile visitors. If you need a refresher on what sort of colors work for CTA, check out this guide on color psychology.

Tip #10. Remember the Placement Guidelines

As a reminder, this is what I was able to dig up for research on the optimal placement of your CTA. I’d suggest you pay attention not only to the desktop vs. mobile findings, but to the others as well since top vs. bottom and left vs. right still factor into the mobile experience as well.

Tip #11. Size Up, When in Doubt

If you’re wondering what size to make your CTAs for mobile, Apple has the answer to that one and it’s such a heavily cited statistic that I’d suggest not deviating too far from it. The minimum CTA sizing Apple recommends for touch screen conversions is 44 x 44 pixels. This doesn’t mean you need to have square CTAs, these are just the minimum parameters they suggest.

Tip #12. Get Creative with Width

I’d say you can consider this final point optional since the overall design of your site will dictate whether or not this makes sense aesthetically. However, if you can design your mobile CTAs to stretch the full width of your screen, think about how hard it would be for visitors to miss it or try to gloss over it. There’s nothing around it to distract from it. Just your content and then bam! Call-to-action.

Wrapping Up

I know I’ve been talking a lot about calls-to-action a lot lately, but it makes sense, right? Without them, you’ve got to put your trust in the fact that visitors will read all your content and decide to reach out or take the next steps on their own… and we know that’s not going to happen.

So, if you’re finding your percentage of mobile visitors growing and want to nudge them along through the conversion process, take heed of these recommendations. Then watch as their experience on mobile improves and your conversions grow.