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 a 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
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:
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.
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.
Modify your checkout elements including buttons, navigation, and next-step actions so they fit inside of this natural comfort zone.
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.
And here’s an example a great mobile checkout improvement, perfectly streamlined to move the customer through to completing the sale.
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.
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.
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.
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:
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.
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.
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:
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.
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.
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
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.
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.
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.
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.
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.
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.
To keep customers moving forward, design next-step CTAs and buttons to stand out from the other checkout content.
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.
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 design example from Yummygum shows how product data and contact information can be easily edited without changing screens.
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.
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.
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.
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.
In our exhaustive ecommerce optimization checklist, we’ve covered everything you need to know about optimizing your online store.