Mobile has become a key channel used by consumers for cross-platform shopping, picking up last minute deals, product research, and brand engagement. In fact, more than 50% of ecommerce traffic takes place on mobile. Data shared by comScore and Marketingland shows that 70% of media time and 79% of social media use happens on mobile devices.

That’s great news unless you’re among the ecommerce brands struggling to get mobile users to convert. It’s an ecommerce challenge for many, with conversions on smartphones average less than half of desktop conversions. Data compiled by SmartInsights revealed that global desktop conversions averaged 3.63% while smartphone conversions were trailing at 1.25% (tablets came in at 3.14%) during the first quarter of 2017.

The data shows consumers are actively searching, researching, and shopping but there are a host of things that force them to abandon their cart or bail before they ever click “add to cart”.

More than 50% of #ecommerce traffic takes place on #mobile. Data shared by comScore and Marketingland shows that 70% of media time and 79% of social media use happens on mobile devices. #mobilecheckout #mobilecro #ecommerceoptimiztion Click To Tweet

Dealing with Mobile Shopping Cart Abandonment

Cart abandonment continues to hang at exceptionally high levels, averaging 68% for desktop purchases. That rate increases to 78% for mobile devices. There’s no mystery behind why customers abandon their carts. You only need to look back at your own online shopping experiences to recall incidents that made you ditch a transaction.

What makes users abandon their carts?

The short and sweet answer is “usability issues”. While that covers many of the causes for abandonment it’s not always usability that makes people wander. The top reasons for cart abandonment include:

  • High or unexpected shipping costs
  • Found a better price with a competitor
  • Difficulty with navigation
  • Didn’t want to create an account in order to make a purchase
  • No shipping information available before checkout
  • Concerned about site or payment security
  • Complicated or lengthy checkout processes
  • Site or checkout was slow to load
  • Couldn’t find a coupon/discount voucher
  • Customer was only browsing
  • Distracted during the checkout process

The Top Mobile Checkout Elements to Check First

While that’s a laundry list of checkout abandonment issues that can negatively impact conversions, the upside is that each one can be addressed in order improve mobile conversion optimization.

Especially if you focus on easy-to-fix usability issues first.

Here are some key areas you should review to improve the mobile user experience and produce a lift in conversion.

What are the most common mistakes in mobile checkouts?

  1. Making crucial elements difficult to tap
  2. Your header takes up too much real estate
  3. Clunky mobile checkout forms
  4. Progress bar isn’t visible during checkout
  5. Excruciatingly slow checkout
  6. Making guest checkout difficult
  7. Not accounting for cross-device checkout
  8. Unfocused checkout CTA
  9. Correcting mistakes is tedious
  10. Lacking trust signals through the shopping and checkout

Find them all out!

1. Making crucial elements difficult to tap

The mouse and the thumb of the user navigate websites very differently, so don’t make the mistake of designing and basic ecommerce development mistakes that your checkout without consideration for mobile accessibility.

While a mouse can reach anywhere when shopping on desktop, roughly half of consumers browse on smartphones using their thumb. As the size of the screen/device increases, the “thumb zone” (the area comfortably in reach of the thumb) decreases.
Thumb zoneAs screen size increases the corresponding “thumb zone” decreases. Source.
Modify your checkout elements including buttons, navigation, and next-step actions so they fit inside of this natural comfort zone.
Crucial elementsPut the most crucial checkout elements in the easiest to reach area of the mobile screen. Source.
You also need to take into account that available real estate changes with the resolution of different screens. The buttons and calls to action you include in your shopping and checkout process should be large enough to navigate and “click” easily.

This means avoid smaller design elements like radio buttons or troublesome dropdowns that don’t play well with touchscreens. Use selection buttons with visual labels instead to highlight each option. They’re easier to see and tap.

Don’t make your customers hunt for the “proceed to checkout” button or tap repeatedly on small buttons to complete an action.

Difficulty with navigation is a leading cause of abandonment (ecommerce bounce rate) and it’s a simple design fix in many cases.

Here’s an example of a poorly optimized mobile checkout from GNC. Note the clutter requiring you to search for a next-step CTA to continue the checkout process.
Mobile checkoutExtra buttons like social links do nothing but distract from the main goal – getting a customer to proceed through checkout. Source.
And here’s an example a great mobile checkout improvement, perfectly streamlined to move the customer through to completing the sale.
Good mobile checkout Note the sleek, well-designed checkout with clear and screen wide CTA (I would just change its color to highlight it a little bit)

Want more insights like this?

Get weekly ecommerce tips, strategies and leading industry knowledge.
Delivered right into your inbox.

    onI have read the privacy policy and I accept newsletter terms and conditions.

    Please select this checkbox to continue

    Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.

    2. Your header takes up too much real estate

    Branding is important, but not so important that you want it to interfere with the checkout process. Your header including your navigation and logo should be minimized to allow for maximum visibility of critical checkout elements.

    Any additional step or action you require during checkout is going to increase friction and potential frustration.

    This includes forcing your customer to scroll down with each step in the shopping and checkout process.

    This example from Dillard’s shows how much visual real estate is taken up even in an optimized mobile checkout.
    Optimized mobile checkoutEven with limited detail and removal of navigation the header takes up a notable portion of screen space. Source.
    Reduce the scale of your header so that it takes up the least amount of real estate on the mobile device, leaving more room for crucial product info and CTAs.

    3. Clunky mobile checkout forms

    Typing is always going to be a bit of a headache on mobile devices. The moment you require input from the customer you lose anywhere from 30-50% of the screen due to the keyboard. It’s incredibly frustrating to try and scroll to the next field of a form only to find that you can’t scroll lower and the keyboard is blocking a required field.

    Rather than creating a long checkout form typically seen on desktop, break the process up into a multi-step process or reduce the number of form fields you need.
    Checkout formMinimalistic checkout form at Fabletics helps focus user attention. I would just test if adding a progress bar above the form would improve the conversion rate.
    Each step of the mobile checkout should have a limited number of fields that are above the fold, and above the keyboard entry. (This is where it helps to keep that header as small as possible, like the example above from Fabletics)

    Lastly, design your fields with mobile in mind:

    • Place labels above fields or use floating labels

    Floating labelsFloating labels provide persistent identification of the form field while typing to reduce friction during mobile checkout. Source.

    • Use full-width labels that stretch to the edge of the screen so the fields can be easily tapped with either the left or the right hand.
    • Include support for auto-fill to minimize text entry. When text entry is necessary then match the keyboard. For example: use the numerical keyboard for credit cards and phone numbers.
    • Be sure to make text fields tall/high enough that they can be easily tapped, with enough space between one another so the wrong field isn’t selected.
    • Use tabindex to support easily skipping from one field to another.

    Tab indexTab index makes it easy for customers to jump from one field to the next without tapping between fields. Source.

    Find out more examples of how to create a great checkout form to increase your mobile conversion rate in episode of Bite-size Ecommerce Optimization.

    4. Progress bar isn’t visible during checkout

    For multi-page checkouts you should always feature a progress indicator that is in clear view and above the fold. It’s a good practice to have this occupy the space where a normal heady might live.

    The mobile shopper can be a finicky and hurried shopper. If they see buttons to continue checkout on another page they may worry how long it will take. The progress indicator shows the steps remaining to checkout.
    Progress barThe progress indicator at the top of the checkout screen shows how close the customer is to completing the purchase process. As you can see it doesn’t have to take much real estate on the website. Source.
    This appeals to the brains drive to both have and complete goals. One study shared by Kissmetrics showed the psychology and effectiveness of progress meters. The University of Toronto found:

    • Progress indicators increased survey satisfaction
    • Progress indicators increased respondent engagement

    And when the respondents with no progress indicator asked if they would prefer to have some indication of progress, 75% said yes. People feel good knowing there’s an end and when to expect it. Most importantly, they’re driven to reach it.

    5. Excruciatingly slow checkout

    A delay of just 1 second during page load can reduce conversions by as much as 7%. With already reduced conversion on mobile that’s a significant hit. Couple that with the fact that mobile consumers expect pages to load faster than on desktop and it’s easy to see why mobile cart abandonment is so much higher.

    As many as 40% of mobile customers will leave a purchase behind if a site takes more than 3 seconds to load a page.
    Website performanceCustomers expect sites to load quickly and will rapidly abandon pages that aren’t loading fast enough – especially on mobile. Source.
    Focus on improving the mobile checkout experience by reducing or removing unnecessary elements:

    PageSpeed Insights from Google is an excellent tool to test load time on both mobile and desktop. It even provides recommended fixes for page speed and load issues it encounters.

    As many as 40% of #mobile customers will leave a purchase behind if a site takes more than 3 seconds to load a page. #website #performance #ecommerce #checkout #improvement #mcommerce Click To Tweet

    6. Making guest checkout difficult

    Shoppers may have no intention of returning. They aren’t thinking about making another purchase easier, checking on the order, or establishing a relationship with your brand. They’re thinking about the solution they want to purchase.

    Forcing customers to register is a major frustration when someone just wants to complete a purchase and move on. They may even perceive this as your intention if you put a registration option above a guest checkout option.

    With such limited real estate on mobile you should place the guest checkout option as the leading option above creating an account, and make sure it’s clearly visible above the fold.

    Home Depot’s mobile checkout is a perfect example of how to lead with the guest checkout.
    Guest checkoutPlace guest checkout above other options to further simplify checkout for customers and reduce cart abandonment
    You can always offer them the option at the tail end of the checkout to tick a box allowing them to save their information and register. At this point they’ve already entered their information and they can ignore the option if they aren’t interested.

    7. Not accounting for cross-device checkout

    Today’s consumers don’t limit themselves to purchasing on a single device. Just over 30% of transactions are completed using more than one device. That means 1 in 3 customers are switching devices in the middle of their shopping or checkout experience.

    Just over 30% of transactions are completed using more than one #device. That means 1 in 3 customers are switching devices in the middle of their #shopping or #checkout experience. #ecommerce #mcommerce #mobile #optimization Click To Tweet

    They may add products to their cart on mobile and then complete the purchase on a tablet or desktop – even several days later.

    And those cross-device consumers convert at 1.4x the rate of single-device users.

    To account for this and avoid spamming customers with abandoned cart emails when they actually wind up converting, make sure you set up persistent shopping sessions with the mobile user in mind.

    Make the cart persist for at least 7 days (and as much as 30 days) to make it easy for guests to return to their purchase. This also gives you plenty of time to set up much stronger personalized cart abandonment emails.

    If customers do register an account, make sure the cart contents persist within the account and not just based on single-device cookies. It’s also a good practice to provide some indicator to customers that they can carry their shopping experience from one device to another.

    This is a great opportunity for a CTA encouraging them to register an account to preserve their cart and pick up where they left off.

    8. Unfocused checkout CTA

    The purpose of the checkout is to get the customer to convert. Once they complete the shopping experience and move on to checkout there is no reason to carry standard site navigation over into the checkout process.

    Additional navigation, links, buttons, and visual elements can distract the customer from completing the purchase. The last thing you want them to do is back out of the checkout.

    Here are a few examples on how to keep their attention focused:

    Enclose your checkout by suppressing header navigation, social widgets, and other click-points that lead out of the checkout. If additional information needs to be shared, use accordion menus to suppress content rather than link to other pages.
    Apple checkoutApple includes FAQs and additional product info in collapsible segments to keep customers in the checkout process. Source.
    Be mindful of footer content which can also create distractions and exit points during checkout. If it doesn’t contribute to the end goal of conversion then suppress or remove it.
    FooterFarmDrop removes all footer elements in the mobile checkout save for a chat support icon with no label. Source.
    If you offer coupon codes then make coupon/code fields less prominent as they encourage customers to hunt for discount codes online. That can delay checkout and lead to distractions including cart abandonment.
    Coupon fieldThis example replaces the larger coupon field with a less prominent text link to add a coupon code during checkout. Source.
    To keep customers moving forward, design next-step CTAs and buttons to stand out from the other checkout content.
    Checkout designAO uses brightly contrasting colors, outside of the stores color scheme, for buttons that lead to the next step in the checkout. Source.
    For the final summary and confirmation page you should position the confirm, complete, or submit button above the fold. This eliminates any chance where a customer thinks the summary page is a “completed order” page, inadvertently exiting before the order is actually completed.

    Make that final CTA to complete the order visible and obvious to avoid any confusion.

    9. Correcting mistakes is tedious

    Any kind of form correction will add friction during mobile checkout. If a customer needs to correct billing, shipping, or product information once they reach the end of the checkout you should make it as easy as possible to correct info.

    Rather than making them backtrack using progress bar breadcrumbs through multiple steps, give them the ability to update everything from the final checkout page. This mobile shopping cart design example from Yummygum shows how product data and contact information can be easily edited without changing screens.
    Simple cart editingMake editing simple to keep customers in the cart, reducing the chance for them to abandon the purchase. Source.

    10. Lacking trust signals through the shopping and checkout

    Payment security is a leading cause of abandonment. Customers want to know they’re making a safe purchase from a reputable merchant who will protect their personal information.

    Trust goes much deeper though. Customers want to avoid buyer’s remorse. They want to buy with confidence and they want to know that if there’s a problem that you’ll take care of their issue.

    Trust signals throughout your shopping and checkout experience alleviate concerns, improve rapport with customers, and will help lift conversions.

    A clear point of contact inspires trust; customers know you’re reachable for issues or if they have questions. Click-to-call integration and even live chat can inspire trust, just be sure not to use visual elements that take up too much real estate on mobile.

    Badges and clear statements about secure payments are key to putting a customer’s mind at ease. One study from Baymard asked customers which badges provided the best sense of trust when making purchases online. The results show trust is important to consumers.
    Trust signalsTrust signals like security badges have a direct impact on conversions and consumer confidence when shopping online. Source.
    Interestingly enough, 49% of respondents didn’t know the difference or had no preference over trust seals. This study indicated consumers took the time to look for trust signals but had no key preference to which signal was displayed.

    The green padlock is a widely identifiable trust signal for mobile users shopping online. The green assurance displays the brand name rather than the URL as a symbol of extended validation certification. It provides a greater sense of trust over a generic URL with basic SSL.
    Trust signals on checkoutNote the multiple trust signals including HTTPS protocol, the green padlock for extended validation certification, the “secure” subdomain for checkout, and the prominantly placed Comodo security badge.
    Exercise restraint when including trust signals in your checkout. While they can improve conversions, too many badges can clutter up your checkout process and distract the customer from completing their purchase.

    Conclusion

    While the industry and ecommerce platforms have made great strides with improving mobile commerce, there’s still a lot that can be done to improve mobile conversion rates. While the usability and customer experience elements listed in this article have all been proven time and again to improve conversions, they won’t yield equal results.

    Like any approach to ecommerce optimization it’s important to make incremental changes and then test, monitor, and analyze the results. That’s the best way to ensure the usability and persuasive improvements you’ve made are creating a lift or upward trend specifically with your mobile audience.

    Dig into our case study revealing how mobile optimization tactics like those listed here had an epic impact for one of our ecommerce clients.

    Want to Optimize All of Your Store’s Pages? Get Our 115-Point Ecommerce Optimization Checklist

    In our exhaustive ecommerce optimization checklist, we’ve covered everything you need to know about optimizing your online store.
    Ecommerce Optimization checklist

    💡 At Growcode, we develop and maintain online shops and B2B ecommerce on Magento!


    Growcode Ecommerce Blog / Ecommerce / 10 Elements of Your Mobile Checkout That Need Improvement