While some customers will arrive at an e-commerce site with a clear idea of what they want, more will prefer to browse, so it is important to accommodate this user behaviour and make browsing for products as easy as possible.
Providing effective and relevant filtered navigation can make a huge difference to the customer experience; it reduces the amount of cognitive effort required of visitors, and makes it more likely that they will find a product that suits them.
I’ve been taking a look at how some UK e-commerce sites handle filtered navigation (or feature filtering, faceted navigation, whatever you want to call it), and providing a few tips…
The Get Elastic blog has some excellent creative examples of filtered navigation taken from websites from the US. For instance, on myShape, women can browse clothing collections on the site according to one of seven body shapes they are closest to.
Buzzillions makes great use of customer reviews by allowing users to drill into the detail. They can search by reviewer profile (technically challenged / tech-savvy etc), or by keywords that reviewers have used to describe products, such as reliability, speed of loading, and so on.
There are some other great examples in the post as well, though I haven’t manage to find many examples as creative as this on UK e-commerce sites so far (let me know below if I’ve missed any), but there are some sites that provide good basic filtering options:
This kind of filtered navigation is especially useful when shopping for potentially complex products like TVs, computers and mobile phones. This kind of product search requires a lot of filters to help users find the product that suits them best.
Comet provides a great example of this, simply by providing as many different product features as possible for customers to filter by. In this search for a laptop I have 11 different filtering options, which should enable me to reduce the hundred or so laptops on offer to a more manageable selection:
Filter includes product specifications like RAM, operating system, and screen size, along with other important factors for customers such as price and free delivery. The additional ability to filter by reviews can also be useful if you have no fixed idea of the laptop you want.
Also important here is the fact that the number of products in each feature set is shown in brackets, something which helps customers to narrow their searches without returning no results at all.
It is also vital that filters can be added and removed easily so customers can browse by different combinations of features. Here, filters can be removed with one click, and the results update instantly:
Compare the Comet site to a rival such as PC World to see the difference that good filtered navigation can make. PC World has fewer filters, which makes it harder to narrow down the search, and they are also less easy to add and remove. This means customers have to work harder to find products that suit them.
Interior design website mydeco has a large range of products available through its site (100,000+ just for bathrooms), so some effective filtering options are pretty essential to make it usable for shoppers.
Like Comet, mydeco displays the number of items in each category to help users return results, while the filters are smart enough to narrow down the search to a manageable size.
They are also well-suited to the kind of products the site is selling, allowing users to filter by size in this search for bedroom furniture, as well as using a colour chart to help users match the rest of the decor in their rooms.
Zappos recently introduced a similar feature allowing users to browse through shoes, and filter by colour as well as size, price range etc, and it is something that can make browsing much easier for customers, and can work well for fashion items.
This site makes hotel searches a little easier to narrow down with some very useful filters on the search results page. In this example for hotels in Paris, a search produces 1,688 results, which is too many to look through.
The filters here are very good, though my one criticism is that the results page can be slow to refresh after selecting each option. Alongside more obvious options like star rating and price range, users can narrow the search by a hotel’s proximity to a range of Paris landmarks, by the facilities offered (internet access, pool, restaurant etc) or by type of hotel (boutique, historic, and so on).
A few tips for effective filtered navigation:
Show the features selected in a breadcrumb trail
This will show shoppers the filters they have selected so far, and allow them a shortcut back to any
previous point in their selection history.
Make it easy to add and remove filters
Customers may add too many filters and end up with too few results. Making it easy to add and remove filters with one click as on Comet’s website means that customers can easily refine their searches,
Refresh the page quickly
Though I liked the filter options on Hotels.com, having to wait five seconds or more for the results to be updated can become frustrating. Making it as fast to load and user-friendly as possible will mean more customers will take the time to search.
Avoid returning no results
This can also be frustrating for shopper, so don’t allow customers to filter to the point where no relevant products are returned.
Present the customer with meaningful filtering options
Filter should be things that customers typically look for from the products in question. Do not just present data because it happens to be available for a product.
Show customers that they are making progress towards a purchase decision
This can be achieved in a number of ways; such as showing the number of products available for each available filter, and that these are reducing with each selection, or showing that the filters available are reducing and becoming more specific.
Make the filtering options suit the product
Filtering by colour makes perfect sense when looking for shoes, shirts or home furniture and accessories, but is less useful for TVs or laptops.
Make sure product metadata is accurate
essential to provide effective filtering, and users will lose trust in
the process if the filtering options they have selected return
inaccurate or irrelevant product results.