View All Blogs

Your Mobile Checkout UX Design Needs Work: 4 Improvement Tips

Updated on July 8, 2024
Posted on June 12, 2019 by Matt Stewart

4 Improvement Tips

Checkout is, without question, the most important part of your eCommerce flow. The last thing you want to do is slip up in your UX design and drive customers away at the checkout page, wasting all the work you put into finding and bringing them into your marketing fold.

According to research, mobile eCommerce sales will encompass 53.9% of total eCommerce sales by 2021. And if you want to tap into this market, you’d better make sure you have an engaging checkout experience. Keeping users engaged throughout checkout—especially on mobile—relies on a structured flow that supports the customer’s experience and reduces effort as much as possible.

1. Cart View Optimization

Check your current layout and make sure you’re providing clear details on products, pricing, shipping options, and any discounts or bonuses they may qualify for. Provide estimated shipping dates for different options and, overall, give them everything they need to know to make a decision.

Of course, you’ll also need to make it easy to edit cart details while staying on-page. It’s detrimental to the UX to make users navigate back to product pages and then return to checkout. And while you’re at it, make sure to save their cart details should they leave the page. This saves them the hassle of having to re-select items when they return—an easy UX boost that takes little effort to implement.

Your goal here is to give users a feeling of control over cart activity. The cart is the top-level view of their purchases, so make sure it’s tidy and provides them the details they need.

2. Improve (or Implement) Guest Checkout

Always, always give shoppers the option to checkout as a guest, rather than asking them to create an account.

Most consumers view account creation as a frustrating hurdle to their purchasing experience. (If they want to make an account, they typically do so before navigating through the checkout process.) Curiously, consumers are particularly averse to account creation during purchasing—even if they’re entering all the same information in your billing/shipping fields as they would for a new account. In one survey, over a third of consumers (34%) agreed that being asked to make an account was justification for cart abandonment.

This can perhaps be explained by the sense of “commitment” that account creation brings. And when it comes to encouraging consumers to follow through with a purchase, long-term commitments are the last thing on their minds.

3. Optimize Mobile Form Fields

Along those same lines, be aware how you’re structuring your information capture tools. Nobody wants to provide more information than needed, and asking for too many unnecessary details in your form fields can discourage users from purchasing.

But when it comes to your form fields, a quality UX isn’t just about what you ask; it’s about how you ask. Put some thought into how you structure your form fields.

For example, where should you place your form field labels? Next to each field? Inline in the field itself? Or somewhere else altogether? In this case, it’s good practice place labels above the field. Placing them to the left of each field can compress the field space, a particular problem for mobile. And definitely avoid inline labels; they might look elegant, but it’s frustrating to have the label disappear as you start typing.

And along those same lines, make sure the labels themselves are context-independent. This just means making sure that every label can be viewed, and understood, on its own without seeing its accompanying details. This is important for mobile shopping carts, as users entering data will have their screens obscured by pop-up keyboards and other windows. Context-independent form fields guarantee that customers always know what data they’re entering, regardless of what’s on the screen.

4. Automate Data Where You Can

Automation is a lifesaver for reducing friction in the UX. Consider your mobile shopping experience and see what details you can auto-populate for your customers. You may be able to auto-detect their locations, and you may have pre-stored details on their contact information that can automatically be applied. Every moment of time you save here speeds up their checkout process, so it’s worthwhile to consider.

Be careful with automatically applying information, though. It’s not always helpful (or appreciated) to make user decisions for them.

For example, if a regular buyer qualifies for reward points or discounts, you should consider automatically applying these benefits to their cart total. Some marketers recommend always taking this approach, as seeing a lower-than-expected total can encourage purchase follow-through. But plenty of customers prefer to save these reward points and may not appreciate them getting “spent” without consent.

In cases like these, be sure to include messaging on the checkout page that makes it clear that their points are being applied. If you don’t make it clear, they might not realize that their points were spent until they go back and check their total. This is a nasty surprise you don’t want to levy on your loyal customers.

Mastering the Mobile Shopping UX

Many of these are small details—but as we all know, small details are what make up a great UX. And with mobile shopping on the rise, it’s more important than ever for businesses to take an active role in optimizing their mobile experiences. Check out your own mobile shopping cart and ask yourself whether you’re really doing everything you could for your shoppers. You might find a few easy tweaks that could appreciably increase your conversion rates.


Want to improve your website UX?

Subscribe Here!