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
ProductTypewith the value
Coatand next to it a button
Are either of these options preferred? Is there a better way to hide to complexity but not hide the information?