4

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?

  • When a user enters the page, is it possible filters are already applied? Or are they only applied manually by the user in the same session? – Martyn Feb 17 at 21:42
  • Take a look at electronic components stores like mouser.com or digikey.com - they usually have upwards of 10 filters in a category and thousands of products in a single one. And often the user wants to filter on multiple values for a single parameter. Not the prettiest, but usable. – Jan Dorniak Feb 25 at 7:27
2

Hi Menelaos Vergis,

I worked on something similar recently, and this was the way I approached it:

1. An initial link (or button) that launches the filter view:

enter image description here

2. A launched filter view that collapses upon application:

enter image description here

3. A collapsed filter view that is both editable and removable.

enter image description here

Let me know if this is helpful. Thanks.

| improve this answer | |
  • Thank you for your reply, I see the 'Filter applied' summary that I am thinking of implementing here, this is great. But my problem of too many filters maintains. 80-100 filters – Menelaos Vergis Feb 17 at 13:25
2

I have a similar situation and use a similar method as Oluwatobi Mayowa, but I'm not showing each individual filter specifically in the collapsed view. I only indicate the number of filters that have been applied.

Filters collapsed, nothing applied

enter image description here

Filters opened, 2 applied

enter image description here

Filters collapsed, 2 applied

enter image description here

The reason I don't feel the need to show each applied filter is because they can only be applied by the user manually in the same session, so forgetting what was applied isn't really a thing. And even if it happens, just open it and check.

I do not have 80 to 100 filters but maybe this helps somewhat. You could add another layer of expanding sections if you feel it's needed.

| improve this answer | |
1

Here is my approach for a similar problem. The constraints included:

  • Grid with each row being very data dense
  • Lots of available filters
  • Need to show what filters have been applied

Closed Filter Panel

The filters slideout button sits on the left, but allows maximum screen real estate for the grid content. The current applied filters are called out in tags just above the grid's rows. example grid with closed filter panel

Open Filter Panel

When the user clicks the filter button, the panel slides out, and the grid content condenses. Note there is a separate scroll bar to allow for many, many filters to be available. That said. the "Department Details" is a collapsible panel, which is important. I strongly recommend grouping similar filters which allows users to more quickly traverse a long filter list and find the filter they need.

The search/submit button is in a fixed location (outside of the filter's scrollbar) so a user can always quickly apply the filters. Explicitly applying filters with the search button is also recommended if dealing with a large list of filters.

example grid with open filter panel

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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