Navigation
Navigation
Mobile E-Commerce UX
How do you design a user-friendly shopping experience for a 4-inch screen?
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. 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 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
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:
678 Categorized Mobile Design Examples
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 .
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:
When & How to Implement Interactive Swatches on Mobile Product Listing Pages
These Three (Popular) Approaches to Implementing ‘Live Chat’ are Often Highly Disruptive for Users
Mobile E-Commerce UX: Deemphasize ‘Install App’ Ads or Avoid Them Entirely
Mobile UX: Scale Product Images Proportionally in Landscape Mode (52% of Sites Don’t)
3 Strategies for Handling Accidental ‘Taps’ on Touch Devices
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
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):
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 54,000+ hours of large-scale UX testing & research)
UX Audit Service
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.
Test Methodology
This research on Mobile UX is part of Baymard Institute’s full 54,000+ hours of large scale research catalog, which is based on:
- 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).
- 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).
- In-lab eye-tracking testing.
- 8 quantitative studies with a total of 10,721 participants.
Baymard’s research methodology is described in detail here.