Discoverability and findability are two important terms that optimizers should be familiar with.
Discoverability is when you find the perfect book, even though you were not necessarily looking for it. Findability is when you find the exact book you were looking for, even if all you knew about it was the author’s last name.
eCommerce product filtering, when done right, can solve both issues.
What is eCommerce product filtering?
eCommerce product filtering helps your visitors narrow in on the specific product they’re looking for and find products they might be interested in based on certain features (e.g. size, color, category).
Product filtering is what allows your visitors to enjoy and appreciate your big product catalog instead of cursing it.
Why does it matter, anyway?
Everyone knows internal search is an important factor when it comes to product discoverability. Product filtering and internal search go hand-in-hand, both working towards a better UX. David Moth of Econsultancy explains…
If your product filtering is not optimized to be as useful as possible, there is only one outcome: your visitors will get frustrated and leave. If you want to make money, you need to make it as easy as possible for visitors to find products they want to buy.
What’s the current state?
All of this sounds incredibly simple, I know.
What might surprise you, though, is that recent research found that only 16% of major eCommerce sites (e.g. Nordstrom, Macy’s, Dell, Apple) provide users with a reasonably good filtering experience. So, in 2015, the best the top eCommerce sites in the world could do is “reasonably good”… 16% of the time.
Here are some other surprising data points…
- 42% of top eCommerce sites don’t have category-specific filter types for several of their main product categories.
- 20% of top eCommerce sites don’t have thematic filters despite selling products with obvious thematic attributes (season, style, etc.)
Some industries do product filtering better than others. Apparel, sports and hobbies, and electronics and office all lag behind the competition, falling under the “acceptable performance” mark.
Given that fashion-related products was ranked the most popular eCommerce vertical in 2015, product filtering is clearly an issue eCommerce sites are facing.
If you’re familiar with my articles, you know I like to mention Poo-Pourri as a shining example of what to do. Unfortunately, here’s the extent of their product filtering…
eCommerce Product Filtering Factors to Consider
Product filtering is highly contextual. The “perfect” combination will depend on your vertical, product catalog, visitors and a variety of other factors. However, there are some basic principles and guidelines that you can take into consideration.
Notice how almost none of the examples provided for individual factors take all of the factors into account. More proof that product filters just aren’t where they should be.
1. Indicate Product Quantity
Beside each filter, indicate how many products fall under it. For example…
Notice how they indicate the number of products that are red, purple, size 6, etc. Based on my research, this is actually quite common practice. Armando Roggio of D&B Supply thinks sites should be taking it a step further, though…
2. Hide Non-Existent Options
Consider returning zero products as a result of product filtering the equivalent of a 404 page.
For the visitor, it’s just plain frustrating. That visitor was excited see your selection of red and white striped summer dresses in size small. When you return zero products, she’s disappointed.
The result? Either she tries again or goes looking for someone who has a selection of red and white striped summer dresses in size small. Which do you think is more likely?
How can this be avoided? Once she’s selected striped summer dresses in size small, only show her the colors available. Don’t even give her the option of “red and white” or “red” and “white. It’ll save you both a lot of disappointment.
David explains why logic isn’t always enough…
3. Allow Multiple Filter Selections
Often, it’s one or the other with product filters. So, using the dress example, you wouldn’t be able to pick both “red” and “white” at the same time. There’d be no side-by-side comparison. Instead, you’d have to first view the red dresses and then view the white dresses.
Allowing multiple selections in the same category will benefit those with the comparison shopping mindset.
There’s no real downside. Either the visitor takes advantage of the multiple selection or they don’t.
4. Make Applied Filters Obvious
Just as we display breadcrumbs to show visitors what content they’re currently viewing, we display applied filters to show visitors what products they’re currently viewing.
As David explains, this is important because they may want to remove a filter to widen their selection…
Typically, this is done in one of two ways…
- In-line (e.g. a checkmark or a greyed box).
- Above the filtering options.
Neither is inherently better or worse. What matters is that the filters applied are clear and easy to remove with a click or two.
Rich Page, optimization consultant, adds that icons can be helpful for both attracting attention and helping those who are perhaps less informed with jargon, for example…
Here’s what Rich is referring to on GlassesUSA.com…
Someone who just started wearing glasses or who has always worn the same glasses might be confused by terms like “browline” and “wayframe”, so the icons are helpful.
5. Consider Factors Outside of UX
Whenever you think about UX, you have to think about SEO. Perhaps that’s not a sentence you’ve read before as the two practices seem fairly unrelated on the surface. The truth is they go hand-in-hand and often, when you’re making UX decisions, you’re making SEO decisions without realizing it.
Andy Crestodina of Orbit Media explains…
So, to summarize: talk to your developers about how your product filtering is affecting your search engine ranking. Whether you’ve had your current filtering system for years or you’re implementing it for the first time, consider the side effects carefully.
Don’t let SEO stop you, but do let it inform your UX.
6. Improve Mobile Filters, Too
Product filters on mobile devices are usually not a fun experience. The filters are too small for fingers (i.e. constant zooming in and out), there are too many filters, there are too few filters, the list goes on and on.
Searching for products on mobile is undeniably more difficult than searching for products on desktop. Filters should improve that, not make it worse.
Best Buy does mobile product filtering well. Here’s what you get when you tap “browse”…
You’ll select “Video Games” and go from there…
Filter after filter after filter. But with each step, you know you’re narrowing in on what you’re looking for. They all feel relevant and necessary to find the product you’re looking for…
Note that at every stage, you can opt out of the filtering process and just “See All Products”, so this process isn’t mandatory…
Finally, we end up with “Nintendo Wii U Games”. From there, we can sort by best match, price, etc. or even apply more filters if we want to narrow in on something even further…
Here’s what those additional filters look like…
Just enough filters to land you in a narrow-enough product category full of relevant content with the option to filter even further down if you’re not happy yet. Despite all of the screens, it was a quick experience (1:05 a.m. to 1:06 a.m.) because the filter labels were easy to understand.
7. It’s Not About Having the Most Filters
It’s not about having the most filters, it’s about having the most useful filters. Frankly, anyone can have a ton of filters. It almost defeats the purpose; instead of product overload, you have filter overload.
A common example of an eCommerce site that believes more is more? Amazon…
And it keeps going…
Actually, it even keeps going after that, but you get the idea.
If you do decide to go with a lot of filters, you can at least prioritize them so that they pop up at the most relevant moment. For example, some filters are collapsed by default if they are useful, but not as commonly used…
It simply makes the product filtering seem less overwhelming.
8. Beware of In-line Scrollable Areas
While this seems like it should be a thing of the past, in-line scrollable areas are alive and well thanks to product filtering. For example…
As you can see, both the “Brand” and “Binder Colour” filters are scrollable. When this happens, the UX usually suffers. Multiple points of scrolling? It brings back bad iframe memories from the early 2000s.
Instead, research shows that you should show a few values and then truncate…
Testing showed that 10+ filtering values require truncation — yet 32% of websites either have insufficient truncation design, causing users to overlook the truncated values (6%) or use what testing found to be even more troublesome, inline scrollable areas (24%).
9. Useful > Common
Useful is better than common. Still, many sites will choose product filters based on what’s common. For example, it would be difficult to find an apparel site that doesn’t use brand, size, color and price as their standard filters. Sure, those filters are helpful, but what about other filters that could be helpful?
There are product filters that would be useful to your specific audience or because of your specific product catalog. Don’t be afraid to use them, Rich explains…
But, of course, that doesn’t mean you can’t do some UX benchmarking to see how your usability stacks up against the competition’s…
What’s important is that you remember you’re comparing UX, not actual filters.
Since useful is better than common, it’s also important to personalize filters based on category, for example. Some product filters are more important for certain categories, some less. Some are not important at all. So, why show them?
Sites tend to use the same product filters across every category for the sake of simplicity, but UX would be improved with even just a touch of personalization.
Here’s an example of filter personalization done right…
I’m looking at rings, so I’m shown stone-related filters. In other product categories, these filters are not shown. Relevancy is a big part of usefulness.
10. Mind the Delay
As with most things optimization, speed is an important factor.
The time it takes for your products to load after a new filter is applied is crucial. First of all, if it’s slow, you’re just discouraging visitors from using the filters. Plus, there is plenty of research on the price of slow load times.
Since we’ve already written on speed extensively, I’ll simply suggest you read this article.
With only 16% of top eCommerce sites having “reasonably good” product filtering, there’s a lot of room for improvement. Even an inch of improvement could do wonders for discoverability and findability.
Here’s where you should start…
- Indicate the number of products that fall under each filter. The numbers should update as new filters are applied.
- Automatically hide any filters that will return “Sorry, your search did not match any products” style responses.
- Allow visitors to select multiple filters at once.
- Be clear about which filters are currently applied and make it easy to remove them.
- Consider the side effects of product filtering decisions, like SEO.
- Use filters to improve mobile browsing, not make it worse. Keep it minimal and use large filter buttons.
- Strive to have the most useful filters, not the most filters. If you have a lot of filters, collapse the less popular ones by default.
- Beware of in-line scrollable areas. Instead, show a few values and then truncate.
- Don’t just use the same filters as your competitors. Personalize the filters based on your unique site and catalog.
- Return the content quickly as new filters are applied.