filter

Filtering a List View

The filtering functionality on a list view is a frequently but not trivial process. Many websites from different categories requires this functionality in order to narrow down the results. Unfortunately, this commonly used pattern is used incorrectly from many applications. This misuseability effects dramatically the user experience. As a result, the user cannot find what he is looking for. We will emphasis on some useful patterns regarding the filtering process. We will define some rules (guides) that are essential for a proper filtering experience.

  • Active filters should always be visible.
  • User should easily close the active filters.
  • Filter type should always reflect the data type.
  • User should always see the most common filters first.
  • If there are many filters, meaningful collapsion.
  • Layout and space between the filters.

Active filter should always be visible

A clear way to show all the active filters is by using tags on a separate section. Those tags considered of a colon separated key – value pair. The key will be the name of the filter and the value will by the value of the filter.

User should easily close the active filters

Each active filter tag should contain a small closing icon that will close the active filter.

Filter type should always reflect the data type

Bellow we plot the most common data types with the corresponding filtering UI.

Data Type UI
Number input[type=”number”], If minimum and maximum values are provided, we can use a range picker. If the minimum value is quite smaller than the maximum value, we can use heuristics like logarithmic scaling or stepping
Range Number Range picker
String input[type=”number”]
Enumeration (single selection) Dropdown with autocomplete field
Enumeration (multi selection) Dropdown with autocomplete field, the selected values could shown as comma separated string
Date range If the date range is usually less than 3 months, one calendar with ranges in the dates is fine. 2 date input fields in other case

User should always see the most common filters first

In a common application, we can search a record with many different criteria. Although, in many cases we search the specific record by providing 2-3 filters. We should run some tests with users that are going to use the application, and identify the most used filters. Those filters should always be on top of our filtering structure.

If there are many filters, meaningful collapsion

Considering a filtering view of 14 different filters. This is a nightmare for a user that will only use the basic filters. We could hide the non-frequently filters, providing the intuition that if you want to apply a more advanced search, you can expand the entire filter view.

Layout and space between the filters

This is a difficult section. We can endlessly discuss about the gaps, the layout and the structure. I don’t thing that there is a clear guide regarding this issue. My proposal, considering the user’s reaction on different combinations, is to be as minimalistic as possible.

Layout

The horizontal structure is more readable than the vertical structure. The vertical structure, in contrary with the horizontal, forces the user to scroll down in order to see all the applicable filters.

Labels

We observed that the labels on the filters increases the filter view space by 40%. This is weird, considering that the user must search on a bigger segment in order to find the appropriate filter. Our cases shown that the placeholder can play the role of the label. If we remove the labels and wisely use the placeholders, we can release a lot of useful space.

Mockups

Filters Blank Collapsed
filters blank collapsed

Flters Blank
filters blank

Flters Applied Collapsed
filters applied collapsed

Filters Applied
filters applied

About the author: John Apostolidis

Frontend developer

Leave a Reply

Your email address will not be published.