0

My site has a vertical search menu on the left side of the page, similar to Amazon and Etsy desktop versions, with checkboxes and search filter terms. Like these sites, my site automatically performs a search as soon as you check/uncheck an option. There is no extra "Search" or "Go" button. This is great if you only want to choose one search filter, but annoying if you want to choose more than one. In that case, you have to choose the first option, wait for search results, choose the second, wait, etc. (And even more annoying on Amazon where the search filter scrolls to the top each time.)

How can I make this work great for both the single and multiple filter term cases? I'd be OK with requiring a click on "Go", but not if you have to scroll up (or even move the mouse a lot) to get to it. Maybe some kind of hover "Go" that appears?

Gmail tries to solve this with their label menu. If you click the label's checkbox, then you have to click "Apply" before the change takes effect, allowing you to check/uncheck multiple labels first, but if you click the label name then it takes effect immediately and the menu closes. However, I think this is too confusing. It's really not clear that there are two different actions associated with each row and it took me a while to realize why I sometimes had to click Apply and sometimes didn't. This UI works for the inbox email list where it's clear that checking the checkbox is a different action than clicking the email to open it, but in this case the actions are completely different, not different ways of doing the same thing.

  • Are your results paginated, or are you using an infinite scrolling list? – Michael Hogan Oct 13 '18 at 21:32
  • 1
    Also... you’re not alone. Multi-select filtering is frustrating on a lot of websites (especially travel sites). You might look at how Yelp handles filtering. They offer both one-tap filters and a complex filter page. – Michael Hogan Oct 13 '18 at 21:34
  • The results are paginated. – user295469 Oct 14 '18 at 12:29
0

I think clicking and loading the results still works best for instant gratification. The trick is in only loading the results, not the entire page, and not moving the filters the user is interacting with.

Check Kayak.com. Their filters are fixed, allowing the user to keep adding and removing filters with no delay and the flight listing just responds to every filter action.

Some things to consider:

  1. If you have a very long filter list and allow multiple filters to be added, you’ll get into scenarios were users are playing with filters deep in the page but not enough results are loaded to reach were they are looking at (leaving a blank space in the listing area).

  2. Once a a filter is applied and new results are loaded, the user will have to scroll up anyways to the top of the listing to re-evaluate the product results.

  • On Kayak, the filter stays in place when you check an option, but so do the results. That means that you have to scroll to the top to see the beginning of your results after every filter (as I think you also say?). Etsy and Amazon both scroll the whole page to the top after you click a filter. That means that you see the beginning of the new results, which is good, but also that you have lost your place in the filter. Neither option seems obviously great. – user295469 Oct 14 '18 at 13:54

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.