Design with many filters

Question

I'm designing a system where the user should be able to display data on a chart based on different filters and measures.

They can filter by a country or multiple ones, by product/s and variant/s. They can also select what measures they want to display for those filter, up to 4 at the moment. (number of sales, income, number of refunds...)

Optionally, they can save those filters into a single name, so that they can re-use them in the future and apply them much more quickly.

In my current design, I see a few flaws:

• Many dropdown elements on the screen make it look ugly and perhaps confusing.
• "Save filter as" button can be confusing as it is not clear what filters it refers to, as they are in multiple lines. (it saves all)
• I don't think separating them in multiple lines helps much?

This is what it currently looks like:

And this is what I had before the re-design:

I redesigned it so I could:

• Limit the number of measures to a maximum of 4.
• Allow them to add many more measures (as the number will keep on growing)

What would be your take on this? Any ideas or suggestions that can help me improve this design and make it easier to digest while maintaining functionality ?

Answer 1

The second flaw (confusing "Save filter as" button) could be addressed rewording it to "Save settings to filter", but that's maybe too large.

Another approach would be adding a field for the filter name or even adding a "Create filter" button at the beginning of the process. I've seen some of these in Google Analytics UI, but I'm not sure if it's intuitive or I just got used to it after some trial and error.

Answer 2

I'd suggest you do some exploration with a current (or potential) customer, to get real input, and more importantly, to see how they work. In this case, doing some user testing might be helpful, since it's a complex product.

Example:

Create two mockups(wireframes) and A/B test which one they prefer. It doesn't have to be a full-fledged design, a low-fi design might suffice to give an idea and guide you on the design process.

My only suggestion:

I'd place all those filters as a sidebar, to the left of the graph, because it takes too much space and distracts from viewing the graph.

Inspiration:

Check sites like Statista to see how they filter using a sidebar. Google Trends might also be worth looking at. Finance websites might also be helpful.