I am trying to implement active filters list to a fixed side filter bar. When a user scrolls through data, they will always be able to preview the active filter list without having to scroll to the top of the landing page. The issue appears when the user chooses many filters and the list starts becoming really long. To simplify the preview of the side filter bar we decided to limit the amount of data to 4 rows: this way user learns that such a section exists and is able to expand the list to preview all active filters.

All filters:enter image description here

Filter Preview limited to 4 rows:enter image description here

My concern is - when the user expands the active filters view and decides to close it afterward, what's the best user flow? Close it at all or return to the initial state when the user is able to preview a few rows of active filters? My thinking is that if the user closes the active filters then he's not interested in seeing them anymore and the opened section will cause a scrollable side filter bar which can decrease its usability.

Does anyone have some suggestions regarding good user flow? Additionally, it would mean that this element might have 3 different states. I'm just concerned if that's an appropriate approach?

Expanded list of filters: enter image description here


1 Answer 1


can the filters be categorized? From the designs it seems like they can be based on color. The filters could be broken into multiple smaller/ bite-sized filters. An example is LinkedIn. When the filter list is small, the selected filter checkboxes can be displayed in the dropdown itself.

enter image description here enter image description here

  • thank you, I checked this option - but it's in my design you can preview the category with the amount of chosen options for each category under the preview I showed above. In this case, this solution wouldn't make much sense. Dec 3, 2020 at 7:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.