Apply advanced filters for search content

Question

I'm having selectable search content on the top and advanced filter options for each of them. The solution I have came up with has a separate drop-down menu to select filters to which content should be modified. The advantage of this design is that I clearly see filters to which content type I'm modifying. Disadvantages are additional drop-down, I'm not seeing all options and whether any filters are applied to them. My current design looks like:

What I'm after is to simplify it without sacrificing usability, something like:

But it creates more clutter in the top row. Is there a way to reduce it like replacing "filters" with the icon or something else keeping the UI undersandable?

Answer 1

I like the second idea, but it may not be necessary to show the number of filters if you:

• Show that the filters change when they select a different category.
  • Animation would work well here, such as a fade-in/fade-out.
  • Then they should associate clicking the category with revealing the filters.
• Assuming that this is a desktop app
  • Show the 'hand' cursor and highlight the category on hover so the user knows it's selectable.
  • Put a label at the beginning of the filter bar
  • To clarify that only filters for that category are being shown.

Something like this (albeit less crudely put together):

But this would be a perfect opportunity to test both methods and see what works best with the users. I certainly wouldn't rule out your solution.

Edit: If you would rather the label not be selectable, you could instead create a single "Filter" button which reveals filters for all selected categories at once, much like Google and YouTube uses:

Or an entirely different route: Display the filters in a bar to the left of the page after the user performs their initial search, much like Amazon and Vimeo do.