0

We have a page of filtered results, and in the sidebar the user can choose which values to filter by.

We usually use check boxes, so a user can tick an item to select to filter by a value or it or leave it unchecked to ignore it.

We need to add to this functionality a way to exclude each value.

The app must be tablet accessible so this rules out things like shift+click or right click.

How would you go about this? Primarily, we'd like to not reinvent the wheel if there is a common way to perform this action.

Things we're considering are

  • radio buttons next to every value for the three options (very cluttered, even when no options are selected)
  • 3-way "switch" element next to each one (not necessarily an intuitive piece of UI)

Here is the current setup (no option to exclude)

Current filters

Clarification on the select / ignore / exclude

Exclude is default behaviour. If I had the products:

red apple
green apple

I'd like a filter that says "Red".

If it is unchecked, the red value is Ignored from the filtering logic, and the product list would still show me both products.

If I Selected the red value, it would show just the red apple.

If I excluded the red value, it would show me just the green apple.

  • Can you please explain the difference between exclude and ignore. – Anton Mircea Mar 29 at 10:51
  • @AntonMircea Hi Anton, I've added some more details. Thanks! – Djave Mar 29 at 11:52
1

You radiobuttons can be stylized to looks like tags. This approach is common for mobile apps.

enter image description here enter image description here

  • Thanks Sergey, it is a good idea. My main issue is that I will have hundreds of filters, so the idea of adding sections like this is a bit daunting. Certainly an idea I will consider. – Djave Mar 29 at 11:53
1

Here's a suggestion for your filtering logic.

You have 3 options:

Exclude item ('excluded' checkbox selected)

Show only item ('show only' checkbox selected)

Show all items (no checkbox selected)

  • 'Show only' and 'exclude' checkbox are mutually exclusive.

You can view a working prototype here: https://qyt3if.axshare.com/

Hope this helps.

suggestion for filter

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.