During our year-long research study on Mobile eCommerce Usability at the Baymard Institute, we’ve identified 146 mobile usability guidelines and best practices. Design patterns and UX aspects that, in mobile usability testing of 19 leading mobile eCommerce sites, were consistently proven to perform the best.
Yet, when we benchmark mobile eCommerce sites, we find that several lack multiple of these core mobile UX components. In fact, it’s common for the average mobile eCommerce site to have just around half the conversion rate of the desktop site.
In this article, we’ll therefore cover 9 mobile eCommerce UX components and best practices, divided into 3 Basic, 3 Intermediary, and 3 Advanced. So there’s something for both new and well-established mobile commerce sites.
3 Basic Mobile Commerce UX Aspects and Best Practices
1. Honor Image Zoom Gestures
During Baymard’s mobile usability testing of eCommerce sites it was time and again documented that users on mobile devices try to use gestures such as double tap and pinch in an attempt to zoom product images. Yet we’ve found that 40% of mobile eCommerce sites don’t allow their product page images to be zoomed via such gestures. (Furthermore, 12% don’t support swipe gestures to change product images).
Users are made aware that they can zoom images via (the otherwise hidden) gesture features at Musician’s Friend – it’s only 50% of the mobile sites that do support zoom gestures that also inform their users.Bad practice: 40% of mobile eCommerce don’t allow their product images to be zoomed via gestures. Click To Tweet
While the user can get an idea of the overall visual appearance of a product from a large-sized image, they cannot properly inspect its material and texture, judge the build quality, etc. Mobile sites therefore need a product image zoom feature to allow users explore the details of the product. As there’s no web-convention for image zoom on mobile device, we see that sites should ideally support both tapping and pinching for image zoom – although just supporting one of them is much better than none.
2. Use Touch-Optimized Keyboard Layouts
Unlike physical keyboards, touch keyboards can be optimized for each form field the user has to fill out.
During usability testing, typos were much more common on sites that relied on the standard keyboard for numeric inputs, as seen on Grainger (left). Compare this to the 521% large keys when using an optimized keyboard (right).
Our usability test sessions showed vastly better performance on sites that utilized these purpose-built touch keyboards, especially for numeric inputs. For example, on an iPhone 6S, the size and hit area of the keys on the purpose-built numeric keyboard are 521% larger than the numeric keys on the normal touch keyboard, leading to vastly less typos. Yet Baymard’s benchmarking of mobile sites found that 54% fail to invoke optimized touch keyboards for either phone, ZIP code, or credit card form fields. (See this cheat sheet for a complete list of touch keyboard attributes).Typos were much more common on #eCommerce sites that relied on the standard keyboard for numeric inputs. Click To Tweet
3. Don’t Use Auto-Rotating Homepage Carousels
30% of mobile sites use auto-rotating carousels on their homepage despite auto-rotating carousels causing major issues on all touch devices. The test subjects repeatedly opened wrong slides or were disrupted while focusing on a specific slide. Not to mention that some subjects generally ignored the animating carousel content as they perceived it as an advertisement.
Source: L.L. Bean
Two versions of L.L. Bean’s home page: The first left version relies on a troublesome auto-rotating carousel, whereas the newer version to the right uses the well-performing pattern of simply displaying all the “slides” directly on the homepage.
While the performance and valid usage of auto-rotating carousels is debatable on desktop sites (trending towards negative) – auto-rotating carousels is a no-go on mobile. During mobile usability testing we observe that the lack of a mouse-hover state on mobile devices (and all touch devices) cause too many severe interaction issues to make carousels perform well (on desktop, the carousel can auto-pause on mouse-hover, making it significantly easier to control).30% of mobile sites use auto-rotating carousels despite auto-rotating causing major issues on all touch devices Click To Tweet
A better-performing alternative to carousels is simply to display the most important “slides” as static content on the homepage (as seen above, to the right).
3 Intermediary Mobile UX Aspects
4) Collapse Sign-In and Place ‘Guest Checkout’ at the Top
While Baymard’s mobile benchmark finds that 80% of mobile checkouts offer users the option to do a “Guest Checkout”, we also find that 88% of mobile checkouts utilize a page layout that has a very high risk of users overlooking the “Guest Checkout” option. Users overlooking the “Guest Checkout” option is as severe as not having the option in the first place – something which happened to 60% of the subjects during Baymard’s mobile testing.
Mockup source: Baymard
Due to the small screen and user focus towards empty form fields, the account selection step needs to collapse all 3 options “Guest”, “Create Account” and “Sign-In” to provide users with an overview – as shown in this mockup.
As our large-scale eye-tracking studies of checkout finds that form fields demand a disproportionate amount of users’ attention, the sign-in sections need to be collapsed, and the “guest” option placed at the top of the page. So instead of having 3 separate headers for “Sign-in”, “Create account” and “Guest checkout,” each with their respective fields shown, simply collapse all the content and show 3 clickable headers (illustrated in the first image to the left in the above mockup).88% of mobile checkouts utilize a layout that has a high risk of users overlooking the “Guest Checkout” option Click To Tweet
5) Disable Auto-Correct During Checkout
While invoking the correct touch keyboard type (see suggestion #2), touch keyboard optimizations go much beyond that. Specifically, the touch keyboard “auto-correct” often works very poorly for things like abbreviations, street names, email addresses, customer names, and similar words that are not in the dictionary.
Note here how Amazon fails to disable auto-correct from the “address line 1” field. This causes some users correctly typed address name to be overwritten by an auto-”correction”.
During Baymard’s mobile usability tests, auto-correction on this type of form fields led to numerous interruptions in the subjects’ flow. Even worse, these auto-corrections also resulted in a great deal of erroneous data being submitted, as many subjects completed their purchase without noticing a “correction” had taken place. Yet, 79% of mobile sites neglect to disable auto-correct during checkout.
To disable auto-correct for a form-field simply set: autocorrect=”off”#eCommerce sites should make sure to disable Auto-Correct during checkout! See why. Click To Tweet
6) Make the Cart Function as a ‘Save’ Feature
Because typing is so tiresome on mobile devices, a portion of users look for products on their smartphone, but then prefer to use a desktop device to complete their mobile-initiated orders. Baymard Institute’s quantitative study on M-commerce Usability reveal that 61% of all mobile users “sometimes” or “always” go to their desktop/laptop computer to complete their mobile orders instead of fiddling with the mobile checkout flow.
To support this user behavior – of continuing a mobile-initiated order on another device – it’s key that users are allowed to pick up their mobile cart in a desktop device later on. Yet, 78% of mobile sites have no such feature. A low-tech solution for doing so is via an “Email Cart” feature, which have the benefit of also doubling as a low-level wish-list feature.61% of all mobile users go to their desktop/laptop computer to complete their mobile orders. Click To Tweet
3 Advanced Mobile UX Aspects
7) Display Store Pickup Next to Shipping Options
This suggestion is specific for omni-channel eCommerce sites that offer “Store Pickup” or similar. In Baymard’s testing, up to 80% of mobile users wanting Store Pickup overlooked this option on sites that only displayed their Store Pickup option at the product page or in the shopping cart.
Both Toys’R’Us (first image, left) and REI (second image, right) offer store pickup – however Toys’R’Us however don’t show it in their shipping method interface (like 47% of mobile sites), making it highly unlikely that the majority users will discover this vital option.
Our mobile testing clearly revealed that users see Store Pickup as a direct alternative to home shipping, and therefore look in the shipping selector during checkout for the Store Pickup options. Despite this behavior, 47% of mobile sites do not display Store Pickup (and similar omni channel features) next to the regular shipping options.Bad practice: 47% of mobile sites do not display Store Pickup next to the regular shipping options. Click To Tweet
8) Allow Users to ‘Search Within’ ‘Currently Navigated’ Category
During Baymard Institute’s mobile eCommerce usability study they observed that more than 50% of users tried to “search within” their currently navigated category path, in an attempt to “filter the product list on my screen with a search query”. Yet, 94% of mobile eCommerce sites do not support such behavior – and will instead perform a site-wide search query.
Note at B&H Photo how users, having navigated to the Category “SLR Camera Lenses”, and then opting to search, are suggested to search within the currently navigated category.
During testing, the issues related to ‘search within’ behavior and site support thereof was observed to be the direct cause of site abandonments. The best way to support this behavior is to always suggest the user’s currently navigated path as a search scope in the auto-complete results, as seen above at B&H Photo.
Besides suggesting users to search within their currently navigated path via the search auto-complete, we also found two other solutions to perform decently in suggesting users to “search within navigated category”: a separate search field and a search scope (elaborated here).
9) Have the Homepage Visually Represent the Type of Products Users Can Expect to Find
When testing mobile users who were new to the tested site or had only moderate prior site experience, users relied heavily on the homepage content to determine the type of site they’d landed on. In fact, 70% of mobile users consistently scrolled up and down the mobile homepage – when landing on a new site to get an overview of their options.
This “scroll and scan” behavior of mobile homepages is problematic for 42% of mobile eCommerce sites, as they have a homepage design that visually feature only a very narrow set of product types. This makes it likely that these users will misinterpret the site selection as being overly narrow/more narrow than it actually is. This is much more of an issue on mobile site than on desktop sites, because on mobile site the main navigation will be collapsed, making the user much more likely to rely on the homepage content to establish their perception of the site’s product catalog.
Notice how both Williams-Sonoma and Amazon have a homepage the allow users to infer the breadth of the site’s product catalog on their initial “scroll & scan” of the homepage.This “scroll and scan” behavior of mobile homepages is problematic for 42% of mobile eCommerce sites Click To Tweet
The solution is however quite simple. We during testing observe that a minimum of 30-40% of the top-level categories should be represented via the homepage content – either directly as features categories or simply indirectly, by the homepage visuals used.
The 9 Mobile eCommerce Best Practices You Shouldn’t Overlook
While crafting the perfect mobile shopping experience will take more than this, these 9 points are a great starting points for both basic, intermediary and advanced mobile implementations – as we see a surprisingly high rate of non-compliance, despite being relatively simple changes for most site:
1. Honor Image Zoom Gestures (40% of mobile sites don’t)
2. Use Touch Optimized Keyboard Layouts (54% don’t)
3 Don’t Use Auto-Rotating Homepage Carousels (30% don’t)
4. Collapse Sign-In and Place ‘Guest Checkout’ at the Top (88% don’t)
5. Disable Auto-Correct During Checkout (79% don’t)
6. Make the Cart Function as a ‘Save’ Feature (78% don’t)
7. Display Store-Pickup Next to Shipping Options (47% of mobile omni-channel sites don’t)
8. Allow users to Search Within Currently Navigated Category (94% don’t)
9. Have the Homepage Visually Represent the Type of Products Users Can Expect to Find (42% don’t)
Lastly, if you’re after further mobile eCommerce design inspiration, we have published free access to 650+ categorized mobile page examples.