Need help on quick filters design

Question

I need help/suggestions on quick filter design. In the design shared below, there can be at max 8 filters however the things fit correctly for larger screens. But for smaller screen resolutions things start breaking once a filter is applied. Can you suggest some options?

Default screen

After applying

a) Either we can show scroll for other filters applied in the form of pill and on click show popper

b) Either show count and on click show all filters in the expanded view (No scroll)

The catch here is if the last filter is not applied by the user how to convey that it's hidden in the view more?

Can you suggest some ideas to solve this? Let me know if any more inputs are needed

Answer 1

If all filters are equally likely to be used (which would be surprising to me), then it is preferable if they are shown all the time rather than be hidden, since users are likely to want to see all the options available at once.

If you can find some way to create subgroups for the filters, then you can use this to break them up and place them in different sections. This then allows you the option to show or hide them by sections.

If you are planning to add or remove filter options in the future, you'll want to make sure that any design changes you implement does not cause an issue later down the track. I guess if you are having that many filter options, then it is worth thinking about ways to design it better, but it means knowing more about the data you are working with.