Mobile UX: Avoid Using Subpages within the Product Details Page (26% Don’t)
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 constitute 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 worlds most comprehensive research study of mobile e-comemrce 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 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 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 280+ 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.
Based on the findings from the qualitative usability research study we’ve also benchmarked the full mobile user experience of 60 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 60 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.
Main Navigation & Categories
Mobile On-Site Search
Design & Logic
Mobile Product List Layout & Features
Mobile List Item Content
Mobile Product Pages
Layout & Features
Account Selection & Creation
Shipping & Store Pickup
Order Review & Confirmation
Mobile Site-Wide Features & Elements
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 Descriptions, 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:
Explore design patterns across 678 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 .
We’ve released a small subset of the Premium research finding on Mobile UX for free in these articles:
All 134 checkout research findings are available as part of Baymard Premium, and are divided into the following 17 topics (611 pages of research findings in total):
Get full access to all our Mobile E-Commerce UX research reports, mobile benchmarks, and page designs previewed here, along with our complete 700+ guidelines for Homepage & Category Navigation, Search, Product Listing, Product Details Page, Checkout, and Accounts & Self-Service. Utilize our 54,000+ hours of UX research to improve your mobile user experience and to document your UX decisions.
This research on Mobile UX is part of Baymard Institute’s full 61,000+ hours of large scale research catalog, which is based on:
Baymard’s research methodology is described in detail here.
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.