2

I'm trying to find the best way, how to display filters applied overview. The problem is, that some filtering options, may have the same name across different filter categories (also because they are created by the user). Problem We went through the most obvious solutions (different colors for different filter categories / different icons / adding filter categories to the overview) but neither work for us. There is just one solution that partially solves problem - adding category information on hover. solution A rejected solution B rejected solution C rejected solution D accepted but doesnt solve problem

Do you have any ideas on how to solve it, also for mobile devices without a mouse pointer? Maybe do you know examples of filters overview, which work similar way?

2
  • 2
    Can you explain why there is not enough space for solution C? It seems like the best option and maybe someone can make a good suggestion to address the space problem.
    – jazZRo
    May 3 at 12:21
  • Sidebar space is already shared with few sections. There is a lot of filter categories - more than two, so if there is a lot of filters applied, there will be a lot of rows of categories in the "filters applied overview". I wanted "filter applied overview" section to have a fixed position, so if the user scrolls the filter list (which may be long) he/she always see filters applied. Maybe that's the side problem here - if "filters applied" would be scrollable together with filter list, there is no lack of space problem anymore.
    – Iga
    May 5 at 9:50
2

I don't know your exact user case, but i Think you're overthinking this. Filters with repeated variables (or faceted search) are very common and there are countless examples, just check any big ecommerce site.

One of the things I don't understand is why Option C has no space. For what I see, you're driven by UI. Applied filters are usually text only (and you can even create breadcrumbs for the results page). Remove those pills, use text and you'll have plenty of space.

In terms of UI, you can simply use the same selected filters (if you have a sidebar), there's no need to repeat them, the selection itself is enough

enter image description here

Otherwise, you can do as I said, simply add text filters. Something like this:

enter image description here

As you can see, there's a lot of spacing, yet I added several filters clearly identified. You could add more, taking 2 or 3 lines, and they would still fit.

In short

Don't let UI drive your UX design. Use common and tested approaches and you'll be fine (and save a lot of time both in design and testing)

1
  • 1
    Devin, this is great input. I forgot to add to the main question, that bubbles are bubbles because the user can remove these filters (missing little cross on the right of the bubble on the prototype). BUT - your comment helped me to realize that we can add removing option on hover - no need for bubble. Fantastic advice.
    – Iga
    May 5 at 10:00

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.