UX Articles

E-Commerce Navigation: Show Sibling Categories for Easy Scope Adjustment (47% Get it Wrong)

Jamie Holst

Co-Founder

Published Oct 29, 2013

This is the 1st in a series of 8 articles on product finding that draw on findings from our recent homepage and category usability report and benchmark.

Sibling categories – that is, categories that are placed next to one another in the site’s category taxonomy – are hugely important as they enable users to make easy scope adjustments and better interpret the current scope.

During testing we often observed subjects who were unsure about the nuances of two or more categories. It’s in instances like those where sibling categories can offer a helping hand to the bewildered user – allowing them to easily switch back and forth between the different sibling categories and work out their exact boundaries by looking over the different product lists.

We often saw users try out one category first, only to realize that it wasn’t a great fit upon looking over the products within it, and then proceed to the next sibling category in the hopes for a better fit. Despite this fairly common and logical navigation pattern, which works well for finding product alternatives as well as supplementary products, only 53% of the major e-commerce sites support the behavior.

Crate & Barrel doesn’t show sibling categories so the user will need to navigate up the hierarchy just to learn what other sub-categories are available within the thematic “Living Room Furniture” scope.

When within a sub-category, 47% of the top e-commerce sites only display the product list and related filtering tools along with navigation options to go up the hierarchy (breadcrumbs, “back” links, etc), not allowing the user to navigate the categories laterally - 47% simply don’t display sibling categories. Not even when closely related product type categories are available.

It’s important to note that the purpose of displaying sibling categories on category pages next to the product list isn’t just to save the user a couple of clicks (going back up the hierarchy to the parent category and then selecting one of the other sub-categories). Their permanent presence provides the user with essential information scent.

H&M displays sibling categories with their tree-like navigation design. This enables the user to see the different fits of “Jeans” that are available on the site, so if the user isn’t happy with the products in the selected “Skinny” category, they can easily adjust their scope to e.g. “Slim”.

For example, if a user is within a “Shoes” scope on a women’s clothing site, and sibling categories such as “Boots”, “Pumps” and “Sandals” are displayed, the user can much more accurately deduce what will and won’t be included in their current category. The display of sibling categories furthermore informs the user about other related product types or variations that are available within their current scope.

Depending on the scope of the sibling categories, they can serve different purposes:

  • Product variation sibling categories – when the scope is a product type such as “Jeans”, the sub-categories may be things like fit such as “Skinny”, “Loose”, and “Straight”. This enables the user to find different variations of the particular product type, that is, browse different alternatives of the same type of product.
  • Product type sibling categories – when the scope is broader or thematic such as “Women’s Clothing”, the sub-categories will likely be different product types, such as “Dresses”, “Pants”, “Shirts”, and so on. This enables the user to find supplementary products, so after browsing “Pants” the user can easily go find a dress to go with them. This is particularly true of nested thematic scopes, such as “Women’s Clothing > Office Wear”.

The key benefit of displaying sibling categories is therefore the information scent they provide. This makes the user better informed about their current context and what options they have to adjust their current scope.

Sibling-categories naturally extend from IKEA’s horizontal navigation bar, making it easy for the user to infer their current location in the site’s hierarchy, and by virtue of that, better understand the scope of the selected “Single beds” sub-sub-category.

This makes sibling categories particularly valuable to users who landed on the page in a non-linear fashion (search engine, cross-navigation, social media link, etc) as they will need to try and work out where in the site’s hierarchy they’ve landed, what their options are, and what the boundaries are of those options – the exact benefits of displaying sibling categories. If a user is stuck, it similarly helps them adjust their scope instead of starting all over at the top of the navigation hierarchy.

So yes, sibling categories saves the user a few clicks (which is of course nice) but their real benefit is in the context they provide about the current page, its scope, and the general taxonomy of the product range. It’s therefore recommended to display sibling categories on all category pages next to the product list.

Jamie Holst

Co-Founder

Published Oct 29, 2013

Jamie is co-founder of Baymard and CTO. Jamie oversees all of Baymard's technical development and writes articles on general UX topics and on the intersection between technology & UX, like compatibility features, UI bugs, search logic, and how it impacts the end user experience.

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

Share:

User Experience Research, Delivered Weekly

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

A screenshot of the UX article newsletter