So with this in mind, here are nine ways to improve your product filtering…
Show the features selected in a breadcrumb trail
Breadcrumbs are commonly used to remind users of the route they’ve taken as they navigate through a website, but they can also be used to show product filter options.
John Lewis highlights each filter that shoppers have selected so they can easily click back in the process at any point.
Allow users to select more than one filter
Unless a shopper knows exactly what they’re looking for then they may want to filter on more than one option in the same category.
For example I may be a fan of both Armani and Diesel jeans so I want to compare both side by side.
Most sites allows this kind of filtering, but I was surprised to find that Selfridges only lets you search by one brand at a time.
Use filters to help solve problems
Most sites have filters for size and colour, but it can be useful to think of unique filters that are specific to your audience or product type.
This helps customers to find exactly what they’re looking for and also shows that you know what you’re talking about.
Clothing retailer Lands’ End has a filter for ‘Fit Solution’ on its swimsuit range, which includes things like ‘Flatten tummy,’ ‘Slim hips,’ and Enhance bust,’ which talks directly to its target audience and helps to build brand affinity.
Make it easy to add and remove filters
If a customer doesn’t get the product options they were hoping for then they’ll want to quickly modify the filter. Therefore it’s important to allow people to remove filters with one click.
Once you’ve applied a filter on House of Fraser’s site it can be removed simply by clicking the small cross.
Refresh the page quickly
Speed is a key factor in all aspects of ecommerce and product filters are no exception. In fact, research shows that a one second delay in page-load can cause 7% loss in customer conversions.
When a shopper applies or removes a filter they don’t want to be waiting around for results to load, so make sure your site search can cope.
Avoid returning no results
It’s logical that if a customer is too narrow with their product demands then their search risks returning zero products, but unfortunately shoppers don’t necessarily think logically.
A search that yields no results is likely to frustrate the user and may cause them to shop elsewhere, so it‘s a better idea to only allow shoppers to filter on options that you know are available.
In this example from Net-A-Porter, you can only filter on the three colours of handbag that are definitely available.
Similarly, House of Fraser lets the user know exactly how many product options it has in each category.
Give them loads of options
It’s impossible to predict exactly what your customers will be looking for so it’s a good idea to give them as many options as possible to help them narrow down their search.
Brand, colour and size are all fairly standard, but when searching for dresses on ASOS you are given 11 different options to help separate the wheat from the chaff.
Information such as ‘dress length’ and ‘sleeve length’ are incredibly useful for online shoppers as they obviously can’t try the dresses on, so it should go some way to helping limit the number of product returns.
Clarity of options
Having just praised ASOS for the number of search filter it gives to shoppers, it’s now time to slap the site back down for using weird options.
All copy should be written with the customer in mind so there no confusion over what is being communicated – the previous screenshot from Lands’ End is a great example of this.
But what exactly is ASOS getting at with its ‘Hat type’ options? I’ve asked around the Econsultancy office and we’re all baffled…
Put filters in collapsible menus
It’s unlikely that users will want to apply more than two or three filters at most, so you need to make sure they can hide the ones that aren’t relevant.
Collapsible menus allow shoppers to pick the filters that they need while ensuring the screen remains free of clutter.