filter bar vs filter on the left

Question

I'm working on a website where I have a list of products. These products have the option to be filtered, on this process there are a few options, such as filter by typing, select checkbox, a filter as usual. This is also a responsive website, wich means this filter will be avaliable on mobile, tablet, notebook, etc...

When developing a web site, I know we should try to give the best fluid experience across different devices and this is where I have this doubt.

If I use a filter bar it's almost everything on the "same place" when changing from mobile to computer, since all the filters will be on the top, see image below.

Note: This is just to demonstrate the concept, but I think you can get the idea.

---

This is a possible option because have some pros, for example:

• We can use the full width of the screen;
• The filter is visible when scrolling;
• It has a better placement considering other devices (at least in my opinion)

But have some down sides as well:

• It needs an interaction from the user to see the options;
• If we have more options to filter it can get messy or we need to turn into other type of filter and resionable screens, such as notebooks;
• Even if the position to access the filter is the same (on top), on mobile we will have a very vertical filter list instead of horizontal (in bigger screens);

So basically my doubt is about using the top filter bar or the traditional left side column with all the filter.

When should I use one or another? Or why one is better than the other? Considering

Answer 1

I'd suggest using a top bar if and only if you have a maximum of four filters and you know for sure that the count won't change as time and complexity of the project progresses.

The reason I'm suggesting so is that filters in top bar could be presented in a clean fashion only up to a count of four. If you have more than four filters, the top bar quickly begins to clutter considering a prominent user screen resolution of 1366x768.

A vertical filter panel is suggestible any day over a top bar provided it doesn't consume too much of your real estate and overpower your primary content area. The reason for the same is as follows:

1. The filters are always expanded and run along the length of the page. Hence, the user is not required to perform any additional action in order to apply the filter.
2. Since the filters are vertically positioned, it would be easier for the user to go through them as he/she would only require to tread in one direction rather than treading from top to bottom of one filter and treading back to the top of the next filter.
3. Also, since the filters are placed vertically, there is technically no limit to the number of filters implementable. You could have 5 or 50 filters going one below the other and it won't have any design impact at all.

In case, you have a lot of data to display, say a table etc., you could resort to using a filters button or icon in the top bar, that on click, expands the filters vertically in a modal above your content. this way, you could still use the complete display area to present the content and yet the filters won't hamper your content viewing experience.

Answer 2

A filter list lets the user:

• know which filter options the current search is based on
• choose different options from each filter to perform a new search

Between your two proposals, the points I would consider are:

• How often does the user interact / you want the user to interact with the filters?
• Are the filters important enough to make the user look at them with the same weight as the actual results?

The top filter list is more discrete, shows the actual selected options but not the other options from each filter. The left one gives more information as it permits the filters to be always expanded.

If the app's purpose is to find a very specific item, then an expanded filter list that shows all the possible options might work better (left list). If the searches are not meant to be so specific, a discrete filter list might be enough (top list).

Take a look to this other question where the doubt was if the filters should remain collapsed or expanded.

Answer 3

Based in your two options here are PRO and CONS of each:

Filter Icon option

Pros: Scalable, better to display information hierarchy, responsive, easy to develop

Cons: There is no easy way to let the user when the filters are applied and when not, you can solve this with a small labels, like "Filters applied: xxx, xxx, xxx, xxx" or something.

Filter bar option

Pros: Quick access, a very common pattern for users, easy to relate by gestalt laws with other elements

Cons: not scalable, not responsive, long "values" will be hyphenated, hard to use (more clicks to do multiple selections or combinations) and so on.

My two cents Go for the Filter Icon option and show it as ADVANCED next to the search box... I did something similar here for DESKTOP (the icon in the right of "Buscar") and it worked like a charm in the user testing:

When the user clicked on the icon, the results area is pushed down and all the options that you need will be displayed.

This pattern will be similar on MOBILE to the users, since the same icon will display the filters option set and an APPLY button to take them back to results view.

Hope this helps :) Best wishes.

Answer 4

As of my view, it is good to have top bar on desktop and in mobile view user Navigation-drawer as in material design guideline. Please see this link as a reference Material design