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?

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.

3
  • Thank you! And what if the user selects all checkboxes? Should it also be considered as "Anywhere"? Or is it not intuitive enough? Feb 6 '20 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". Feb 6 '20 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. Feb 6 '20 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.

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.