Research Topic

Mobile E-Commerce UX

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

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

At Baymard we’d conducted the world’s most comprehensive research study of mobile e-commerce UX - spanning more than 20,000 hours only testing mobile user behavior. This mobile usability study examines how the touch interface, the small screen, and users’ 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 50+ of the largest e-commerce players in the world, the test subjects encountered a staggering 3,600+ mobile-related usability issues during the test sessions. These usability issues have been analyzed and distilled into 340+ mobile UX 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. All of this research is available as part of Baymard Premium.


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 93 of the largest US and European mobile sites. This provides you with 9,000+ worst- and best-practice mobile UX examples, and 12,300+ mobile UX performance scores.

The UX benchmark of the 93 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.

 

The Mobile E-Commerce UX performance for the average top-grossing US and European e-commerce site is “mediocre”, with none of the mobile sites benchmarked having a “decent” or “good” UX implementation and performance. This leaves nearly all sites in a tight cluster of 52% “mediocre” (or worse), and 48% “acceptable”. That said, while there aren’t any standout performances, there are also very few “poor” or outright broken experiences.

In comparison, in most of the other e-commerce UX studies we’ve conducted at Baymard Institute the average UX performance also amounts to “mediocre”, but also tends to have a wider spread of variation and performance scores.

This benchmark dataset thus shows that there’s ample room for improvements when looking within the specific topics of the mobile user experience — in particularly the UX within Mobile Homepage, Mobile Main Navigation & Categories, Mobile On-Site Search, Mobile Forms, and Mobile Sitewide Features & Elements. These topics carry issues for many sites, and also include some “missed opportunities” for the e-commerce industry as a whole. Also, note that this is an analysis of the average performance across 244 top-grossing US and European e-commerce sites. When analyzing a specific site there’s nearly always a handful of critical UX issues along with a larger collection of worthwhile improvements — this is the case even when we conduct UX audits for Fortune 500 companies.

In Baymard Premium we provide an in-depth walkthrough of the UX performance and competitive landscape within the 31 topics of Mobile E-Commerce UX, along with “missed opportunities” to be extra alert to.

Lastly, and most importantly, it’s worthwhile mentioning that 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 described in this article). 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 provide the best attainable results and mobile UX given the limitations of the mobile platform.

This is a sub-set of the full benchmark which includes 244 e-commerce sites.
View our full UX benchmark


949 Categorized Mobile Design Examples

FREE RESEARCH CONTENT

Explore design patterns across 949 page examples of mobile designs and features from leading e-commerce sites, all annotated and organized into 17 different page types. 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 .

Homepage
57 Examples

Navigation Menu
139 Examples

Category Page
35 Examples

Product List
57 Examples

Filtering Options
30 Examples

Search Field
60 Examples

Search Autocomplete
56 Examples

Search Results
59 Examples

Product Page
57 Examples

Cart
57 Examples

Shipping Address
59 Examples

Shipping Method
64 Examples

Billing Address
9 Examples

Payment Method
62 Examples

Review Order
39 Examples

Order Confirmation
58 Examples

Browse all design examples


85 Research Articles on Mobile E-commerce UX

FREE RESEARCH CONTENT

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


31 Research Reports on Mobile UX

PAID RESEARCH CONTENT

All 340+ mobile UX research findings are available as part of Baymard Premium, and are divided into the following 31 topics (2,020 pages of research findings in total):

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Homepage

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Homepage

10 guidelines, 61 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 Web and Native App) Topics

Mobile Main Navigation

Mobile E-Commerce (Mobile Web and Native App) Topics

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 Web and Native App) Topics

Mobile Category Taxonomy

Mobile E-Commerce (Mobile Web and Native App) Topics

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 Web and Native App) Topics

Mobile Category Pages

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Category Pages

5 guidelines, 44 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 Web and Native App) Topics

Mobile Search: Autocomplete

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Search: Autocomplete

7 guidelines, 63 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 Web and Native App) Topics

Mobile Search: Query Types

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Search: Query Types

9 guidelines, 83 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 Web and Native App) Topics

Mobile Search: Design & Logic

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Search: Design & Logic

23 guidelines, 92 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 Web and Native App) Topics

Mobile Product List Layout & Features

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product List Layout & Features

19 guidelines, 119 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 Web and Native App) Topics

Mobile List Item Content

Mobile E-Commerce (Mobile Web and Native App) Topics

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 Web and Native App) Topics

Mobile Filtering & Sorting: Interface, Layout, & Results

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Filtering & Sorting: Interface, Layout, & Results

11 guidelines, 101 pages

This topic covers how to ensure users can find the mobile filtering and sorting interfaces, how to design the interface to make it easier to locate filter types and options of interest, and how the process of applying filters and sorting options differs from the desktop process.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Filtering & Sorting: Filter & Sort Types

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Filtering & Sorting: Filter & Sort Types

13 guidelines, 122 pages

This topic covers which filtering and sorting types users need to organize and narrow down product lists to a manageable selection, including filtering by price, user ratings, compatibility, themes, ‘New Arrivals’, ‘Sales’ or ‘Deals’, and more.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Layout

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Layout

6 guidelines, 103 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.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Images & Videos

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Images & Videos

12 guidelines, 121 pages

How mobile users rely on images and videos on the product page, the different product image types users generally need, the amount of images needed, and how large sites can approach some of the image sourcing.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Image Gallery

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Image Gallery

8 guidelines, 57 pages

How to design a high-performing mobile image gallery that serves as the perfect container for the product images, incl. how to present additional images, the overall layout of the mobile image gallery, and the required detail and size of product images within the gallery.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Shipping, Returns, & Buying

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Shipping, Returns, & Buying

16 guidelines, 113 pages

The best-performing designs on the product page for displaying shipping and return info, including how to present offers of “free shipping”, delivery date, as well as price and discount info, gifting options, and “Find in Store” features and quantity displays.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Variations

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Variations

8 guidelines, 75 pages

Products that come in multiple variations have a unique set of requirements for how variations are technically handled by the site.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Descriptions & Specs

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Product Descriptions & Specs

15 guidelines, 20 pages

This topic discusses how users engage with product descriptions and spec sheets, the best-performing designs to display product information, what information should be included, and where that information should be placed.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: User Reviews

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: User Reviews

18 guidelines, 147 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 Web and Native App) Topics

Mobile Product Pages: Cross-Sells

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Product Pages: Cross-Sells

8 guidelines, 69 pages

The vital role of cross-sells-sells and cross-navigation in users’ overall success at locating desired products, including cross-sell design, placement, and logic, and cross-navigation elements like breadcrumbs, recently viewed, parent category links, etc.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Shopping Cart

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Shopping Cart

9 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 Web and Native App) Topics

Mobile Checkout: Account Selection & Creation

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Account Selection & Creation

7 guidelines, 37 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 Web and Native App) Topics

Mobile Checkout: Gifting Flow & Features

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Gifting Flow & Features

5 guidelines, 24 pages

How the checkout flow and fields need to change when users gift-mark items, where and how users should be able to gift-mark items, and how the actual gifting features needs to be presented to avoid issues.

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: User Info

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: User Info

13 guidelines, 63 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 Web and Native App) Topics

Mobile Checkout: Payment

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Payment

14 guidelines, 70 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 Web and Native App) Topics

Mobile Checkout: Shipping & Store Pickup

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Shipping & Store Pickup

10 guidelines, 52 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 Web and Native App) Topics

Mobile Checkout: Order Review & Confirmation

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Order Review & Confirmation

9 guidelines, 58 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 Web and Native App) Topics

Mobile Checkout: Layout and Features

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Checkout: Layout and Features

8 guidelines, 20 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 Web and Native App) Topics

Mobile Forms: Form Fields

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Forms: Form Fields

12 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 Web and Native App) Topics

Mobile Forms: Field Validation

Mobile E-Commerce (Mobile Web and Native App) Topics

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 Web and Native App) Topics

Mobile Forms: Input Optimization

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Forms: Input Optimization

12 guidelines, 40 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 Web and Native App) Topics

Mobile Site-Wide Features & Elements

Mobile E-Commerce (Mobile Web and Native App) Topics

Mobile Site-Wide Features & Elements

22 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.


Subscribe to Baymard Premium to access all of our Mobile UX research

Get full access to all our Mobile E-Commerce UX research reports, mobile benchmarks, and page designs previewed here, along with our complete 650+ guidelines for Homepage & Category Navigation, Search, Product Listing, Product Details Page, Checkout, and Accounts & Self-Service. Utilize our 130,000 hours of UX research to improve your mobile user experience and to document your UX decisions.

Learn more about Baymard Premium


Test Methodology

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

  • Usability Testing: 25 rounds of qualitative usability testing with 4,400+ test subject/site sessions following the "Think Aloud" protocol (in-person 1:1 moderated lab usability testing).
  • Manual benchmarking: 54 rounds of benchmarking the world’s 244 top-grossing e-commerce sites across all 650+ UX guidelines (150,000+ implementation examples and 225,000+ UX performance scores).
  • In-lab eye-tracking testing.
  • Quantitative studies: 11 studies with a total of 18,397 participants.

Baymard’s research methodology is described in detail here.


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