Conversion Optimization

15 data-driven Mobile Checkout tips (+ actual Brand Examples)

If you’re ignoring mobile checkout, you’re maybe losing 50% of sales opportunities. Solution: 15 research-backed mobile checkout optimization tips that work

15 data-driven Mobile Checkout tips (+ actual Brand Examples)

Today, more than 50% of eCommerce traffic comes from mobile, yet 78% of this traffic does not convert due to shopping cart abandonment.

Some of the common reasons for low mobile checkout conversion rates are: 

  • Lack of a secure checkout process
  • Product details not clearly visible
  • Difficult navigation
  • No option to compare products/prices etc.
  • Difficulty in updating customer information

Whatever problems customers face with mobile transactions, research has shown just how important mobile checkout optimization is when it comes to driving conversions to your eCommerce store. 

So in this post, we’ll be discussing 15 data-driven mobile checkout best practices as well as some real-life examples to help boost your mobile eCommerce conversions.

1. 70% of customers don’t check out because of a lack of trust: use trust signals

Build trust in your store by ensuring that your entire website is safe and you have this security trust badge around to prove it.

For starters, when customers tap on your address bar, it should show that their connection is secured. A simple HTTPS instead of an HTTP will go a long way. 

You can also use trusted third-party security badges of payment processors on your checkout pages. An example is the rapid SSL badges. 

Leverage guest checkout options for customers who might be skeptical of entering their card details on your eCommerce store. With alternative checkout options like PayPal, Amazon Pay, and Venmo, you’re likely to get more conversions because customers who are very security conscious will get a safer checkout option that doesn’t require so much commitment.

See how Sephora uses the PayPal button as a guest checkout option? Customers who might be interested in creating an account can opt for the actual checkout button.

Example of Sephora mobile checkout

2. Retailer got a $300m increase in sales by taking out a button: cut out your checkout fluff

Your checkout page should be aimed at a single goal which is directing customers to check out. When customers encounter stumbling blocks or distractions like a registration pop-up or social media links, it stops them from checking out immediately.

Since the mobile checkout page is an even limited space, take out all the unnecessary content on this page. Start by re-evaluating all the content on your current page and ask if this will nudge your customers to checkout faster or not.

On GNC’s checkout page, there’s too much going on. We can see the guest checkout (PayPal) logo twice. There are also social media icons at the footer of the page that take up valuable real estate. 

Example of a cluttered mobile checkout page


This doesn’t mean all content though. Keep in mind that to convince some of your customers, they might need to see information on your shipping, return policy, and delivery details. So leave only the relevant stuff. 

Here’s a cleaner mobile checkout page that focuses on the relevant details. Customers can easily find the answers to questions they might have about their orders directly on the checkout page.  You’d also see that the footer is dedicated to customers who’d want to sign in.

Example of a clean mobile checkout page

3. 27% of customers abandon check outs due to time constraints: show them their progress

Filling forms on mobile isn’t something your customers may look forward to—they may feel impatient or simply not interested. This is where a progress indicator on your mobile design can help you double down on conversions.

Think of it as a map that not only accounts for the time spent but also helps them estimate how much they have to complete. Plus, it helps make delayed gratification worth it. 

When using a progress indicator on your mobile checkout page, ensure it’s located at the top of the screen and sticky. That way, regardless of how far ahead below they scroll, they can see it at all times.

And unlike desktop breadcrumbs, you want to keep the steps shorter. Preferably between 3-4 steps to reduce the percentage of form fatigue and checkout abandonment. 

Check out Topman’s three-step progress indicator: 

Example of a progress indicator for smooth mobile checkout process 


Find out 10 lesser known ways to combat cart abandonment: 10 Under-utilized ways to reduce shopping cart abandonment

4. 70% of customers won’t buy if your page is slow: get optimizing

When optimizing for mobile, the ideal load time is below 3 seconds because mobile users are more impatient compared to desktop users. So while a desktop user can wait for 5 seconds, a mobile user would have clocked out at 3. And at the checkout stage, every customer counts.

This can be understood from Deloitte’s study: it finds out that load time is the most important reason why mobile users abandon. In fact, 10% of customers end up not purchasing just because of slow loading. 

Here’s what Unbounce’s report finds as well. 

impact of slow load times on mobile checkout
Source


The report also shares how eBay was able to achieve a 0.5% increase in add-to-cart count by decreasing their load time by 0.1 second. 

5. Customers checkout 30% faster with a bit of help: introduce auto-fill

Since the average mobile user comes in contact with online forms every day, it can get quite tiring entering the same details every time. This form fatigue can lead to serious checkout abandonment on your eCommerce store. 

Thankfully, browsers like Safari and Chrome support autocomplete on certain forms like first name, last name, email, on forms to help reduce the time and effort spent on filling checkout forms.

By allowing autofill settings on your eCommerce store, customers can quickly fill out long shipping details in one tap. You can also introduce an option that asks customers if they want to use the same shipping address as the billing information. It helps save that extra time.

For example, see how much time autofill saves on this Shopify checkout page in comparison to the manual email address entry

Example of autofill to improve the mobile checkout experience


6.  Checkout optimization can increase conversions by 35.6% - optimize for order edits

Whether it’s changing the number of orders or changing the color of an item in their cart, a customer can decide at the checkout page to make minor changes to their orders.

Rather than having them leave the checkout page with hopes that they’ll get back to it once they are done, provide an option for them to edit their order right there. With this, you can reduce cart abandonment and even increase a customer’s order value.

In our example below, see how Victoria’s Secret brings up an edit display for customers who want to change the specifics of the order in their cart.

Example of order edit option for mobile checkout optimization


7. 43% of customers abandon carts because of shipping costs - use location-based info for costing

While shipping costs, taxes, and other delivery fees are essential to the running of your store, customers can find them a little too high especially when these prices are fixed in a particular currency rate.

The truth is, your customer’s purchasing power is tied to their location as well. That’s why it’s better to use customer location to determine shipping costs and taxes.

Another reason why you should use customer location is to help manage expectations for delivery. With the right data, you can show them just how long their purchase will get to them. You could even offer a pickup option at a nearby store if they’d be interested. 

In this example, Target uses location to estimate the delivery date and offer a pickup option to a store close by.

Example of mobile checkout page by Target


8. 39% of mobile users leave because of difficult form filling process - make it easy with dynamic keyboards

Devices vary in size and although some mobile screens are wide enough, filling forms on them can be quite error-prone. 

This is especially because some devices require that you toggle between numeric, alphabetic, and special character keyboards. However, you can optimize for 39% of these prospective mobile shoppers by reducing the effort that goes into changing keyboards.

By introducing dynamic keyboards that change with checkout field needs, you can double down on your mobile conversions. So when you need a customer to type in a phone number, or use a numbers field, be dynamic by showing only a numeric keyboard. You can do this for letters or special characters as well.

Here’s how Nike uses a dynamic keyboard that changes between the email and phone number field:

Example of mobile checkout optimization through dynamic keyboard


9. Extra costs are the number 1 reason shoppers leave - be upfront with costs on the order review page

Do you feel that your extra costs are a little high? Or would you just prefer to hold on to it till when they checkout? That’s doing your eCommerce store more damage than good.

Communicate your shipping fees and other costs clearly above the fold of the checkout page or on the review order page. This way your customers don’t feel betrayed when they get to the end and realize that there are extra charges they weren’t ready to commit to. 

If your additional costs are on the product page or review order page but located below the fold, it’s possible customers can still miss it. This is because, on mobile, they might not scroll to the end of the page. So move your extra charges to a more visible location to avoid a faux impression.

See how Jet (recently acquired by Walmart) clearly shows off the subtotal, shipping fee, estimated tax, and other additional costs on its review order page before taking you to the actual payment page.

Example of mobile checkout page by Jet


10. 49% of customers are one-handed when using their mobile device - optimize for thumb

The thumb is important for the touch experience. According to research, cradling your phone with both hands can make it easy to reach all corners of the screen. However, since most mobile users are one-handed, only the middle area of the screen can be easily accessible.

Now having this in mind, optimize your screen for a thumb by putting the CTA’s on the lower section of your screen where it’s easier to reach. For the other areas of your screen, you can place your text-only content there.

In our Amazon example below, the areas at the top screen marked in red are the hard-to-reach areas. So you’ll see that the CTA’s are placed at the middle and lower sections of the screen. 

Example of mobile checkout page by Amazon

11. The average width of an adult thumb is 72 pixels - make your CTA’s full width

On a desktop, while the size of the CTA might be noticeable, it usually doesn’t take up an entire row because your screen is big enough to click on. However, when optimizing your mobile checkout, you have to take into consideration the size of a human thumb and its general interaction with your page.

Research has shown that making the CTA’s on mobile versions at least 44 pixels increases customer engagement with the CTA. so for conversions on your checkout page, ensure that your primary CTA buttons are at full width. This means they should cover up an entire row. 

Wide CTA’s are bolder, more visible, and very easy to click on. Because with a full width, you don’t have to worry about CTA alignment or placement.

On Casper’s checkout pages, the CTA is bold, blue, and full width just like the example below:

Example of mobile checkout optimization by Casper

12. 8 in 10 customers will stop engaging with a website if it doesn’t display well on their device - prevent auto-field input zoom

Mobile devices especially iOS devices sometimes have this flawed user experience where when you try to fill a form and you tap on the form field, it automatically zooms in. 

Here’s an example on an iOS device below:

Example of auto zoom in mobile checkout page


This can take up significant areas of the screen, leaving your customer trying to zoom out or entirely close that tab to avoid having to deal with this issue.

The key to optimizing for field input zoom is to ensure that your form font size is always above 16px. Turns out that the form fields always zoom in whenever the font size is under 16px.

Here’s an example of how the same form fields don’t automatically zoom in at a font of 16px above.

Example of mobile checkout optimization with auto zoom


13. 26% of customers abandon their mobile carts because of a complex process - use dropdown accordions for explanations

Rather than links, use dropdown accordions on your checkout page.

The difficulty customers experience with their mobile transactions sometimes comes from having too many distractions on the checkout page. If you have a high number of hesitant visitors, they may want to view the content of every link which could take up so much time.

A great way to reduce distractions is by removing the number of links you have on your checkout page. Since the goal is to keep them on the page and not away, rather than using links that’ll redirect them to other pages of your mobile, have them view the details directly on your checkout page using dropdowns. 

With dropdown accordions, customers not interested in the details also have a collapsible view where they can choose to not see the content. It helps keep the page very detailed yet organized. 

Below, see how Made uses dropdown accordions to provide help with customers’ frequently asked questions in a very organized format. 

Example of mobile checkout page by Made


14. 64% of customers prefer to save cards online - allow saving cards

Many customers rarely have their cards with them when they are browsing through products and so in cases like this, they simply just add it to cart to make a purchase later on.

Take advantage of this situation by providing an option to save card information. This way returning customers can easily use a saved card to complete their transaction on the spot. Tell them the benefits like it’s a way to have a faster and more convenient way to checkout.

However, since data security for cards online can be quite tricky, ensure that you ask before proceeding to save their card details on your eCommerce store. Also, conduct site audits to be entirely sure that saved cards are protected. Because a data breach is a sure way to lose customer acquisition and even retention.

Below is an example of a checkout with an option for customers to use their saved card to check out faster.

Example of saved cards in mobile checkout 

15. Over 30% of transactions are completed using more than one device - offer cross-device checkout

While so far, we’ve talked about optimizing for a mobile device, many customers switch between their devices before completing a purchase. They may have been browsing from a desktop or tablet before choosing to finally checkout with a mobile device.

So to avoid spamming who might have checked out from a different device with promotional emails, track user shopping behavior on your eCommerce store to understand behavioral interaction.

Next, provide a sign-in option for returning customers or allow them to save to cart where they can access their previously saved items. Communicate the benefits of why they should sign in. This will help customers checkout easier without the struggle of having to find their favorite product in your store again. 

See how ASOS uses its wishlist to encourage users to sign in so all their saved items can be synced.

Example of cross-device checkout
free conversion rate optimization audit

The Bottom Line

Optimizing for mobile checkout is paying attention to both the major and minor details of your page. Start with the data-driven suggestions discussed above to make a head start on increasing your mobile conversions.

You can also conduct a 360-degree analysis of your current eCommerce mobile experience to find deeper insights. Get started with a free mobile audit from ConvertCart today.

You may also like

x
Learn WHY shoppers bounce off your
Product Pages without buying
Free audit
Sent to your inbox
OK

Find out WHY shoppers bounce off your Product pages without buying

GET A PRODUCT PAGE AUDIT

From conversion experts who help 500+ brands

BTW, the audit is FREE :)

All we need is your:

Thank you!
We’ll be in your inbox soon :)
Follow us on:
Oops! Something went wrong while submitting the form.