How to allow multiple live filters to be selected and how do you show results?

Question

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:

1. Scroll to the top of the page, making it impossible to add more filters (because you also scroll filter panels).
2. 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.

Answer 1

First things first,

There should be a bit clarification about what the real problem here with your question is. Both the animated video within the article you provided with this link and the problematic parts you mentioned above;

• I doubt there needs to be scroll within filter section if filter and product listing part will be separated,
• And it's not mandatory to show users filter tags updated each time, since user already can see the checked boxes on the filter section as a listed items.

So to say,

• You don't need any update process for your filter sidebar, it should only update the products part of the screen other than filter section,
• There's also no need to use these filter tags above filter section. Even there's no need to totally use them, it's easy to using them under filters sections so user doesn't have to scroll each time.

Let's say we still need to focus on the problem as the case you presented;

Even the way presented above solves the problem more intuitively, you may still want your users to adopt selecting two or more filters at the same time. So basically, waiting a couple of seconds or waiting user to move the cursor out of filter section (which happens first) as also NN suggests is a good practice to follow I suppose.

And to your second and last question, I'd suggest displaying all the results from the top of the page with each AJAX update since your users may miss the products incase of a lower count of listing.