I'm helping to design a website using Algolia Instant Search. There are several facets that the user can modify to return a set of data that they can browse through. The Instant Search behavior is such that if a certain facet is no longer modifiable, it is removed from the layout. An example would be if the user narrows everything down to one result, then the "Number of Staff" range refinement would disappear, because the single result has only one "number of staff".

Some users in testing were confused by the disappearance of facets in response to other facets being modified, so we changed the layout to leave the facet header and a message: "no refinement available." This seemed fine until the latest round of changes, where the client wants us to make modifications the lessen the amount of space that the facets take up on the screen. We've moved to a drop-down model like on Trulia, where you click to expand the facet selection and do your selections in the dropdown.

Now the problem is that users may click and then be frustrated when they are faced with the "no refinement available" message. There is a "facet summary" section where the current state of the facets are reported, so they could see there that the "range" is just one value now. I'm wondering if this is enough and we should just go back to removing facets entirely?

I've seen examples where non-applicable facets are just removed (e.g., eBay does this) but since this previously confused some users, I'm hesitant to do this.


From a user perspective, I'd recommend:

  1. disabling the facets (graying them out and making them non-clickable) rather than removing them completely. This allows the user to see what filters are generally available but recognize that only some apply. This is similar to the suggestions in response to the post about Removing or disabling filters with no results.

  2. Additionally, if you feel the "no refinement available" user messaging is important- you could display it once either above the facets, or as a footnote below the facets as a legend/key to the grayed out components.

  3. Finally keep your "facet summary" section prominently displayed across the top of the search/filtered results, whilst collapsing the facet filter groups with accordion toggles for those that have already been selected, providing an expand/see all option for users to continue refining their search.

The combination of these approaches makes for a consistent UI for the end-user and a simple ruleset to implement from a development standpoint.

  • +1 Nice answer that covers a number of the key design considerations. Are these based on personal experiences or existing design guidelines? For completeness of your answer it would be nice to provide references. Thanks for your contribution to UXSE :) – Michael Lai Sep 15 '18 at 22:35
  • 1
    Michael, these suggestions come from having personally worked as both a developer and project manager on both e-commerce and non e-commerce sites in the last 10 years. Some focus groups or some of those projects have lead to confirming and moving forward with these implementation practices. – Anson W Han Sep 15 '18 at 23:12
  • 1
    +1 for "disable (grey-out)". This is what I usually do. Never failed, never had any comments, neither good (which is good) nor bad (which is good). – Mike Sep 16 '18 at 13:55

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.