0

I have a page that display multiple notes that are assigned to each department.

At the top right corner of the page, there is a filtering section to allow the user to display notes that are only relevant to them/their department. The filters look like this:

enter image description here

It's similar (although not entirely in terms of functionality) to iOS Scope buttons where clicking on a button and it'll filter the results. I would like for the user to also be able to click on multiple buttons; this would filter the results based on those selections.

Deselecting all of the buttons will display all of the results, essentially reverting it back to its original state.

However, there are some kinks in this type of UI/functionality which I am unsure about.

  1. If we allow the user to select multiple buttons, that means it'll display all results. If deselecting all also displays all of the results, isn't that weird? I guess that's no different than turning on all of the filters in an eCommerce site?

  2. I don't think it's clear to the user that the buttons are toggles - ie, you can select/deselect the buttons the same way, by clicking on them. I was thinking of adding an "x" next to it, but it looks like you're removing the button instead of just deselecting.

1

There's a pattern for this type of UI: Filter chips

Material delineates the active filter state by adding a checkmark, and another click removes the checkmark:

enter image description here

you can also use an outline for more contrast:

enter image description here

2
  • Thanks for this! Do you think it's weird that if all buttons are checked AND unchecked, that they yield the same results? Like I said, I guess it's no different than selecting all filters in an eCommerce site, it just makes this "oddity" stand out more.
    – Beans
    Sep 9 at 17:23
  • 1
    @Beans In instances of this pattern we've used, we haven't seen much confusion. Especially as users are aware of what they are filtering on. Plus, with the filter chips pattern, it's usually a small to moderate amount of attributes to filter on.
    – Mike M
    Sep 9 at 17:53
0

You could add a Show All button ahead of the others and make that the default. When other filters are selected, it becomes deselected. W3Schools has a demo that might work well with a modification to allow more than one selection at a time.

Button group with Show All selected by default

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.