Mobile E-Commerce UX

How do you design a user-friendly shopping experience for a 4-inch screen?


A Research Study on ‘Mobile E-Commerce’

Mobile traffic has soared in recent years and now constitute 30-50% of all traffic on many e-commerce sites. However, it’s not uncommon for mobile e-commerce sites to have a significantly poorer conversion rate than their desktop counterpart – in some cases converting less than half as many visitors into customers.

This mobile usability study examines how the touch interface, the small screen, and user’s mobile behavior introduce a whole host of pitfalls to watch out for when designing and running a mobile e-commerce site.

Despite testing the mobile sites of some of the largest e-commerce players in the world, the test subjects encountered a staggering 1,000+ usability-related issues during the test sessions. These usability issues have been analyzed and distilled into 144 design guidelines on how to best design and structure a high-performing mobile e-commerce site, as well as documenting how end-users perceive and interact with mobile sites in a shopping context.

This page provides you an overview of our research specific to Mobile E-commerce UX.


The Current Mobile E-Commerce UX Performance

Based on the findings from the qualitative usability research study we’ve also benchmarked the full mobile user experience of 50 major US e-commerce sites. This comprehensive benchmark database with 678 mobile page types manually reviewed and annotated, provides you with 2,100+ categorized mobile screenshots and 3,600+ implementation examples of the 144 mobile e-commerce usability guideline.

The UX benchmark of the 50 major mobile e-commerce sites provides a clear picture of the general state of mobile e-commerce performance, and identifies common design flaws as well as strategic oversights and opportunities.

When looking closer at the average site’s mobile usability performance, we see a generally poor state of affairs. Notice how around half of all sites are performing downright poorly within all four themes, constituting a mobile shopping experience where users have great difficulties in finding, evaluating, and purchasing products – if able to at all. This observation aligns well with IBM’s report on mobile versus desktop e-commerce, documenting the average desktop conversion rate to be approximately twice as high as the mobile site conversion rate.

Mobile Product Descrtipions, Specs, & Images is the only area where a high number of sites perform good. For the topics of Homepage Navigation & Search, Product Page Layout, Cart, Checkout Information, and Form Field Usability, only relatively few sites can be considered “decent”. “Decent” here corresponds to an experience where most users are able to complete the purchase, but the experience and process towards that purchase is filled with detours, misunderstandings, and various annoyances.

Some of the overall poor and mediocre performance is simply due to mobile and touch platforms still being relatively new territory – compared to the two decades old desktop website. With most e-commerce sites still being somewhat in the “exploration stages” of mobile UX – as in; it is still being determined what mobile design patterns consistently works well and what doesn’t. Furthermore, we’ve also observed several mobile patterns being highly popular with designers and developers but completely breaking user behavior and expectations. It’s not just a new platform; there’s a lot of malpractice being popularized.

Lastly, and most importantly, the mobile platform is truly difficult to design for – the lack of screen real estate causes a dramatic loss of page overview for users. As a result, most of the best-performing solutions and patterns, including those identified in this study, are, in the end, still a compromise. They are the best attainable results given the severe limitations of the mobile platform.

Explore the current mobile UX performance in our:

E-Commerce UX benchmark


678 Categorized Mobile Design Examples

(free research content)

Explore design patterns across 678 page examples of mobile designs and features from leading e-commerce sites, all annotated and organized into 11 different categories.

This is a great way to get inspiration for your own mobile design, and to get a feel for emerging trends in Mobile e-commerce .

678 mobile page design examples


21 mobile e-commerce design and usability

We’ve released a small subset of the Premium research finding on Mobile UX for free in these articles:

See all 21 articles

In addition to these articles you may also want to explore our Touch keyboards cheat sheet – with a complete list of code attributes and demos to invoke the most optimal mobile touch keyboards for your users.


13 Research Reports on Mobile UX

(paid research content)

All 144 mobile e-commerce research findings are available as part of Baymard Premium, and are divided into the following 13 reports (445 pages of mobile research findings in total):

13 × Mobile E-Commerce Topics

Mobile E-Commerce

Mobile Homepage, Navigation, & Search

Mobile E-Commerce

Mobile Homepage, Navigation, & Search

12 Guidelines, 46 Pages

The mobile homepage, main navigation, and search, incl. how to design the main mobile navigation, creating easily scannable mobile homepage and category pages, mobile ‘no results’ pages, etc.

Mobile E-Commerce

Mobile Product Lists

Mobile E-Commerce

Mobile Product Lists

15 Guidelines, 48 Pages

Creating a balanced product list experience within the confines of a mobile screen, incl. how to design hit areas, information to include in list items, ‘Load More’ buttons, and making product list items nonselectable.

Mobile E-Commerce

Mobile Filtering & Sorting

Mobile E-Commerce

Mobile Filtering & Sorting

9 Guidelines, 27 Pages

Filtering and sorting product lists, incl. positioning and styling ‘Sort by’ and ‘Filter’ list features, sorting options to always offer, auto-submitting filters, and why not to use drop-downs for filtering options.

Mobile E-Commerce

Mobile Product Page Layouts

Mobile E-Commerce

Mobile Product Page Layouts

6 Guidelines, 19 Pages

Mobile product page layouts, incl. balancing users’ lack of screen real estate with the content-rich product page, when and how to collapse content, user reviews, primary buttons at the product page, and more.

Mobile E-Commerce

Mobile Product Descriptions, Specs, & Images

Mobile E-Commerce

Mobile Product Descriptions, Specs, & Images

13 Guidelines, 37 Pages

Secondary product information and specs, making product descriptions bite-sized and scannable, providing detailed views of the product, honoring image gestures, and more.

Mobile E-Commerce

Mobile Shopping Cart, Cost & Account

Mobile E-Commerce

Mobile Shopping Cart, Cost & Account

10 Guidelines, 28 Pages

Making the cart function as a ‘save’ feature, never showing fees and extras below the order total, always offering a ‘Guest Checkout’, how to design and sequence account selection options, and more.

Mobile E-Commerce

Mobile Checkout Information

Mobile E-Commerce

Mobile Checkout Information

15 Guidelines, 41 Pages

Showing cost and speed of all shipping methods, providing an ‘edit’ option whenever displaying user inputs, having ‘Billing Address’ = ‘Shipping Address’ as default, and more.

Mobile E-Commerce

Mobile Form Field Usability

Mobile E-Commerce

Mobile Form Field Usability

18 Guidelines, 55 Pages

Allowing both GPS detection and manual typing of location, clearing autocomplete upon refocus, never using inline labels, and providing formatting examples for all inputs with multiple formats.

Mobile E-Commerce

Touch Keyboards

Mobile E-Commerce

Touch Keyboards

5 Guidelines, 15 Pages

Disabling auto-correct where the dictionary is weak, showing appropriate keyboard layouts, honoring the ‘Next’ and ‘Previous’ button behavior, and consistently invoking keyboard layouts.

Mobile E-Commerce

Mobile Validation Errors

Mobile E-Commerce

Mobile Validation Errors

7 Guidelines, 24 Pages

Design, coding, and wording of messages, incl. providing an ‘edit’ option when displaying user input, giving helpful error messages, using front-end validation, and more.

Mobile E-Commerce

Tech Impact on Mobile UX

Mobile E-Commerce

Tech Impact on Mobile UX

9 Guidelines, 22 Pages

Technical errors and performance issues, incl. making pages and assets load fast, showing load indicators when actions are slow, avoiding blank error pages, and more.

Mobile E-Commerce

Mobile Basics

Mobile E-Commerce

Mobile Basics

15 Guidelines, 50 Pages

The fundamentals of mobile e-commerce, incl. click behavior and expectations, contextually aware sites, guiding the user, footer and help pages, and clickability and readability.

Mobile E-Commerce

Understanding Mobile

Mobile E-Commerce

Understanding Mobile

10 Guidelines, 33 Pages

Implications and fundamental differences between desktop and mobile websites, incl. content differences across platforms, rewarding clicks with adequate content, when to deviate from native form elements, and more.

Baymard Premium also gives you access to an additional 56 reports with 640+ research findings on topics such as Homepage & Category Navigation, Search, Product Listing, Product Details Page, Checkout, and Accounts & Self-Service - the complete set of findings from Baymard’s 32,000 hours of large-scale UX testing & research)


UX Audit Service

Get your mobile site reviewed

What are the 20 most important changes you can make to your mobile e-commerce site?

We will put together a detailed report of the 20 most important usability improvements you can make to your mobile shopping experience.

Get your mobile site audited


Test Methodology

This research on Mobile UX is part of Baymard Institute’s full 32,000 hours of large scale research catalog, which is based on:

  1. Usability Testing: 7 rounds of qualitative usability testing with 1,000+ test subject/site sessions following the “Think Aloud” protocol (in-person 1:1 moderated lab usability testing).
  2. 10 rounds of manual benchmarking of the world’s 60 top-grossing e-commerce sites across all 640+ UX guidelines across (27,900+ implementation examples and 50,000+ UX performance scores).
  3. In-lab eye-tracking testing.
  4. 7 quantitative studies with a total of 9,221 participants.

Baymard’s research methodology is described in detail here.