2

A user enters a term and would like to search for all appearances of this name in the table/gallery view below. For example, Today entering the term "Security" a user might get results where such term appears in any of the X categories/column tables below.

We would like to make this UX more sophisticated and allow the user to (optionally)specify in which categories (can be multiple) he'd like to search or which categories he'd like to exclude.

We came up with the following UX:

enter image description here

This feels not 100% ok since "Anywhere", which is the default option, is mutually exclusive with the other categories. So a user needs to click another category, this will unselect "Anywhere" and then he can continue and select more options (it's a multiple choice). Hitting "Search" then would search for the provided term in all the specified categories.

Do you have a better idea of how to deal with this requirement?

Improve this question

2 Answers 2

Reset to default
1

You don't need "Anywhere" to be a selection option. You can have that as the label for the deselected state.

At our company, we have a similar filter for grid data where we choose to leave the default selection unselected. That way, it is implicitly considered that we are searching everywhere and a "Clear all" option (which you already have) is added to search all filters.

This pattern can be seen with e-commerce platforms for their products, though not quite for search. You can draw parallels from those filters for your use-case.

Improve this answer
3
  • Thank you! And what if the user selects all checkboxes? Should it also be considered as "Anywhere"? Or is it not intuitive enough?
    – Yael Lindman
    Feb 6, 2020 at 12:34
  • Selecting all checkboxes is the same as "Anywhere" in your example. Another pattern is to select "Anywhere" by default and hide all other options, but show other options only when you deselect "Anywhere".
    – Ajit Panigrahi
    Feb 6, 2020 at 12:42
  • Just checked, we use a custom filter in one component where we use "Select All" as a toggle to all other options. Deselecting any other option deselects the "Select All" option but leaves the other options as selected. This allows the user to select al but few options faster.
    – Ajit Panigrahi
    Feb 6, 2020 at 12:44
1

Two examples of UIs for similar use cases:

  • Google Flights:

    The "all" is made a very separate option.

    Clicking on the switch will select/deselect all. There's also (not visible here) an "Only" option that appears next to each choice when you hover over it, that allows to select that choice and deselect all others at once.

  • Excel filters:

    Here the "all" option is not very different from the other choices, though the () make it stand out a bit.

    Note that the checkbox next to it has three states:

    • empty: nothing is selected
    • checked: everything is selected
    • with a -: partial selection

Note that in both cases, when the "all" choice is selected, all choices below are also selected.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.