How to Simplify 20 Dropdown Filters Without Removing Any

Creating hierarchy with components

Imagine you’re trying to filter data on a SaaS app and encounter 20 dropdowns. You scan and expand each of them to check if it’s the one you’re looking for. You’re spending a lot of time and effort, and still haven’t found the right one. This is the frustration that can come from too many dropdown filters.

When every filter gets its own dropdown, you’re indicating that they all deserve equal attention. However, most users don’t experience filters this way. They have a specific goal in mind and only need a few filters at most. The lack of visual hierarchy forces them to do more scanning and clicking to find the right filters.