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