All you need to know about mobile call-to-action buttons to increase conversions. Don’t miss out on these call-to-action (CTA) button design guidelines.

The world is mobile. Some users may not even own a desktop and, with the probable exception of work, they prefer mobile. And we say “probable” because nowadays some workplaces offer tablets. So, let’s  not forget about tablets.

You want every visitor to count towards your conversion goals, and this includes your mobile conversion goals.

Mobile best practices don’t really exist. Every audience is different, and we have the tests to prove it. What works for one business doesn’t always work for others.

There is an almost infinite number of things that you can consider for testing on a website. And many of them aren’t worth testing.

We are going to share some design ideas for your website’s mobile call-to-action buttons, so you can test them and discover what works for yours.

Conversion Sciences’ Guidelines for Mobile Call-to-Action Buttons

We’ll split these ideas into three major categories: placement, copy, and design. You can elaborate your own list of ideas — we call them hypotheses — based on what you know about your visitors and your website that could result in a lift in conversions.
Remember, there are no best practice unicorns hidden in this article.

Before delving into CTA button placement, copy, and design, let’s review some mobile conversion testing concepts.

Understand your mobile ecommerce visitor segments.

Mobile visitors are in a fundamentally different context than their desktop counterparts

Most mobile websites are responsive designs, designed first for the desktop. This only gets you 50% of the way to a high-converting mobile website. Why? Because a mobile visitor is immersed in a context that is essentially different than the one for desktop visitors. They are waiting for a table, standing in line at the bank, or relaxing on their couch. Often, they are better positioned to start a conversation than to finish a transaction.

This is one reason we often see mobile conversion rates that are a half or a quarter of desktop conversion rates.

As we test for conversions the mobile version will evolve and differentiate itself from the desktop version. We have to make different decisions on which calls to action to use, which calls to action to prioritize, where to place them, whether to use text or icons, and so on.

It is not obvious how to design your mobile call-to-action buttons to maximize conversions.

Always Test your Mobile CTA Buttons

Consider the symbol for infinity. The infinity symbol represents to us the fact that there is an almost infinite number of things that you can consider for testing on a website. From the operating system to the type of visitor and everything in between.

The number of tests we could elaborate could really reach infinity.

Placement, size, call to action text, stickiness, and frequency all combine to increase the number of possibilities. And don’t forget to consider interactions with other elements. Is that chat icon covering up your mobile call to action button?

Note: In the following sections, we run the design tips, ideas and guidelines from the top organically ranking articles on mobile call-to-action button by the conversion scientist himself: Brian Massey, who’s been a conversion optimization expert since 2007.

Discover what he has to say on mobile call-to-action button placement, copy and design. You’ll be surprised and learn a ton from his answers.

How to Identify the Optimal Placement for your Mobile CTA Buttons

Your visitors’ thumbs are spending too much time on your screens and your mobile conversion rate is suffering. – Brian Massey, Conversion Scientist®.

Conversion Sciences Team: mobile call-to-action button placement best practices

We found articles on this topic that recommended organizing mobile CTAs according to their priority. For example, on an ecommerce site, following eye movement from top to bottom, these calls to action were “Continue shopping”, “View your cart” and finally, “Check out”.

Is this correct and what guidelines would you give somebody regarding mobile call-to-action button placement?

Brian Massey: What you mention isn’t wrong, but on mobile it’s actually very different.

For mobile websites, the first question we ask is, which call to action do we optimize for.

How hard is it to take action on a mobile device? Forms are more difficult to fill out on a mobile device than using a keyboard.

This is one reason for lower mobile conversion rates. The longer your forms, the lower your conversion rates.

On this particular ecommerce website example, their visitor has to go through a four step registration process to buy from this e-retailer on desktop.

If your signup process requires them to find a piece of information, such as a password or account number, your mobile conversion rates will drop.

So, if we want to prioritize those on mobile, which is the call to action to optimize for? We may find that the best option is optimizing for collecting emails.

For those mobile visitors that are actually shopping, or trying to solve a problem, there are three broad segments.

  • Mobile-yes. These visitors subscribe or purchase on their phones as if it were a desktop.
  • Mobile-maybe. These visitors need to be motivated to complete a transaction. They are hampered by the environment they are in, or a lack of trust or skill with their phones.
  • Mobile-nope. These visitors will not buy on mobile.

CST: Can you tell us more about these mobile ecommerce visitor segments?

Mobile-yes visitors may be well-served by the calls to action of your default responsive design. You can estimate this segment by the number of completed mobile transactions you get.

Mobile-maybes may need a call to action that doesn’t require as much effort. You may only be able to get an email address or permission to text them. Offering to save their cart or give them a discount in exchange for permission to contact them may be the best option. This segment is estimated by your abandoners. Those who start filling out your form or press the add to cart buttons, but don’t finish the transaction.

Mobile-nopes may respond to the calls to action of the Mobile-maybes. Some percentage will call. Test click-to-call as a call to action, especially if you are offering a service or product that is complex to buy. When our clients are optimizing for phone calls, they have higher conversion rates on mobile than on desktop. You can estimate this segment as the visitors who spend time on your site, but don’t take any action.

Which segments are the largest on your site? Mobile-yes, mobile-maybe, or mobile-nope. This information will help you decide which calls to action to try first.

If you are good at email, you have more reason to prioritize mobile calls to action that generate email addresses. Here’s a real-life example. Someone is standing in line at the bank and they are shopping at an ecommerce store for fun. You’re not going to get a sale from them. But if your revenue per recipient (email revenue divided by emails sent) on your emails is higher than your mobile revenue per visitor (mobile revenue divided by mobile visitors), then you should have an offer to get a discount or save their work. Let them browse, and capture their email to convert them into sales later.

CST: Now we know which CTAs to optimize for, what is the next step?

Massey: On a mobile site there are many call-to-action buttons. Ultimately, the question we need to answer is, which calls to action are going to stay permanently on the screen.

Which ones are scroll-to, and which ones are permanent. Which ones are in an overlay or on a footer. Which ones should be on a sticky header or a sticky footer.

Sometimes a top sticky works, sometimes a bottom sticky works. The top sticky is higher in the visual hierarchy. The bottom sticky is closer to the thumb. So really, it’s something you have to test.

Mobile User Behavior Tracking to Identify Possible CTA Button Placements

Let’s dive deeper into how mobile user behavior tracking can help us identify the best possible call-to-action button placement.

CST: How do you define which call to action goes where on a landing page?

Massey: The ones that are most valuable on mobile, should go in a sticky header or footer.

CST: OK. So basically, it’s opposite to  everything we’ve read, right?

Massey: What did everybody else say?

CST: Almost every article repeated the same concepts. Make sure the eye flows towards the most important call-to-action. Consider the visitor’s natural scanning pattern.

Massey: Visual hierarchy is an issue on desktop, but not really an issue on mobile. On desktop, it’s important to control the eye. On a mobile site, it’s important to control the thumb.

On desktop the eye is king. On phones, the thumb is queen. On the desktop we use the visual hierarchy to help the visitor look in the right places. On mobile, we are a slave to their thumbs.

According to research done by Stephen Hoober 75% of users touch their screen only with their thumb, even though less than 50% hold the phone with one hand.

The thumb is almighty.

If you look at the heat maps from mobile devices, the scroll goes a lot further than it does on desktop sites.

Mobile phone users are more likely to scroll to the bottom of a page, and bounce. We’ve found a nice 6 percent increase in conversion rates when we place a call-to-action at the bottom of the page, instead of the copyright text in your footer. We call this a “dripping pan”. If they are scrolling your whole page then they are quite engaged. You should always have a call to action at the bottom.

Mobile visitors are much more likely to see the footer of your site. They bounce at the bottom after fast scrolling. For desktop users, the footer is a graveyard, where only the desperate look.

Sometimes a top sticky works, sometimes a bottom sticky works. The top sticky is higher in the visual hierarchy. The bottom sticky is closer to the thumb. So really, it’s something you have to test.

CST: We also read that Gutenberg (top left to bottom right) is the most important pattern on mobile.

Massey: Gutenberg is like reading. It does not apply to mobile web page either. These are all good for desktop users. The F-pattern is more relevant to search result pages on the desktop. There’s more of a C-pattern on the screens with mobile devices, but the pattern in mobile is more top to bottom.

CST: Can you track eye behavior on mobile screens?

Massey: It’s harder to do eye tracking on small-screen mobile devices, because it’s hard to see where the eye is looking. This information is gathered from the camera, and on a small screen, the eyes are not going to move that much.

Therefore, eye tracking is important for desktop and large-screen tablets. Scroll and tap tracking is a better gauge of activity on mobile.

CST: What happens when people take a pause from scrolling?

Massey: Then it’s hotter on the scroll tracking. That portion of the page is hotter. It means they are paying more attention and it could be a great place to add a mobile call-to-action button.

CST: How can we use scroll tracking to improve mobile conversions?

Massey: Let me show you an example. The page on the right has a scroll problem. You can tell because the hot white area is where a lot of people are seeing it, and the dark areas are where few people are seeing it. It could be that they are not scrolling because they are engaged or because this copy is boring them so they’re leaving.

How can we use scroll tracking to improve mobile conversions? A real-life example.

How we use scroll tracking to improve mobile conversions. A real-life example.

Less than 25% of the visitors are seeing the call to action on this page. Furthermore, there are several calls-to-action on this very long page, and very few people are seeing them. Scroll tracking helps identify these conversion issues.

In order for your call to action (CTA) to work, people have to see it.

We can clearly see how people are consuming the mobile page. Eye tracking is not effective on a mobile device. Scroll tracking is a better guide.

CST: Most articles speak about adopting a specific visual hierarchy of CTA buttons to direct the visitor’s actions. Is this true?

Massey: That is mostly desktop-oriented advice. The visual hierarchy is more important on desktop because we’re looking at a large body of stuff, and we have to understand the priority of things on that page. With mobile, we’ve got people scrolling through and they need to just see what their options are as they’re scrolling down.

Therefore, you may place mobile call-to-action buttons side by side, or make them sticky. Side by side buttons tend to be given equal consideration, and with sticky buttons, visitors get to choose when to take action.

CST: Is placing a sticky View Cart by the hamburger menu always the best option for an e-retailer?

Massey: It’s possible, but that’s not always the best combination.

If you have a site with a large catalog of products, you might put a search icon in the sticky header. If that works, you might try putting a search field there. Discoverability and capturing their email address might be the most important elements to increase mobile conversions

Most ideas don’t make it to the top of our hypothesis list because they’re low impact. But sticky CTAs are among the first things we test on mobile sites.

We call a sticky header a “headband”, and a sticky footer “sticky shoes”.

Getting your sticky elements right is very important. Test both.

You may be surprised by how much you can include in a headband. We’ve had successful tests with a headband that contained, the company logo, call-to-click phone number, live chat call to action, hamburger menu, and a request information call to action.

Example of many calls to action on a mobile headband. Discoverability and capturing their email address might be the most important elements to increase mobile conversions.

Example of many calls to action on a mobile headband.

If your revenue per visitor is higher on mobile than your revenue per recipient, which is the email revenue, then you would place “View cart” on the sticky menu. On product pages, you might want “Add to cart” to be on your sticky header.

CST: Some studies claim that you should have a clear call-to-action button that takes users 3 seconds or less to see. True or false?

Massey: Well, the page needs to load faster than 3 seconds. This is true for lead generation, but not so much for ecommerce, and it’s very important for content pages.

CST: Can we place more than one CTA per mobile page?

Massey: You must. You must increase the number of calls to action on mobile. You want to avoid having your mobile visitor having to scroll to find the call to action. Especially if you don’t have a sticky header.

And you should always put a dripping pan, which is the call to action at the bottom of the page. Therefore, if someone reads all the way to the bottom of the page, they are probably pretty interested in the topic.

CST: What are the best top placements for mobile call-to-action buttons?

Massey: There are two things about mobile calls to action that the power of the thumb dictate:

  • More frequent calls to down the page. For fast scrollers, you’ll want to have a call to action when their scanning has delivered the answer they were looking for. These can be one call to action repeated or content-relevant calls to action (Like the weak “Learn More”)
  • Keeping calls to action on the page. Headbands and sticky shoes should be the first elements you optimize.
  • The dripping pan. Have a call to action at the bottom of the page for when the visitor “bounces” off the bottom.

CST: Before we move onto mobile button design, white space and button color, what’s your best advice on mobile call-to-action button placement?

Massey: First, you need to define what goes in the sticky header. Should it be a sticky header or a sticky footer? Then define which of these items should go in that header or footer:

Best guidelines for placement, copy and design of mobile call-to-action buttons. List of options calls to action you can place on the sticky header.

List of options calls to action you can place on the sticky header.

And then you could define how you treat those elements. In other words, it’s about designing the calls to action.

Crafting your Mobile CTA Button Copy

Your mobile CTA button copy needs to be descriptive. The call-to-action button should tell visitors what is going to happen when they click it. It should be relevant, clear, and compelling. For example, “Get instant access” is compelling and clear.

Some studies show that if you say “my” instead of “your” then you’ll have an increase in conversion rates. But this doesn’t always happen.

Test creating a sense of urgency with your audience.

Placing the privacy policy under the mobile call-to-action buttons is called risk reversal, and can help for lead generation. There is a whole science behind risk reversal near the CTA button. Trust symbols, ratings and reviews, stars, testimonials – anything that makes the person feel more comfortable clicking that CTA button.

This section’s advice on call-to-action copy is actually valid for both mobile and desktop buttons.

Mobile CTA Button Design

Button size is really important, especially on small screens. Make sure your responsive design does not reduce the size of your buttons, and follow IOS standards on button size. In the Human Interface Guidelines, Apple recommends a minimum target size that is 44 pixels wide by 44 pixels tall. Try to avoid text buttons, as they are too small to tap and may lack sufficient contrast to be visible.

Adhering to these standards will not only help you with conversion, but with user experience and SEO as well.

The next thing to take into consideration is contrast. Not the color of the button per se, but the contrast in colors.

A button on mobile needs to look like a button, and, if it doesn’t, you may want to add round corners, raised borders, shadows, etc. And if there’s any doubt that this is a button, add an arrow of some sort to point at the button.

Our experience indicates that buttons that look like actual buttons tend to perform better. On the other hand, we have also found that ghost buttons – those whose background is the same as the page – can be invisible. As usual, you have to test to find out.

Vary the boldness of mobile CTAs based on priority if you have several buttons together.

If you are working with a platform like Magento, Shopify or WordPress, you may be limited by the theme’s responsive design. In these cases, you should consider either a theme that allows you to present two different designs, one for large-screen visitors and one for small screens. You may be able to alter the theme’s template to deliver a different experience to small screen devices. There are tools on the market that let you change the site in the visitor’s browser with JavaScript. This is similar to what we use to AB test. The server serves the same page, but as this is a mobile phone, it makes adjustments in the visitor’s browser.

The following two tabs change content below.
Data-driven scientists, UX designers, SEOs, Testers, Developers. Basically a group of brainiacs who want to make you more money. We can be hard at work on your site in a matter of days. Get a free quote from us, the agency that pays for itself.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *