Is Your Shopping Cart Ignoring Mobile Customers?

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.

Cart Abandonment

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:

• Simplify and Streamline
  The ultimate goal here is for the user to click that ‘Place Order’ button so reduce any unnecessary obstacles and distractions that might get in the way (multiple steps to get to cart, etc.). and make it clear and easy to update cart items.
• Mobile vs. Desktop
  Take a look at the product mix (item count, total spend, type of item) on your site’s mobile and desktop orders. Frequently, the mobile shopper will make quicker purchases and as a result – the spend is lower and number of items in the cart is also significantly smaller. However, If there are items on your site that require customization or have multiple options, it might be worth considering adding steps to the mobile experience where on a desktop it would all be on the same page.
• Placement of Important Elements
  There are subtle layout and design variations that must be considered for mobile shopping carts. The placement of primary action buttons (Place Order!) as well as  details like the order summary must be easy to find to avoid frustration or missed extra fees such as in tax and shipping charges.

Thumb Browsing

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.

Optimization

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:

• Remove any large banner images or header images altogether.
• Make sure any third party resources, loading from a service or elsewhere, are as fast as possible. Use links from CDNs (content delivery networks) or the minified versions of those files if they exist.
• Reduce image sizes; for shopping carts that display a product image, ensure the image is optimized for its purpose. Original, high-quality images are not necessary for a shopping cart when the window is too small to notice subtle quality differences.

Functionality

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:

• Only include essentials to mobile checkout. Remove or hide any excess fields such as “Special Instructions” or “Customer Comments” and avoid the temptation to cross-sell and upsell, promote other areas of your site or include other distractions.
• Auto-populate as much as possible. A good example of this is asking for a user’s ZIP code and then populating the city and state or allowing the user to pre-select an address from their address book.
• Present the correct keyboard for the type of field that is being filled out.
• Using the tabbing option included on mobile keyboards allows the user to process from one input field to another ensuring smooth transition between text fields and becomes important when it’s difficult to manually select each text field. To add to this feature, arrange fields vertically to allow for easy navigation.
• Single page checkouts are difficult on mobile because the user is missing a visual indicator that there is more to do on the page. Breaking down the checkout process into multiple steps with some allowance for data review is recommended.
• Whenever the user has completed a major action during the checkout process – creating a new account, adding an address or finally clicking to place order – it is imperative to indicate that something is happening in the background. Showing a progress indicator or loading screen overlay is an effective method to prevent any accidental cancel or double-taps.

Payment Options

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.