Five Tips for Designing Faceted Navigation for Your Website

Faceted navigation enables visitors to browse and find products quickly, especially on websites that have a large set of products. Before digging into some 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 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.

These categories 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 visitors 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 online seller should know these essentials to make the most out of their navigation functionality.

Faceted Navigation Tips

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

Use collapsible or expandable menus  — Make sure that visitors can see the maximum filters and can choose them 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 most popular “sub” attributes, such as individual price ranges, then hide them for other top level attributes, such as product review rating.

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

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.

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 easily change options if they choose. You can highlight their choices within the navigation menu by using breadcrumbs. Another idea would be to 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 in order to make adjustments and continuously improve the visitor experience.