10 Elements of Your Mobile Checkout That Need Improvement
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
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:
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.
Find them all out!
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.
As 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.
Put 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.
Extra 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.
Note the sleek, well-designed checkout with clear and screen wide CTA (I would just change its color to highlight it a little bit)
Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.
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.
Even 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.
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.
Minimalistic 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:
Floating labels provide persistent identification of the form field while typing to reduce friction during mobile checkout. Source.
Tab 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.
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.
The 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:
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.
Customers 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 TweetShoppers 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.
Place 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.
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 TweetThey 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.
Apple 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.
FarmDrop 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.
This 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.
AO 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.
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.
Make editing simple to keep customers in the cart, reducing the chance for them to abandon the purchase. Source.
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 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.
Note 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.
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.
Get weekly ecommerce tips, strategies and leading industry knowledge.
Delivered right into your inbox.
Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.
