6 Essentials of Optimized Checkout UI for Mobile Devices

For the first time ever, Alibaba reported more of their shoppers are purchasing on mobile than desktop. This isn’t a fluke either; according to a comScore study cited by Smart Insights, mobile users have surpassed desktop users back in 2014, and now those numbers are trickling into eCommerce.

With more consumers using their mobile devices to shop, having an optimized mobile checkout UI is more important than ever.

To keep those all-important conversions high and reduce shopping cart abandonment as much as possible, you must devote extra attention to the checkout design of your app or online store.

In this article, we offer 6 particular areas you need to focus on to ensure an optimized checkout UI. We divided these 6 mobile checkout essentials into 3 categories: Usability, Design, and Psychology.

Usability

1. Thumb Design

There’s a world of difference between a desktop user with a mouse and a mobile user with only their thumbs.

While veteran designers are more familiar with designing with the mouse in mind, an optimized mobile checkout requires going from the product page to the end of checkout using just thumbs. Or more accurately, a single thumb. A UX Matters study confirms that 49% of shoppers hold smartphones with one hand; therefore, a checkout process needs to be optimized for touch gestures like swiping and tapping.

What does this mean for eCommerce checkouts? Necessary items for efficiently completing the checkout should be within easy reach of the thumb. These encompass:

Call to action ("buy now" or "add to cart") Product images Form fields

Designing the checkout around shopper’s preferences and limitations creates a healthier UX, which in turn leads to happier customers and more sales.

2. Fast Checkout

Part of the expectations of mobile browsing is its speed, and mobile eCommerce should build on this… or else. Studies compiled by Dan Engel, CEO of Mobile1st, reveal that 47% of all users expect sites to load within 2 seconds, and 40% will bounce after 3 seconds.

With this expectation for a fast site, you can’t gamble with site conversions; you have to make the mobile checkout process as fast as possible. If you’re struggling, here are 3 safe bets:

Get rid of elements that use lots of graphics (like carousels) Host necessary graphics like your brand logo on a Content Delivery Network (CDN) Install tools like Google PageSpeed to automatically optimize your site

You can also address a shopper’s perception of your site speed to optimize checkout:

Show your users skeleton screens to distract them from loading times Get rid of spinners (progress indicators) while pages load

Just like the thumb design, loading times directly affect your site’s UX. How happy your customers are using your site determines how much they’re willing to spend — if they spend anything at all.

Design

3. Call-to-Action Buttons

Call-to-action (CTA) buttons are one of your most important UI elements. Think of them as the eCommerce equivalent of a brick-and-mortar store’s closing pitch.

It pays to focus on just a single, easy-to-spot, easy-to-click, vibrant CTA per checkout page. (Some common examples are "add to cart" or "continue checkout.") Phone screen real estate is limited, so you don’t want to clutter up the page with buttons competing for attention. When your users are given various CTA choices, it can easily confuse them, which adds unnecessary friction to the whole process.

One common but overlooked issue is that users don’t always know whether a CTA is clickable or just text. You can avoid this altogether with a light gradient on the button so it’s not entirely flat.

You’ll also want to pay attention to colour: for subliminal communication, for atmosphere, and for tying together your entire site with a consistent colour scheme. This Kissmetrics infographic can help you get started.

4. Guest Checkout

How important is a guest checkout option? Answer this by asking yourself how important is a third of your business.

A Baymard Institute study found that 35% of shoppers will abandon their cart if forced to create an account at checkout. Need more evidence? A separate case study from User Interface Engineering showed that removing the "register" button increased conversions by 45% and sales by $300 million for an unnamed major eCommerce retailer.

Just as with the other essentials in this article, you want to design your mobile checkout around real user’s preferences. In this case, real users hate creating accounts.

Psychology

5. Form Length

Whether skimming through an ancient tome or completing a purchase on a mobile device, one thing remains the same: people are intimidated by large blocks of text.

Any successful checkout UI needs to eliminate all content and form fields that aren’t absolutely necessary.

Formstack explains how long forms can scare shoppers into abandoning their cart. That begs the question, how can you make your forms shorter to provide a much better UX? It’s not as difficult as you may think:

Include only the absolute minimum info you need or want from your users (name, email address, etc.) Break up the form into multiple pages to create the impression that it’s shorter. If you’ve got ample traffic, conduct A/B tests of different lengths to find the right balance between data collection and forms with a great conversion rate.

While forms can also be burdensome for users if they’re too long, so can unnecessary page elements. The rule of "trimming the fat" extends to all areas of the checkout process, not just form fields.

6. Distractions

Any unnecessary element on your site that can sabotage you by distracting or annoying your shoppers. A poorly placed navigation menu or unnecessary self-promotional links are all obstacles that stand between your shoppers and a completed purchase.

The best solution is an enclosed checkout process where all unnecessary distractions are removed. This includes obvious extras like ads or self-promotions, but also includes common elements like headers and side-menus. If you look closely, you’ll notice most eCommerce sites discard their headers, footers, and navigation menus in general during checkout.

According to Econsultancy, enclosed checkouts are proven to reduce shopping-cart abandonment. A slick, distraction-free checkout allows the shopper to focus on only the most important elements:

Purchase information is made clearer to shoppers Security/trust seals are more noticeable Shoppers know exactly where they are in the process, reducing uncertainty

As a result, shoppers tend to only go in one direction, completing the purchase and increasing sales for your store.

Conclusion

The modern eCommerce marketplace exists on mobile. The amount of companies that can survive with a flawed mobile checkout process are getting fewer and fewer by the day. Apply the above tips for checkout optimization to save you money… and possibly your entire business.

How’s your mobile checkout process? Do you have any questions? We want to hear your thoughts, so share your opinions below in the comments section now.

About the author

Marc is a copywriter and content marketer who runs The Glorious Company, a content marketing agency. An expert in business and marketing, he helps businesses and companies of all sizes get the most bang for their ad bucks.