As users start navigating an e-commerce site via its categories, there are two main types of pages to display:
During our usability study, as subjects were presented with product list pages at the top levels of the navigation hierarchy, they were often unable to define and select an appropriate scope, ending up with either an unmanageable list or a too-narrow list as a result. The sites without intermediary category pages (i.e., all categories displayed a list of products) suffered greatly as the subjects made wrong selections or were unable to define an appropriate scope and were left with very broad category scopes displaying thousands of products to navigate and filter further.
An example of a well-designed intermediary category page. Notice how IKEA hasn’t implemented their 1st level “Living Room” category as a product list but instead displays a range of sub-categories to help the user select a more well-defined scope before displaying any products. During testing IKEA’s intermediary category pages gained many unsolicited positive comments regarding the navigation and had a high completion rate.
Other of the tested sites relied heavily on sub-category pages. But it turned out that the exact implementation details had a great impact on the subjects’ experience with the sub-category pages, ranging all the way from direct abandonments (due to poorly designed sub-category pages) to unsolicited appraisals for how simple and smooth the site was to navigate. In other words, sub-categories can be disastrous when implemented poorly and magnificent when implemented well.
Of the top e-commerce sites 62% currently use custom intermediary category pages in the first 1-2 levels of the site hierarchy - see 74 examples of intermediary category pages from our usability benchmark. However when evaluated on how usable these intermediary category pages are, 52% of them are likely to provide a sub-par user experience, as in; do more harm than good.
In this article we’ll examine the concept of custom intermediary category pages closer - based on the findings from the Homepage & Category usability study and subsequent benchmark of the top US e-commerce sites’ navigation.
During testing,intermediary category pages proved to be an excellent opportunity for promoting certain navigation paths, encouraging users to make a more deliberate path selection before displaying hundreds of products, and especially in assisting in making good scope selections.
While some users have a clear idea of exactly what product they want, others need inspiration and guidance and only make up their mind as they explore the site. They are undecided or don’t fully understand the sub-options, and want the most generic option to get a better understanding of their sub-options before making a scope selection. For these users, the intermediary category page – with thumbnail previews, longer titles, and maybe even descriptions of the sub-categories – will provide much-needed guidance that can help clear up selection ambiguity.
During testing of Toys’R’Us, the intermediary category pages helped the subjects visualize the categories with industry jargon naming, which would otherwise require considerable domain knowledge to fully understand and select between. Contrary, when testing sites where industry-jargon options were presented just as a text link, e.g. in a drop-down menu as seen in the right image of Go Outdoors, subjects had much greater difficulties decoding the options. Here a subject contemplated, “I have no idea what a ‘mummy bag’ is. Or these others. I’ll just select a completely random one here to see what happens”.
Especially for users who are unaware of industry jargon, any sub-categories with thumbnails and descriptions can help clear up otherwise ambiguous category titles. A title such as “Bridge Camera” becomes much more understandable with a thumbnail, especially if placed next to thumbnails of “Compact Camera” and “DSLR Camera” categories so the user can see the differences.
“Clothing” as a product list pages rarely make sense since nearly all users will still need to navigate at least one layer deeper in the hierarchy. This subject couldn’t find the right category for jackets, as it was called “Outerwear,” and therefore didn’t match the keyword she scanned the page for. Had the “Clothing” category been implemented as an intermediary category page instead of a product list, the subject would have been much more likely to discover the “Outerwear” category.
Industries with lots of category ambiguity, such as electronics and apparel, can often benefit from intermediary category pages where the options can be assisted by thumbnails and inline descriptions. Other industries that may benefit from intermediary category pages include verticals where the customer isn’t the end-user (such as toys and gifts), sites that cater to children who haven’t reached full reading proficiency, and international sites where the site language might not be the user’s native tongue and therefore commonly used terminology is less likely to be recognized.
More generally, intermediary category pages also have the benefit of being quite flexible in what type of content they can contain. Beside the obvious featured sub-categories with accompanying thumbnails, the intermediary category pages can also be used to promote various content and paths which can otherwise be difficult to feature prominently in an unobtrusive way:
Intermediary category pages should be used whenever further navigation or scope definition is needed before it makes sense to display a list of products to the user. Generally, intermediary category pages make the most sense in the one or two top layers of the hierarchy where the scope is often too broad to produce a meaningful product list.
At both Chemist Director and Macy’s, the use of an intermediary category page encouraged the selection of a more well-defined scope, and the thumbnails for the featured sub-categories helped the subjects quickly understand the differences between the sub-category options.
Unfortunately, intermediary category pages can also be overdone. There’s a very real danger in having intermediary category pages too low in the navigation hierarchy as it encourages users to select a further-defined scope, luring them into overly narrow product lists. This is also why it is important to have a “View all” link whenever you have intermediary category pages below the first level of the hierarchy, as you otherwise disable the user’s ability to get a complete overview of all products within a certain scope (even if it’s too broad to make much sense, users should still have the ability if they judge they are up to the task).
One should always remember that an intermediary category page is just a navigation page and holds little value in itself, so users will often feel they get a poor return on their click investment if they have to navigate through multiple layers of sub-categories before being able to even see some products. Yet, there are a few exceptions where having sub-categories pages lower in the hierarchy still makes sense.
Macy’s: The thematic category “Activewear” is too generic as it is simply a style / use-context category, so implementing it as an intermediary category page makes sense as nearly all users will want to define the overall type of activewear product. BestBuy: the very generic “Accessory” category was implemented as a sub-category and the subjects encountering this page scanned the long list of sub-category thumbnails to make the right scope selection for their continued product search.
There are two exceptions where intermediary category pages positioned lower than the first 1-2 levels in the hierarchy still make sense. These are categories which are thematic or style-based, and “Accessory” categories, both of which will need further scope definition before it makes sense to display product lists, as the product types would otherwise be too arbitrary. Especially, a generic “Accessories” parent category is a perfect candidate for being implemented as an intermediary category page, since the accessory sub-categories will often be furthermore ambiguous. Therefore, these benefit greatly from accompanying thumbnails and possibly a short description or another guide, such as a wizard or product finder, to get the user onwards along the right path.
Now to the negative observations. Despite intermediary category pages proving very effective for encouraging selections and clearing up selection ambiguity, some of the intermediary category pages that were tested performed very poorly despite being implemented at the very top level of the hierarchy and for accessory categories.
At this intermediary category page, there were so many featured sales and suggested filter-based paths (“Featured Brands”) that the sub-categories were pushed almost entirely below the page fold. As a result, the subjects encountering this page paid little attention to the sub-categories and focused intensely on the featured products, which were ambiguous for some, a good match for a few, and a poor match (and thus a dead end) for most.
When users land on an intermediary category page, they exhibit much of the same behavior as they do when landing on the homepage – they try to infer the category taxonomy, the breadth of what the particular category offers, and which path will suit them best. Therefore the intermediary category page often faces the same challenges as the homepage, such as instantly conveying the category contents and making the primary navigation path (the sub-categories) stand out among any featured promotions and products.
When implementing intermediary category pages, one should always place the sub-category options close to the top of the page since the very purpose of the page otherwise becomes unclear. While the notion that users never scroll below the fold is considered long dead by most, users still consistently rely on what is above the fold when forming their opinion about what they can do at a given page and what the site wants them to do on the page (confirming the exact same observations made during our M-Commerce and Checkout Usability studies).
While the first layer in the hierarchy didn’t lead to a product list, it still proved problematic as it didn’t prominently feature any sub-category options but only thematic and promotion based paths. For this subject, clicking the “Ladies” main navigation item from the homepage (left) resulted in a largely useless intermediary category page (right) as it didn’t feature any sub-categories to lead her toward the correct path.
“I’m buying in blind here”, a subject said in despair. “I’d just choose one of these, not really having any kind of overview”. At this intermediary category page, more than 50% of the subjects testing Pixmania completely mistook the purpose of the page when seeing a clear focus on specific products, believing this was in fact a product list. These subjects didn’t navigate beyond this page but ended up choosing one of the featured products, finding the selection at Pixmania very limited. Notice how the sub-categories are only available in the sidebar and therefore become secondary. Of course, it doesn’t help that the page is also split by poorly positioned ads and has sub-divided product lists.
While featuring specific products on intermediary category pages can be great, the focus on specific products should never be primary on an intermediary category page – fantastic offers or not – as it can lead to fundamental misconceptions of the entire site hierarchy, as seen in the Pixmania example where more than half of the subjects ended up believing the featured products on the intermediary category page represented the site’s entire camera selection.
Generally put, any intermediary category page which isn’t implemented as a product list page should have a main focus on assisting the user in making the right path and scope selection. This often means featuring the sub-categories as center content, close to the top of the page, and with each sub-category accompanied by a thumbnail and possibly a short inline description to provide information scent. Any featured filters, products, paths, help, and inspirational content can be a great addition, but these should be kept secondary.
Lastly, it is important to note that while the sub-categories should be featured as center content with thumbnails, also having a traditional category sidebar may be beneficial since a group of subjects strongly preferred navigating via text links, likely as a list of text links in close proximity is faster to read than 8-15 attention-demanding thumbnails. So while the traditional pure text sub-category sidebar is more boring and open to (mis)interpretation, it’s also more noise-free and easier to compare for the users who know the industry jargon. Having both will cater to both sub-groups and have the benefit of enabling the center content to only consist of featured or popular sub-categories, while still having the complete list in the sidebar containing the less frequented categories.
Showing the entire list of products contained in a top-level category often won’t make sense as the list will simply be too long and too generic – the scope must be further defined before a meaningful and manageable collection of products can be shown. Intermediary category pages solve this exact problem and should therefore be utilized in the 1-2 top levels of the hierarchy.
Alas, despite their obvious value, 38% of the benchmarked e-commerce sites don’t have any kind of intermediary category pages. Furthermore, in practice around half of the intermediary category pages currently found at e-commerce sites have sub-par implementations (usability wise). The two most important things to remember when designing intermediary category pages are to have a representative thumbnail for each featured sub-category, and to display the sub-categories as center content high on the page.
For additional inspiration see the 74 examples of intermediary category pages from our usability benchmark.
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” e-commerce navigation 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 info@baymard.com
MalloryDecember 3, 2013
Quote: “There are two exceptions where sub-category pages positioned lower than the first 1-2 levels in the hierarchy still make sense. These are categories which are thematic or style-based, and “Accessory” categories, both of which will need further scope definition before it makes sense to display product lists, as the product types would otherwise be too arbitrary.”
Another exception should be when the number of products in a (sub) category is huge. For example, our e-commerce clients often offer over 300 different printers under “Printers”, which are under “Office Machines” on a site selling pretty much everything to do with Office. While you can view all 300+ printers, we needed to subcategory them by type. On some shops printers is the 3rd level down.
Or would printer count as a theme? To me it’s a fairly clear product type, except like cameras and many other things, might just have too many specialties. There is a group of people who don’t care, they just want something cheap that prints, and another who needs something quite specific.
Christian, Baymard InstituteDecember 3, 2013
Hi Mallory,
Thanks for commenting.
Category taxonomy is a major topic, but generally put “printers” is a product type and should be a category. The “Printer Type” however (“Laser”, “inkjet”, “multifunction”, etc.) will often have product attributes shared across all types of printers and should therefore be implemented as filtering options within the generic “printers”-category.
This allows users to see “all printer”, combine filters (all “laser” + “multifunction”), or see just a list of specific printer types (only “laser”) and combine these lists with other filtering types (capacity, price, brand, etc.).
Christian, Baymard InstituteFebruary 2, 2017
For more on Category Taxonomy, and when something should be a category vs. a “product type” filter see both:
https://baymard.com/blog/ecommerce-over-categorization
and https://baymard.com/blog/promoting-product-filters
AshleyAugust 6, 2014
Great article! I am a firm believer in spending a large amount of time and energy to get the navigation, including all sub-navigation, correct before you can move on, as the navigation is the key to a customer being able to use your site.
One little nitpicky comment…. there is a typo in the last paragraph of the article. “The twp most important” should be “The two most important”. Minor thing, really. I just happen to be one of those people who is highly tuned to typographic inconsistencies and errors.
Christian, Baymard InstituteAugust 13, 2014
Glad you liked it, and thanks for letting us know about the typo. It’s fixed.