How to allow multiple live filters to be selected and how do you show results?
So my question is about applying e-commerce filters that then shows live results (e.g. with AJAX / no page reload).
In this case you can theoretically allow user select multiple filters at given time, rather than one-by-one.
In theory, it could be really useful: for example, user wants to select all products with 4 and 5 star feedback.
With regular flow it will look like:
Select 5 star → site shows results → scroll to star filter → select 4 stars → site shows results
If you could allow select multiple filters the flow is much simpler:
Select 5 star → select 4 stars → site shows results
The problem is it's difficult to define clear conditions how to do that.
How / when to apply the filters?
NN recommends to check whether a cursor (keyboard focus) is still in the filter area and load results if cursor leaves the filter area (or load after 1-2 seconds regardless). So in theory person can apply multiple filters before results are loaded.
I didn't found a site with described functionality though. Most allow only to apply 1 filter at time: either full page reloads or results load immediately after first filter selected, thus making it impossible to select more filters.
How to show the results
Then the problem is how do you show the results, because you have two options:
- Scroll to the top of the page, making it impossible to add more filters (because you also scroll filter panels).
- Do not scroll, but that can make user think there were no results (if there are e.g. 3 results and you're down below on the page).
The article doesn't really gives the solutions and contradicts itself marking both options as subpar ones. So would be great if someone has a solution here that satisfies both cases.