As users start navigating an e-commerce site via its categories, there are two main types of pages to display:
- The traditional and automatically generated product list page (displays products),
- A more custom sub-category page for encouraging further navigation (displays sub-categories).
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 sub-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.
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 sub-category pages in the first 1-2 levels of the site hierarchy - see 54 examples of sub-category pages from our usability benchmark. However when evaluated on how usable these sub-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 sub-category pages closer - based on the findings from the Homepage & Category usability study and subsequent benchmark of the top US e-commerce sites’ navigation.
Why Sub-Category Pages Are Good
During testing, sub-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 sub-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.
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.
Industries with lots of category ambiguity, such as electronics and apparel, can often benefit from sub-category pages where the options can be assisted by thumbnails and inline descriptions. Other industries that may benefit from sub-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, sub-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 sub-category pages can also be used to promote various content and paths which can otherwise be difficult to feature prominently in an unobtrusive way:
- Inline help, guides, and inspirational content (or links to where to find it), including image galleries, style guides, video channel, etc.
- Featured products which are likely to be particularly attractive (e.g., highly popular, time- sensitive, exclusive, or specially discounted products).
- Promotion of wizards, finders, and configurators.
- Vertical navigation paths and filter-based navigation (e.g., popular brands).
- Links to other relevant categories (cross-navigation).
When to Have Sub-Category Pages
Sub-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, sub-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.
Unfortunately, sub-category pages can also be overdone. There’s a very real danger in having sub-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 sub-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 a sub-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.
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. Especially, a generic “Accessories” parent category is a perfect candidate for being implemented as a sub-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.
Always Prominently Include Sub-Categories
Now to the negative observations. Despite sub-category pages proving very effective for encouraging selections and clearing up selection ambiguity, some of the sub-category pages that were tested performed very poorly despite being implemented at the very top level of the hierarchy and for accessory categories.
When users land on a sub-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 sub-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 sub-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 featuring specific products on sub-category pages can be great, the focus on specific products should never be primary on a sub-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 category page represented the site’s entire camera selection.
Generally put, any 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.
Sub-Category Pages Conclusion
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. Sub-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 sub-category pages. Furthermore, in practice around half of the sub-category pages currently found at e-commerce sites have sub-par implementations (usability wise). The two most important things to remember when designing sub-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.