Need help with filter grouping

Question

I'm working on filters. I need help on filter grouping. We do have different filter groups that can be applied on given data. The problem here the page looks overwhelming with given options. I cannot hide these options. They need to be shown upfront. Can you suggest me some alternatives on how to reduce the visual noise. I tried with text format but the UI doesn't good.

Below is the rough wireframe.

Note: Need to place quick filter design in horizontal format. As we have navigation on left side.

Answer 1

The traditional way employed by many shops (like Amazon) and also some business applications would be to stack the filters vertically in a sidebar:

This sidebar could be always visible or toggled by a "filters" button, it could be on the left or on the right, and if you want to keep some filter chips for commonly used filters you can do that, too.

Answer 2

To display 8 or more filters grouped by category while minimizing visual clutter, consider these steps:

1. Separate filters from Sorting and List/Tile view actions. Position them on the right-hand side.
2. Implement a distinct visual cue for an idle filter. For example, substitute the drop-down box with an action button, which can transform into a drop-down upon clicking. This approach aims to simplify visuals upon first opening the page.
3. For additional filters, hide them under a "More Filters" button, which would move the content below.

Answer 3

You mentioned in the comments on Leo's answer that you already have a left navigation so would prefer a horizontal format.

In that case, consider the LinkedIn job search interface:

• The "most-used" filters are visible at the top
  • Without further context on the data and available filters, I wouldn't be able to say which filters you could show in that top bar; but I assume you know the data and which filters would be used more often, more on that below
• The full extent of filters can be accessed from the "All filters" button
  • I counted 18 filter categories (which surely would overwhelm any user if they weren't hidden at first!)

Finding out which filters are important

To find out which filters are most important to a user (if you don't already have an idea), you could:

1. Simply ask them (not always possible)
2. Log/analyse the API calls to see which filters are being used (only really possible if your interface calls an API when the filters are changed)
3. Use some technology like Mouseflow to find out what actions users are performing most

Answer 4

I think you may go with the normal view which is currently. Make sure to give one bar background to the filter option so that you can easily differentiate between the filters and the main context.

Cause the main reason you are telling that these filter is necessary so keep them separated from the main context so that it will be there and it won't bother the user also.