0

I'm working on the search page of a site. Filter options are available on the left-hand panel.

Filter options

When the user ticks a box, the filter options are updated. I'm wondering what is the best way to handle filters that would not return any result:

  1. Remove those filters as they aren't relevant anymore.

  2. Disable and grey out those filters to keep consistency (see below an example).

Yelp - Disabled filter

  • 1
    I recommend graying out the filter with no results. This provides for a consistent approach as detailed by the answer below. Changing the interface is a poor user experience. – DarrylGodden Jul 14 '14 at 12:01
3

There are several reasons that if your facetted search is very open, more like a network of combined selections, that you should leave empty filters visible.

Consistency

You are better off disabling the filters so the interface retains consistency throughout the interaction. If there are always the same set of filters then the user can learn the interface more quickly and navigate it faster. If the option set is constantly changing as things are added and removed then there will never be a consitent set of filters. Repeat customers will appreciate this sort of consistency.

Empty filters still impart information

Just because there are no results right now for a particular filter doesn't mean the user gets no information from that filter being visible. They may notice it is off an realise that actually they need it on so unclick something they already clicked in order to reactivate it.

For example, I like Brand X, so I click the Brand X filter, but then Brand X don't have any golden widgets right now, so I decide I'll just look at golden widgets. If the golden widgets filter is not there, clearly displaying its lack of results, it's harder for me to deduce that that is the case.

Hiding a clicked option

You also need to consider what to do if a user creates a set of conditions that result in a clicked option being hidden. Say I like Brands X and Y, so I click them. I see golden widgets, so I click that too, resulting in one of the brands returning no results. I still need the interface to communicate to me that that brand is still clicked and that there are no results. Removing it entirely as a result of a click elsewhere on the screen is not a good interaction path.

The current pattern used in many big sites is to leave the filters in place, grey them out if they return no results and sometimes using scroll boxes (ASOS) or popups (ebay) to allow the whole list of options to appear (I suspect that is a problem you are encountering for which the solution may have appeared to have been removing filter options entirely).

Another thing to consider is to provide a count for results, letting the user know how rich a result set is before clicking on the button and triggering a possibly quite heavy query.

Some further reading ... http://www.uxmatters.com/mt/archives/2009/09/best-practices-for-designing-faceted-search-filters.php

0

Greying option is much better. This shows that you have such filter option on your website, but it's working in current set of filters. It can say more about things you sort.

For example: you search some notebook to buy. When you set price filter form 0$ to 1000$, you can see that Apple filter option is grey and you decide that:

  1. This online show has apple products
  2. They all cost more that 1k bucks.
0

I've seen sites that employ a more "positive" spin. Instead of hiding filter criteria that won't return a result, they initially feature only the top 5 (or so) most popular filter criteria. The user always has to click "See all filters" to get the full expansion, but most users find what they want in the popular list. It's one way of driving your clients to make certain choices, if that's part of your model.

It's also common to follow each filter with the number of results it would return, instead of disabling the filters as they go. This allows the user to change the direction of their search without going back.

Year
 [ ] 2014 (32)
 [x] 2013 (15)
 [ ] 2012 (0)
 [ ] 2011 (2)

Color
 [ ] Black (5)
 [ ] White (14)
 [ ] Red (1)
 [ ] Chartreuse (0)

At this point the user thinks "hey, I didn't know they came in chartreuse!", ticks the box, then un-checks everything else to see what pops up. Some friendly UIs will offer to clear the other search results if you tick a box with 0 results.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.