UI Design
< 5 minute read

Mobile eCommerce Best Practices for UX (with Infographic)

Miklos is a lead UX/product designer with more than 18 years of experience and a wide variety of user experience projects under his belt.

In recent years it has become widely accepted that eCommerce businesses that are not mindful of mobile eCommerce best practices will be left in the dust, and stand to lose billions. Astute mobile UX designers know it’s essential to make sure all eCommerce experiences are designed for mobile.

The phenomenal growth of eCommerce has fueled the advance of mobile eCommerce and the numbers paint a vivid picture. eMarketer expects global mCommerce sales to reach $3.5 trillion by 2021, and account for 72.9% of the eCommerce market.

What’s fueling this remarkable growth? Significantly more users are accessing the web from a mobile device rather than a desktop, and they are doing it with more eCommerce intent than ever before. They are there to shop and ready to buy.

Mobile eCommerce best practices.

eCommerce mobile app design (by Sandra van der Kruijt-Scheurwater)

Mobile eCommerce however, has special requirements for great UX. Shoppers expect an eCommerce site or app to work well on mobile—it not only has to look beautiful, but it should also have seamless UX and adapt to their behaviors.

Mobile eCommerce Best Practices

There are many aspects to keep in mind for conversion-oriented mobile eCommerce design. Typically, mobile eCommerce best practices use mobile UX design best practices as a baseline, and savvy mobile UX designers take it to the next level.

Some of the must-haves:

  • Support image zooming by pinching and double-tap gestures
  • Provide a “save” feature for the shopping cart
  • Use descriptive, well-labeled forms, optimized for mobile
  • Take full advantage of device features such as the camera, microphone, and GPS
  • Prioritize search (and keep it above the fold)
  • Utilize voice-recognition to speed up search and other interactions
  • Provide intelligent auto-suggestions, auto-detection, and errors with forms
  • Instill a sense of security and trust by displaying badges, reviews, and testimonials
  • Provide smooth, easy, and speedy checkout
  • Provide easy, thumb-oriented interaction
  • Make it fast and easy to pay with built it payment systems such as Google Pay

Mobile eCommerce UX

eCommerce mobile app microinteraction (by Grønland)

Better Mobile eCommerce UX Leads the Way to an Improved Bottom Line

Mobile eCommerce trends show that the mobile eCommerce market is growing exponentially and the expansion of the industry has created a multitude of benefits for sellers. However, with this comes a slew of best practices and standards for mobile eCommerce UX design that businesses must follow if they are to be successful.

Although every eCommerce store is different having its own limitations and goals, following the mobile eCommerce best practices outlined in the infographic below will help create a more successful mobile eCommerce experience.

Mobile eCommerce UX infographic

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What is a mobile user experience?

Mobile user experience refers to how a person feels and thinks when using a mobile site or app. Mobile user experience design is less concerned with the look and feel of a product, and more concerned with how it makes users feel. Mobile user experience is focused on the user rather than the aesthetics.

How long should it take for a page to load?

53% of mobile visitor will leave if page load time is longer than 3 seconds. Mobile eCommerce best practices call for a maximum of 2-3 seconds of load time. On desktops, the load time may take a little longer and it will still be acceptable.

What are gestures on mobile?

People interact with a mobile device by performing gestures on the touchscreen. Every app, game or tool on a mobile device typically includes the ability to swipe, tap or pinch to function—called gestures. Mobile gestures are the movements made by a user to activate and use a specific control within a mobile UI.

What is the average cart abandonment rate?

The average documented online shopping cart abandonment rate for eCommerce is 69%. Seamless UX design can reduce cart abandonment greatly. The best-optimized checkout process has a cart abandonment rate of 20%.

How do fingerprint scanners work on phones?

Smartphone fingerprint scanners come in many different shapes and sizes. They’re important to utilize for eCommerce mobile app design. Similar to optical scanners, they generate an image of the ridges and valleys of a fingerprint, but instead of using light, the capacitors use electrical current.