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.

Benchmark UX Performances
Poor
Mediocre
Acceptable
Decent
Good

Mobile E-Commerce

120 Guidelines

Mobile Homepage

8 Guidelines

Main Navigation & Categories

21 Guidelines

Main Navigation

6 Guidelines

Category Taxonomy

10 Guidelines

Category Pages

5 Guidelines

Mobile On-Site Search

18 Guidelines

Autocomplete

7 Guidelines

Query Types

4 Guidelines

Design & Logic

7 Guidelines

Product List

35 Guidelines

Mobile Product List Layout & Features

17 Guidelines

Mobile List Item Content

18 Guidelines

Mobile Checkout

25 Guidelines

Shopping Cart

4 Guidelines

User Info

8 Guidelines

Payment

4 Guidelines

Shipping & Store Pickup

3 Guidelines

Order Review & Confirmation

6 Guidelines

Mobile Forms

13 Guidelines

Form Fields

5 Guidelines

Field Validation

4 Guidelines

Input Optimization

4 Guidelines

60 Major E-Commerce Sites
What’s This?

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


24 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 24 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):

23 × Mobile E-Commerce Topics

Mobile E-Commerce

Mobile Homepage

Mobile E-Commerce

Mobile Homepage

10 Guidelines, 58 Pages

How to design a high performing mobile homepage, the opportunities it can provide to both new and repeat mobile users, homepage structure, carousels, personalization, promotions, etc.

Mobile E-Commerce

Mobile Main Navigation

Mobile E-Commerce

Mobile Main Navigation

6 Guidelines, 41 Pages

How to design the main mobile navigation, incl. the visual hierarchy, the levels of nesting, how the mobile nav. needs to differ from desktop, courtesy navigation, etc.

Mobile E-Commerce

Mobile Category Taxonomy

Mobile E-Commerce

Mobile Category Taxonomy

10 Guidelines, 72 Pages

The structural foundation of a mobile site’s product categories, including mobile information architecture, catalog breadth, and category naming.

Mobile E-Commerce

Mobile Category Pages

Mobile E-Commerce

Mobile Category Pages

5 Guidelines, 43 Pages

How Mobile Category Pages can guide users toward better-defined categories and products, how to use inspirational paths, featured products, and curated content.

Mobile E-Commerce

Mobile Search: Autocomplete

Mobile E-Commerce

Mobile Search: Autocomplete

7 Guidelines, 62 Pages

How the mobile autocomplete (aka ‘predictive search’) should be designed, the types of suggestions it should make, how it should align and differ to the desktop design, and more.

Mobile E-Commerce

Mobile Search: Query Types

Mobile E-Commerce

Mobile Search: Query Types

9 Guidelines, 84 Pages

Understand the 10 different types of search queries that users typically submit on mobile e-commerce sites, the nuances of how users really search, and how to best support it.

Mobile E-Commerce

Mobile Search: Design & Logic

Mobile E-Commerce

Mobile Search: Design & Logic

14 Guidelines, 82 Pages

The mobile search results logic and mobile search designs that perform the best with users, mobile ‘no results’ pages, field design, search submit, search iteration flows, etc.

Mobile E-Commerce

Mobile Product List Layout & Features

Mobile E-Commerce

Mobile Product List Layout & Features

17 Guidelines, 127 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, indicating product variations, etc.

Mobile E-Commerce

Mobile Filtering

Mobile E-Commerce

Mobile Filtering

9 Guidelines, 16 Pages

How to design mobile filtering interfaces so that users can quickly and efficiently choose filter options that help them narrow down the product list to suitable selections.

Mobile E-Commerce

Mobile List Item Content

Mobile E-Commerce

Mobile List Item Content

18 Guidelines, 134 Pages

How information to include in Mobile List Items, formatting and displaying info, what product thumbnails to display and how to design them, making products easy to compare, etc.

Mobile E-Commerce

Mobile Product Pages

Mobile E-Commerce

Mobile Product Pages

7 Guidelines, 54 Pages

Mobile product page UX, including the optimal layout that addresses users’ lack of page overview, how to best design product page features and content, incl. image gallery, user reviews, descriptions, spec sheets, etc.

Mobile E-Commerce

Mobile Product Pages: User Reviews

Mobile E-Commerce

Mobile Product Pages: User Reviews

17 Guidelines, 48 Pages

How to ensure that the user reviews section of product pages leverages the power of ratings and reviews, and allows users to get an accurate and quick impression of others’ assessments of products.

Mobile E-Commerce

Mobile Checkout: Shopping Cart

Mobile E-Commerce

Mobile Checkout: Shopping Cart

4 Guidelines, 40 Pages

The mobile shopping cart page, incl. mobile cart design, quantity and save features, estimating order total, displaying fees, etc.

Mobile E-Commerce

Mobile Checkout: Account Selection & Creation

Mobile E-Commerce

Mobile Checkout: Account Selection & Creation

7 Guidelines, 40 Pages

How to best optimize guest-checkout for mobile devices, incl. account sign-in and password fields, along with account createion. signing up for an account.

Mobile E-Commerce

Mobile Checkout: User Info

Mobile E-Commerce

Mobile Checkout: User Info

9 Guidelines, 57 Pages

How to best handle the form fields for all personal user data on mobile, incl. privacy concerns, addresses, international addresses, phone fields, auto-detection techniques, etc.

Mobile E-Commerce

Mobile Checkout: Payment

Mobile E-Commerce

Mobile Checkout: Payment

12 Guidelines, 28 Pages

The payment methods interface, how to display 3rd party payment methods, the many nuances of creating high-performing credit card form field on mobile, and more.

Mobile E-Commerce

Mobile Checkout: Shipping & Store Pickup

Mobile E-Commerce

Mobile Checkout: Shipping & Store Pickup

7 Guidelines, 22 Pages

The shipping and store-pickup designs that perform the best on mobile, including displaying and describing shipping costs and speed, how to display store pickup, etc.

Mobile E-Commerce

Mobile Checkout: Order Review & Confirmation

Mobile E-Commerce

Mobile Checkout: Order Review & Confirmation

9 Guidelines, 42 Pages

Mobile order review steps and confirmation pages, incl. how users review their order info, how they can best edit it, along with what to include on order confirmations.

Mobile E-Commerce

Mobile Checkout: Layout and Features

Mobile E-Commerce

Mobile Checkout: Layout and Features

2 Guidelines, 17 Pages

All layouts and features that are used throughout the mobile checkout flow, including load indicators, primary buttons, the overall checkout design, etc.

Mobile E-Commerce

Mobile Forms: Form Fields

Mobile E-Commerce

Mobile Forms: Form Fields

10 Guidelines, 56 Pages

How mobile form field nuances can either aid or hinder mobile users’ checkout completion, in particular how form fields should be labeled, marked, and placed within mobile checkouts.

Mobile E-Commerce

Mobile Forms: Field Validation

Mobile E-Commerce

Mobile Forms: Field Validation

8 Guidelines, 46 Pages

How to ensure mobile users don’t get stuck when they run into a validation error, incl. writing helpful error messages, how to position error messages on mobile, how users correct info, how to design address validator alerts, etc.

Mobile E-Commerce

Mobile Forms: Input Optimization

Mobile E-Commerce

Mobile Forms: Input Optimization

8 Guidelines, 35 Pages

How sites can greatly optimize the mobile form-filling experience for users, through field simplificaiton, smart defaults and autodetections, incl. all touch keyboard optimizations.

Mobile E-Commerce

Mobile Site-Wide Features & Elements

Mobile E-Commerce

Mobile Site-Wide Features & Elements

19 Guidelines, 125 Pages

How to design site-wide mobile features that perform well with users, incl. ‘Install App’, ‘Save Product’, location requests, overlay dialogs, ‘live chat’, footer sections, etc.

Baymard Premium also gives you access to an additional 56 reports with 680+ 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 49,000+ hours of large-scale UX testing & research)


UX Audit Service

Get your mobile site reviewed

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

We will put together a detailed report of the 30 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 49,000+ hours of large scale research catalog, which is based on:

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

Baymard’s research methodology is described in detail here.