Articles

Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right)

Key Takeaways

  • Mobile users, like desktop users, often need a broad list of products to consider

  • Yet the mobile main navigation, with no hover option, limits what sites can do to provide access to the top layers of categories

  • Testing revealed that providing a “View All” option in the mobile main navigation is low-cost way for sites to meet this mobile user need — yet only 24% of sites implement this well

When it comes to getting broad product scopes, desktop and mobile users have different options available to them.

On desktop sites, users often have an option of getting a broad scope of products by selecting the top-level scope in the main drop-down navigation, an option that’s indicated to users by the hover cursor change.

On mobile sites, however, due to the lack of a hover state, sites have to determine whether a user tapping a main category should expand the subcategories within it, or take users to the landing page for the main category item (e.g., a broad product list or an intermediary category page).

In this article, we’ll discuss 3 ways identified from our large-scale testing and Premium research findings that mobile sites attempt to resolve this issue (which only 24% of sites get completely right, according to our e-commerce UX benchmark):

  1. A tappable header, with only the category or subcategory name as the microcopy
  2. Multiple hit areas within the main navigation items
  3. A tappable header, with “View All” in addition to the category or subcategory name as the microcopy

1) A Tappable Header, with Only the Category or Subcategory Name as the Microcopy

At Sephora, a user trying to access “All Makeup” can easily get stuck navigating down the catalog hierarchy, and wind up at an overly narrow product list that lacks many of the products they’re interested in.

One design pattern that can allow users to access a broader scope on mobile is to allow them to tap the header for the category they’re currently in.

For example, a user who has expanded the “Makeup” category and is seeing all of the “Makeup” subcategories can then also choose to tap the “Makeup” header to see all makeup products.

However, during testing participants failed to tap the header of the currently viewed category to get a broader list of products — even when participants wanted the broader list — when the header was simply the name of the subcategory (e.g., “Makeup”, “Tops”, etc.).

At Sephora, users can access a broader scope by selecting the current subcategory they’re in (e.g., when viewing the subcategories in the “Makeup” category, a user can tap “Makeup” at the top of the navigation to view all makeup products) — if they know to do that. Testing revealed that many users are unlikely to assume that the way to get a broad product list is to tap the top-level nav of the current category.

This clearly indicates that this tappable-header approach is overly subtle.

Many users are likely to assume that the subcategory header is simply there for informational purposes (e.g., “You’re within the ‘Makeup’ subcategory”), instead of intuitively knowing that the menu option can be tapped to access a category page or a product list for all the products available in the subcategory.

Indeed, many users will miss this “hidden” feature unless they happen to stumble upon it.

2) Multiple Hit Areas within the Main Navigation Items

At Perry Ellis, in the “Clothing” category, users can tap directly on the microcopy for “Tops” to see all tops, or can tap the arrow at the end of the “Tops” row to expand additional subcategories to consider. This extremely subtle approach of having multiple hit areas within each menu item will be lost on many users, who will therefore struggle to get a broad product list for a category they’re interested in.

Another approach is to have multiple hit areas within each item in the main navigation.

For example, users can tap a header to see a broad product list (e.g., tap “Tops” to see all tops), or they can tap an arrow at the end of the header row to expand subcategories (e.g., tap the arrow at the end of “Tops” to reveal “Dress Shirts”, “Casual Shirts”, “Sweaters”, etc.).

This implementation also leans heavily on a very subtle design — something in testing we observed will be lost on many users, either because they’re completely unfamiliar with the concept (and thus have to learn something brand-new while on the site) or because the concept is implemented inconsistently across sites (or even on the same site).

3) A Tappable Header, with “View All” in Addition to the Category or Subcategory Name as the Microcopy

Adidas includes a “View All” menu option at each layer in the hierarchy, ensuring users can easily access a product list containing all the products available in a particular subcategory.

What was observed to perform consistently well during testing was to have a “View All” menu item nested within every product category in the hierarchy.

For example, a site with the category “Women” and the subcategories “Clothing” and “Coats” would have a “View All” menu item at each level — thus, “View All Women’s”, “View All Women’s Clothing”, “View All Women’s Coats”. If product lists at the very top of the hierarchy would likely be overwhelming or unhelpful to users, then “View All” could take users to Intermediary Category Pages instead.

However, note that the key is to have the words “View All”, “See All”, etc. preface the name of the subcategory the user is currently in.

Implementations that simply read, for example, “Jeans”, instead of “See All Jeans”, will be overlooked by many users, who won’t understand that the header “Jeans” can be tapped to see the broadest “Jeans” path available.

This also means, however, that if the current implementation allows users to see all the products in a subcategory by tapping its header, then correcting this is as simple as adding the text “View All” or “See All” to all relevant headers.

Additionally, the “View All” option should be placed as the first menu item in the list (i.e., at the top), as testing revealed that placing it elsewhere made it harder for participants to find.

This is important because users looking for the broadest scopes will be unlikely to scan a complete list of detailed subcategories.

Furthermore, having “View All” at the bottom or in the middle of a list breaks with the typical information architecture for a nested hierarchy, where the parent item will always come before the children nested within.

Help Mobile Users Access the Most Relevant Product List

L.L. Bean includes “Shop All Outdoor Equipment” at the top of the “Outdoor Equipment” category — helping users looking for the broadest “Outdoor Equipment” list quickly access it.

Testing revealed that providing a “View All” menu item in the main navigation — which includes the words “View All” and which is placed at the top of the list — is critical to helping mobile users access the product list they’re looking for.

Otherwise, users may wind up in overly narrow scopes — and ultimately fail to find a suitable product.

Yet our e-commerce UX benchmark reveals that only 24% of sites get this implementation right, leaving their users without an important product list navigation tool.

Finally, some sites may think a solution to the issue of accessing broad scopes on mobile is to remove some of the lower layers of the hierarchy on the mobile site.

For example, a site that allows users to drill down 4 layers in the main nav on desktop reduces this to 3 or even 2 on the mobile site — essentially sending users to the bottom of the hierarchy sooner (where users see a bigger product list).

However, this is a poor implementation of the mobile UX.

Beyond being able to access the broadest scopes in all category levels, the main nav should still allow mobile users to keep drilling down the submenus, identical to how users can drill down in the desktop main navigation — as mobile users’ desire to see specific categories of products on mobile sites is no different than that of desktop users.

This article presents the research findings from just 1 of the 600+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

Authored by Edward Scott on November 16, 2022

Share:
If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Twice a Month

Join 37,000+ UX professionals and get a new UX article every second week.

A screenshot of the UX article newsletter