1

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:

enter image description here

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

enter image description here

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?

  • A quick question - whats the rationale behind being able to search different types of media at once? – Joe Taylor Jun 8 '17 at 13:53
  • Because I'm doing iTunes redesign and want to improve search functionality. iTunes searches all types of media so I want to make it custumizable what to search for and with the ability to apply filters. Because when media library is very large it will improve UX. – Peter Jun 8 '17 at 14:12
  • Ok I understand, a few things to consider: 1. How often is it likely that a user will want to be searching across multiple media types? (If I want to download a film, I'm not likely to want to have search results cluttered with music, books etc, the exception could be if I was a fan of a certain brand, maybe Star Wars, and I want to find all media related to that title) 2. Have a look into overcomplication of filters in UX design - again, how often is someone going to be searching for a Rap song longer than 6 minutes made between 2003 and 2007 with a rating of 4? Sometimes less is more! – Joe Taylor Jun 12 '17 at 12:38
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):

Example with filters

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:

Filter with single button

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.

Vimeo Search filtering bar

  • I have thought about changing what to filter just by clicking on the category name (for example, you click on "Music" in a top bar and filters for music appear. But the top row is the type of content to search for and they are also selectable by click. So if I enable/disable option by a single click I should use another action to show filters for that option. And using two types of clicks on one label is confusing. How would user know it has to click twice (or do any other action) to show filters? – Peter Jun 8 '17 at 12:38
  • I had assumed your toggles worked the same as checkboxes, where you have to press the checkbox itself to select the checkbox, not the label. An alternative if you do not want this would be to have an entirely separate "Filter" button which reveals the filters for all selected categories. I've modified my answer to include this. – Joel Tebbett Jun 8 '17 at 13:22

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.