Both total visits and time on-site are split down the middle between desktop and mobile, with some estimates placing the majority with mobile browsing, and 40% of all transactions occur across multiple devices. Ignoring mobile users on your eCommerce platform is not an option. Developers are well aware of the importance of mobile but sometimes fail to implement responsive design for mobile shopping.
Content marketing, SEO, social media campaigns, and all the various efforts that go into eCommerce are a substantial investment for any business. Getting to within an inch of a sale and losing it through cart abandonment is the worst-case scenario, and it is a sizeable fraction of e-commerce traffic. The cart abandonment rate in 2017 was 78.65 percent. While some users comparison shop to begin with, many others bounce when confronted with obligatory account registration or daunting forms.
Here are some important things to consider when reviewing your mobile shopping cart design and layout to minimize cart abandonment:
It can probably be said that you create for the world you know. The same is probably true for your web development and marketing teams - they’re busy creating, designing and planning when sitting and working at their desks. All of that work means that a developer has to make a conscious decision to think of and test for the mobile audience.
Development is usually created on a device with a mouse and keyboard, which can create problems when developers don’t account for the main mobile interface unit: thumbs. Thumb browsing affects layout in a non-trivial way. It means that users have lower precision than with a mouse, and range of motion is limited when someone is holding the phone at the bottom of the screen or with one hand.
The nature of using thumbs for interface means that there are hard-to-reach and easy-to-reach spots on a phone screen. For a right-handed person, the bottom left is just a fingertip away, whereas the top left is the most inconvenient to touch. None of your important functionalities like cart editing or checkout navigation should be included in the top left of the screen.
The decreased precision of thumb browsing also affects buttons and CTAs. Whereas a link or even multiple subsequent links are passable when using a mouse to click, this can become a nightmare when browsing on mobile. Calls to action, navigation, and confirmation should all be presented in the form of wide and easily selectable buttons while removing design and layout elements that aren’t necessary - simplification will pay huge dividends.
Load speed is equally if not more important on mobile. This becomes a particular issue for users who have slower internet speed on their phone than on their home computer. In light of this, the best approach to optimize the checkout process is to cut out as much superfluous script and design as you can afford. Intense graphic elements like carousels hurt load times, won’t display as well on mobile, and should be cut. When it comes to the popularity of social media scripts to show social proof of your product, the end-game is to inspire a purchase or subscription, which means that social media scripts can be spared during the checkout process.
Here is a quick checklist of simple optimizations to reduce load speed on mobile:
Overall, the functionality between your desktop and mobile checkout experiences are the same. You’ve added products to a shopping cart, the customer is entering their address for billing and shipping, selecting a shipping and payment method and finally, reviewing all that they’ve entered and clicking the “Place Order” button.
However, checking out on a mobile device can be time-consuming and error-prone so the focus should be on reducing as many pain points as possible.
Here are a few guidelines for functionality:
It’s best practice to include options for your users’ preferred payment method. You don’t want to lose a sale at the end of checkout because your site doesn’t support a certain payment type.
You can’t be sure whether your buyers will use one of the major credit card companies or an alternative payment method.
Reviewing your order data to answer the payment question may provide some insight into how you design and build the payment screen for mobile users. When reviewing preferred payment methods, most ecommerce stores will acknowledge that one method is used by a significantly larger percentage of customers than the other options. A B2B storefront may see a large percentage of users who choose to pay by PO rather than credit card. Using your order data, you can display the full detail of a payment method (saving a click) and give users the option to tap to use something else.
Given the amount of time and money that goes into bringing users to checkout, it’s imperative to design an experience that minimizes cart abandonment rates. Friendly mobile browsing is one of the most important requirements for a seamless mobile UX.