Better UX practice for data filter

Question

I'm actually working with a redesign of a desktop application. And one of my challenges are to design a filter system from a table based screen.

This is the actually design proposal from the designer who worked before me (language: Brazilian Portuguese):

Filters with the accordions closed:

Filters with 2 accordions opened: User's feedback: - At first look they didn't recognise this accordions as filters; - The separations of the items in categories doesn't work fine because different users use one filter of the first accordion and 2 of the third one. So the filter activity requires a lot of clicks on a lot of different accordions.

I want to know what is the best practice on filtering this kind of data. The filter has to be on the vertical format, and need to be a "Text Input" or a "Select Input" as the prints show.

Thanks for your time, and sorry about any english error.

Answer 1

I would try to identify which filters are most common among users and make them always visible. Then you can hide additional filters under the link named advanced, additional filters etc.

If there is a lot of filters it may be not the best idea to show them all at once as this will be too overwhelming for the user.

Answer 2

At first look they didn't recognise this accordions as filters

You should probably abandon accordions here as they are not typically used for filters. The filters that are currently in use should always be visible and it will be difficult to achieve that with accordions.

The separations of the items in categories doesn't work fine because different users use one filter of the first accordion and 2 of the third one. So the filter activity requires a lot of clicks on a lot of different accordions.

Flattening all the filter inputs into one UI element will solve these navigation issues. You may have too many filters to show at once, but you can hide some of them behind a more filters buttons. You may have to re-organise the filter inputs since each accordion contains multiple inputs. Some inputs may logically work as a single filter, some inputs may need to be logically grouped into a filter. Each filter should have its own controls for applying or clearing the filter.

I want to know what is the best practice on filtering this kind of data. The filter has to be on the vertical format, and need to be a "Text Input" or a "Select Input" as the prints show.

The below example from asos.com shows filter inputs as a drop-down with an easy to understand title for each filter. The filter is applied when the option is selected. Applied filters are higlighted with a blue bar above the drop-down.

The below example from airbnb.com also uses filter inputs as drop-downs but the filters are styled as buttons with pop-up modals. The filter is applied when the filter's Apply button is clicked. Applied filters are highlighted in green.

Answer 3

simply have a "Filters" button that expands to show all filters in the same space. User selects their filters and click "Apply". Page reloads with results.

Example, click "More Filters" in Airbnb.