Five Tips for Designing Faceted Navigation for Your Website

May 19, 2016

Easy-Navigation

Faceted navigation enables shoppers to browse and find products quickly, especially on websites that have a large set of products. Before digging into the design tips, let's first define facets.

What are facets?

A typical website has an over-arching category/sub-category structure that visitors use to navigate the website and find products. For example most apparel sites have top-level categories such as Men’s and Women’s and subcategories such as Shoes, Accessories, Shirts etc. Categories and subcategories are hierarchical and the location of an item is determined by where it lives in the tree structure of the website. 

Facets make it easier for shoppers to find products by turning item attributes into navigable “categories,” such as size, color, style, and price. Faceted navigation reflects the fact that people shop for items in a number of different ways and it allows users to narrow the product results by multiple values.

Faceted navigation is increasing in importance and every website owners should know these essentials to make the most out of faceted navigation.

Faceted Navigation Tips

1) Use relevant options — The attributes or facets used for each product should be relevant to the product and important to the shopper. You can look at competitor sites and the websites of industry leaders to gain insights into the facet and filter options that are right for your website. Also be sure to use your analytics to determine whether or not individual facets are being used and adjust your navigation options accordingly.

2) Use collapsible or expandable menus — Make sure that shoppers can see the maximum filters and can choose without having to drill down into the navigation. An important consideration is whether to display or hide options by default. A common approach is to expose the post popular “sub” attributes, such as individual price ranges, and hide them for other top level attributes, such as product review rating.

3) Let users choose multiple facets — Customers should have the option to choose from more than one filter within a single facet. For example, the shopper may have already short-listed two or three brands that sell the same product, but they want to compare price ranges and product features.

4) Avoid no results — Facets should only be displayed in the navigation if they are relevant to the category/sub-category or search query. For example, if you have sell men’s apparel and in-seam is one of your attributes, you wouldn’t display it when the consumer has searched for shoes. 

5) Display selected facets in the navigation — Make sure customers always have a visual indicator that allows them to check their location within the site and to change options easily. You can highlight their choices within the navigation menu by using breadcrumbs or you can display them in a dedicated location or “breadbox,” which highlights the selected facets separately.

In addition to these tips, you’ll want to constantly collect data on how your customers are using the facets and filters to make adjustments and continuously improve the customer experience.