If your website contains a large amount of content that can be grouped in a variety of ways, Information Architecture (IA) design can be challenging. It can be difficult to devise one single structure that is flexible enough to meet the different priorities people hold and therefore the range of ways people want to browse. Faceted navigation can provide a valuable solution, as demonstrated by its quickly growing popularity on many sites, such as eBay and Amazon.
The basics of faceted navigation
What is faceted navigation?
Faceted navigation (often called filtered navigation) provides users with filtering options that allow them to explore a website by creating their own routes to information. Users can browse by selecting criteria that are of interest to them and most relevant to their own goals.
Why use faceted navigation?
Faceted navigation can be particularly helpful for websites where even a well-designed (IA) can be inefficient, such as when there is large quantity of content or there are many possible ways to organise the content. For example, in the case of ebay, products could be organised by factors such as brand, price and functionality. It can even be used for a sub-section of a site, such as news or events, provided it is clearly distinct from the global navigation.
How does it work?
Faceted navigation provides a deceptively simple interface for users to build complex data filtering as they browse, seeing the results of their refinement as they go. The navigation is built up from a series of facets, or filters, which simply allows the user to select a value for each attribute of the items. For example, facets of cameras could begin with their ‘brand’, for which values could be Cannon, Sony, Nikon…. Other facets could be ‘price’, with values such as £0-£100, £100-£200 and so forth; or ‘optical zoom’ with the values that include 2x, 3x, 4x. The user can then browse between these facets; for example, they could choose to view all cameras, or all Canon cameras with 4x optical zoom.
Where should I include faceted navigation in my site?
Faceted navigation is typically presented alongside search results in order to refine them. Studies have indicated that users find a combination of search and faceted browsing to be the most effective way of finding good results .
What functionality should I provide?
Here are some top tips on how to implement faceted navigation onto your site:
- Know your users - Understanding how your users want to find things will allow you to identify the best filtering options to suit them. Online surveys are ideal for collecting a large sample of audience goals. Alternatively, you can collect more detail in a smaller sample through user interviews. Make sure your research represents users with a broad range of goals to ensure you choose suitable options for each.
- Offer the right options – Users are likely to shop for different items in different ways. For example, when searching for cameras the user may want to choose price, brand, resolution and zoom, whereas a user searching for shoes may be interested in size, colour, material and purpose.
- Use immediately recognisable and familiar terms - Your navigation will only work if users understand the terms and associate them with the item they are looking for.
- Provide the flexibility to combine filters - For example, you can choose a size AND colour AND style, or just one or two filters. This is what differentiates the faceted navigation from a standard navigation menu.
- Prioritise the most popular filtering options - Arrange the filtering options so that the most commonly required filters appear first. Users will tend to notice the first few options more than those lower down in the list.
- Allow users to review and adjust their filtering options at any stage – This allows users to easily change their mind and explore different options. Generally it is better to present each selected facet separately with the option to cancel each individually, allowing the user to expand their query. Alternatively breadcrumb trails can be used to keep track and back up through facets arranged hierarchically, where each selection is dependant on the one before. For example: home > bedroom > furniture > wardrobes.
- Avoid dead ends and zero results - Because the user can combine multiple filters, there is always a possibility of returning no results, which is ultimately frustrating for the user. Do not display options which will lead to no results or make these options inactive. For example, on a browse of local council facilities, if there are no facilities within 5 miles, then don’t include a “less than 5 miles” filter.
How should I present faceted navigation?
Faceted navigation filters need to be arranged into logical groupings. For example, on a council website you may first present all the ‘location’ filters together and then the ‘date’ filters. The filters can be displayed in many ways, such as lists of links, checkboxes, dropdown lists or sliders. The format needs to be carefully selected to match the characteristics of the filter, to provide the right level of flexibility and to fit within the physical page space. Lists of links - When the user selects a link, the page reloads with that filter applied. Because big, well-known companies use this technique (including Amazon and eBay), users are likely to be familiar with it and understand how it works.
Checkboxes can be used as a simple and intuitive “include” or “don’t include” option but are also useful when the user can select more than one value. For example, to select the values silver AND green to find a necklace with either or both of those colours.
These limit users to selecting a single value only. Drop-downs use less vertical screen space than a series of links which can be helpful when there are lots of facets to display; however, the value options aren’t immediately visible without clicking the drop-down. They therefore shouldn’t be used unless it’s inherently obvious what the drop-down will contain, and they must also be labelled clearly.
Facet options concealed within labelled drop-down menus. Slider controls
these are appropriate only if there are many possible values on a continuous scale, such as price or distance. Sliders need an accessible alternative to using the mouse to adjust them.
Faceted navigation is an excellent choice to filter large quantities of data in a manageable way. However, there are many potential complexities and, poorly implemented, it can cause more trouble than it saves. Be sure to offer the user the right options based on user research, present the options appropriately, avoid situations where the user ends up with no results, and allow flexibility to amend the options. The resulting experience for your user will be seamless and efficient.