Optimising your faceted navigation & search
With many ecommerce sites now offering thousands of products and variants, it’s more important than ever to help guide your customers to what they want as quickly and easily as possible, particularly those who only have a rough idea of what they want, or what you sell. Faceted navigation lets them explore several options within a category, product listings or search results page, honing their criteria using the facets and values provided, before finding exactly what they want. When implemented properly it’s a great tool in aiding conversions and improving the customer experience. Here's some essential features of faceted navigation that you should employ.
1. Use relevant options
What you sell will go a long way to determining the make up of your facets. Whilst some facets may be relevant across all of the products that you sell, others may be specific to a particular range of products. For example, price or customer rating (from on-site product reviews) may well be relevant across all items but other items may require specific facets to aid users. For example, TVs may well use specific filters such as brand, screen size (with a range of options), resolution etc…
These specific facets may need to change for many of the product types that you sell to ensure that they are relevant to that particular category of products.
2. Use common types and terms
It’s impossible to have a facet for every single attribute of every single product within a range, so think about what are the most important or most likely to be used facets that a visitor will want to filter results by, and use those to form the basis of your faceted navigation. There is no point creating a facet for every single attribute of a product as you may end up with loads of facets with only a single result, as well as hundreds of facets which would be completely unmanageable.
Not only that, try and help your visitors by using common terms for items and try not to confuse them with your internal naming types or rare acronyms. Think about industry standard naming conventions, what your competitors or the market leaders are calling things, common search terms used etc... There is no right way but it might be worth experimenting to see which terms work best and convert more.
3. Use ranges of values
It doesn’t make much sense to list every single value as an option within a facet as this may well produce a huge and unwieldy list with too many options, many of which will have only one result. This is where it may make more sense to use ranges which cover a spread of different options within a facet. Looking at the example of TVs again, it doesn’t make sense to list every single screen size as an individual value within the facet, as different manufacturers produce screens in different sizes and you could be left with a string of values like 15”, 16”, 17”, 18” etc… many of which may only have one result. It’s therefore more useful in this instance to use a range of sizes like 16”-20”, 21”-26” which each contain a number of results. Price is another common example where ranges are the only way in which to sensibly display facet values.
4. Use multi-tick facets
The main purpose of facets is to give users options, or a range of options, and allow them to refine or expand their choices depending on the results that are returned. This means that facets need to include multi-tick options both across and within filters. For instance, with the example of TVs, users need to be able to select both a single, or multiple brands and one range or multiple ranges of screen sizes at the same time enabling them to examine different size TVs from more than one brand at the same time.
5. Think about UI and UX
There are several ways of displaying facets including links, images, sliders, checkboxes, dropdowns and more, with no ideal solution. Often a combination of options may be the most effective way to display your facets but to a certain extent, how they are displayed will be determined by the type of data that is being returned and the number of options. However, the growth of mobile and tablet devices allied to the introduction of responsive web design means that the user interface and experience needs to cater for more than just a standard screen and mouse, and consider the prevalence of touchscreens.
With that in mind, we would recommend staying away from sliders as they are not particularly easy to use and are difficult to control accurately on touchscreen devices, particularly mobiles. We’d also suggest that dropdowns have a very limited use as they restrict users to a single choice, rather than offering the ability to select multiple values as previously discussed.
Device type may also be a consideration when determining how facets are displayed. Displaying every single facet and every single facet value may produce a very long list which would be completely impractical on most devices, so the use of expandable menus on each facet may be a good solution, or showing only the first five values of each facet which can then be expanded to show all gives users a clue as to what kind of values will be returned without displaying the whole list.
6. Logically sort values within facets
There are numerous ways to sort values within a facet and these will often depend upon the data that is being displayed. For example, brands may be displayed in alphabetical order from A to Z, price might be displayed in ranges from low to high, whilst rating may be displayed in stars from high to low. You may also choose to display values based on the most popular or number of results from high to low but this may seem illogical to users so be wary. There is no right or wrong way to display them but think logically about which works best for each facet.
7. Highlight the selected values within facets
We’ve already established that it’s really important to be able to select multiple values within a facet and as an extension of that, it’s therefore important that those selected values are highlighted in some way to show the user exactly what is currently being filtered on. There’s a few ways of doing this:
- Inline: This is the msot common approach and is usually represented by a tick in the relevant checkboxes or highlighted text for example
- Breadbox: This approach moves all selected facets into a holding area or "breadbox" in the order in which they were selected. They're normally shown and highlighted above the left navigation so the user can see exactly what facets and values they have current filtered their search by.
- Breadcrumb: In an extension of the common breadcrumb navigaiton, this approach adds additional items to the breadcrumb navigation as the user selects them. they often have an x next to them to enable them to be deselected at any point
When you have a large number of products it stands to reason that there is a large number of facet values and an even larger number of possible facet value combinations, sometimes running to hundreds of thousands. However when users are selecting different facet value combinations they expect the results of any changes to display almost instantly and any lengthy delay will result in a huge increase in bounce rates. Ensuring your site can respond quickly is crucial to increasing conversions and avoiding user abandonment.
9. Avoid '0 results'
As the main purpose of faceted navigation is to hone a user’s search down to just those items they are interested in, the greater the combination of facets that they select together usually means fewer results being returned, whilst selecting multiple values from the same facet will normally expand the number of results. However, in spite of this, all of the possible combinations need to be carefully mapped so that the user is never able to filter down to 0 results. This will only lead to a frustrated customer who is most likely to bounce from your site without converting.
10. Constantly improve it
Like most other elements on your website there is often room for improvement, testing and fine-tuning. Whether this is through physical user testing, analysis of data, A/B or multi-variant testing or any other method, you should always be monitoring and understanding how your customers use your site and whether the faceted navigation options that you offer are helping or hindering you.
11. Cover both products and content
With many leading sites now combining content, commerce and even community in some cases, its more important than ever to include both product pages and other content in your faceted navigation. For instance after a user carries out an on-site search, the results could display both products and content that match, with faceted navigation against each. This could include things such as FAQs, blog posts, articles, Q&As, videos, community users and much more.
12. Use pre-selected facets
One last option, albeit with limited usage, is the notion of pre-selected facets when a user visits a category or search results page. This is ideal for using on an in stock/out of stock facet and can be implemented to pre-select the in-stock facet so that users are not shown items that are out of stock by default. they have the option to uncheck it.
Find out more about the search and navigation options within tradeit