Promoting narrow scopes on the homepage (e.g., a featured subcategory or promoted filter, such as “Women’s New Arrivals” ) can help many mobile users access highly relevant product lists, without having to first dig through the category navigation or use search.
Indeed, providing immediate access to tailored lists of products can help alleviate some of the inherent problems of the mobile e-commerce experience.
Yet there’s a catch: if users fail to notice they’ve selected a scoped path, they can end up misinterpreting the product catalog entirely.
Our large-scale mobile usability research testing showed that, for some scoped paths, a subgroup of users will never notice that they’re viewing a narrow list of products (e.g., just “Kids’ picks for the holidays” instead of “Kids’ picks”).
Consequently, these users often abandoned the site, thinking that the site catalog didn’t have the products they were looking for.
Despite the seriousness of the issue, our benchmark shows that 58% of sites have paths on their mobile homepages that can be misinterpreted, leading to lost sales.
In this article we’ll discuss the following:
Our mobile checkout testing has shown that it’s crucial for field labels to be understandable when read out of context — for example, using the label “Billing Phone” instead of simply “Phone” — since many users have severe overview issues when attempting to complete checkouts.
Testing also revealed that users on mobile homepages and apps can similarly have overview issues when selecting a featured scope — for example, “Women’s > New Arrivals” — if the link to the featured scope fails to make it very clear that tapping on the link will result in a specific product list.
The consequences of this misunderstanding can be severe.
Multiple users during testing abandoned sites because they found the product selection unsatisfactory after tapping on a featured scope link on the homepage — yet they simply misunderstood where they were in the site hierarchy, and didn’t realize they were viewing a narrow product list.
Some users, even after spending several minutes within the scope, simply never realized they were viewing, for example, only the “New Arrivals” for women’s shoes — not all women’s shoes.
Consequently, when presented with only a handful of products, users will assume the site has a poor selection of the product type they are interested in and are likely to abandon.
Now, our desktop testing shows that users can be helped with getting started with their product browsing by suggesting scopes on the homepage. When users click a featured scope, they should arrive at a product list with the relevant filters preapplied (e.g., a “Women’s” scope with the “Shoes” and “New Arrivals” filters applied).
On mobile sites, however, the situation is slightly more complex, as testing revealed that some users will not notice that a relevant filter has been applied in the product list after tapping on a featured scope on the homepage.
Thus, these users don’t think to simply remove a filter to get a broader list of products — they misunderstand what products are actually available and assume the selection is much smaller than it really is.
It’s therefore not sufficient to simply preapply filters in mobile product lists after a user has tapped to view a featured scope — the narrow path has to be clarified upfront.
The observed misunderstandings of the site catalog doesn’t mean that scoped paths on the homepage must be avoided on mobile sites or apps.
Indeed, 2 design patterns were observed during testing that by and large helped users avoid the issue entirely.
Sites should display product categories on mobile homepages in order to help users infer the type of site they’ve landed on.
If the product categories are limited to top-level categories only, there’s much less of a chance that users will wind up in an overly narrow scope without realizing it.
Once users arrive at the product list or intermediary category page they can begin selecting subcategories or other, more narrow scopes. By navigating this way most will always have a good sense of where they are within the site hierarchy.
If deciding to provide access to subcategories or product lists with filters applied, then include the full scope in the link text.
This means that for many links both the category and subcategory names will need to be included — for example, have “Women’s New Arrivals” as the button microcopy, rather than “New Arrivals” as a header and only “Women’s” as the button microcopy.
In practice this means that, when linking to a scoped product list from the homepage, the link should never be a single word.
As testing revealed that users can’t be relied on to read headers or mentally connect the header text to the corresponding links or buttons, this level of specificity is required to ensure users don’t lose their place in the site hierarchy after tapping on a featured scope on the homepage.
Maintaining an overview of one’s place in the mobile site hierarchy is always a challenging proposition.
Testing has revealed that mobile users are simply more at risk of becoming disoriented compared to desktop users.
Thus, mobile users need more support when it comes to fixing their place in the site’s hierarchy (e.g., through well-implemented breadcrumbs).
On the homepage, users can be supported by either providing the full scope in homepage link text or linking only to top-level categories.
Including the full scope in homepage link text allows sites to continue offering ways to access tailored product lists, while at the same time this also allows users to maintain a solid sense of where they are on the site.
Despite this being an essential part of a well-designed mobile homepage, 58% of sites fail to provide the full scope in homepage link text — leading to unnecessary abandonments by users who think the site doesn’t have what they’re looking for.
This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com