2

I'm trying to build a vertical filter bar (think airbnb or any review site) where user will add multiple filters.

enter image description here

One can select multiple property types e.g. enter image description here

Although in many cases with lesser amount of filters (e.g. 2-3) it seems excessive to hide it under select.

Is there a pattern for horizontal checkboxes? (it seems there are radio buttons for radio inout but that's only for one choice).

1

You're right with radio buttons, they are used to only choose 1 of a group of options.

One example I have seen is this, I think its called a Pills filter (don't quote me on that): enter image description here

You can have a play with it here: https://www.siteinspire.com/

But its a good example how filters can be used horizontally as apposed to using check boxes.

1

Horizontal checkboxes in my opinion is an anti-pattern for the below reasons

  1. They don’t easily translate into a responsive behavior
  2. The user has to work harder to navigate/select on larger screen devices such as tablets and desktops

There might be more but these come to mind straight away.

It is always recommended to have a consistent navigation scheme so that the user does not have to guess what changes happened in the navigation. It just adds another friction point for the users. In this case the facetted search should have a consistent behavior no matter how many facet groups have been returned as part of a particular search.

Recommendations Below is what you can do to improve/optimize the facetted search experience for the users.

  1. Always have a 2/3 most used facet groups open and the rest hidden under the more filters options. The challenge will be to determine which ones are the most used facet groups and is a good candidate for testing.

  2. Another way to do the same thing is to group the top facets from various groups into another group called top filters and have that expanded all the time. We ended up implementing that on our site.

enter image description here

Let me know if you need further details.

  • Thanks. Can you elaborate about 1) and 2) with examples (ideally some images)? – Runnick Apr 28 '18 at 9:39
  • i have added a screenshot from one of the sites I have worked on. Again this would depend on your user base and hence my recommendation to test with your users and find out what works for your users. The approach we came up with is a result of multiple multivariate test which ran for almost 3-4 months which various optimizations. let me know if this helps? – Bhupi Apr 28 '18 at 11:54

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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