User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Let's think about a web application that shows some data that can be filtered. I know of two variants of this: Either the user presses a button, which expands/pops up the filter options or it's a filter that is visible all the time, for instance to the left or top of the data wanted to be filtered.
Which one is the more user friendly way of doing it? Is one or the other more appropriate depending on context?
What I have inferred through my extensive dashboard designing work is that the usability of filters is highly context dependent.
In case of pop-out filters, the pop-out filters turn visible, generally in a modal, which is constrained by the height of your viewport. Hence it is advisable to keep only a few prominent filters expanded leaving the rest collapsed and expand them as the user acts on them.
If you are using a vertical filters bar, say in a side panel, keeping all the filters, or at least the most frequently used ones open makes sense. Since vertical filters are stacked one below the other, they don't interrupt the vertical momentum of of the user, whereas, if the filters of a horizontal filters bar are all expanded simultaneously, the user has to tread each individual filter content vertically and then backtrack to the top of the next filter, which is tedious and cluttered.
My recommendation is that if you have only or a maximum of four filters to apply, you could use a horizontal filter bar on top of your page. Using more than 4 filters in a top bar makes it look cluttered. The user could expand the particular filter he/she wishes to apply and act on it. Whereas if you have more than 4 filters, I'd recommend using either a pop-up modal to list all the filters or a sidebar panel with all the filters expanded. In case of a pop-up modal, expand the most frequently applied filters while keeping the rest collapsed. While for the vertical side pane, expand all the filters and scroll it along the length of the page.
There are two main purposes for a filter list like the one you are asking about:
To achieve correctly the second point, you probably will need to show the filter expanded to some degree.
For the first point there wouldn't be the need to expand the filter list.
So I guess a possible approach could be to show the filter list collapsed at first and expanded when/if the user has selected any option for the current search results.
Which one is the more user friendly way of doing it? Is one or the other more appropriate depending on context?
It's all about the context. You don't want to play games here and try to guess what is the best/appropriate way. Instead, what you must do is testing it out! The general, broad approach would be to take all the options and turn them visible. Then you should test what are the most common used ones(again, it is very, very context depended. For example, how much filters there are? Obviously if there's 2 options - no need to hide them), and take actions accordingly to what is used most - set visible, what is not - hide as an option.
