How can I hide filters when users do not need to use them?

I know some techniques that can simplify (or not) the UI by hiding whatever is not useful at the moment and reveal it when the user needs it.

  • Accordion. Use a title and an arrow and when the user clicks on it, the components are revealed.
  • Don't hide anything. Show every component and the user can scroll through them
  • Modal. Put the components into a modal and when the user press a button show the modal.

I have used these techniques before but now I need something else.

I have a form that contains a lot of filters, grouped by category. So I have category 'Customer', 'Location', 'Product', 'Status' etc.

The user may or may have not set these filters. These are a lot of filters (80-100)

If the user hasn't set any filters or they don't want to set any filters in the future it's such a waste of page clarity (too cluttered).

But if the user has set even one filter I cannot hide the filter within an accordion. They might want to know what filters are set and what not.

My two thoughts on that may be:

  • Hide using accordion. Show the set filters as simple text. E.g. ProductType:[Coat]. When the user clicks on it it opens the accordion and the may edit all product filters.
  • Show only the components that have value and provide a button that show the rest components. e.g. Show the label and input of ProductType with the value Coat and next to it a button Show More...

Are either of these options preferred? Is there a better way to hide to complexity but not hide the information?

Tags: