Gfilui

tl;dr The default setting for a search box is 'include everything'. Which of the following gifs presents a better option to convey this?

Context:

We're redesigning a reporting interface for a dataset with dozens of possible filter options. Our current system is very difficult to use, so this version is leaning heavily on defensive design.

The goal is for no possible filter combination to return a nonsensical dataset. As such, the "default" state for each filter has been carefully made mutually exclusive from any associated options.

This is the first time in this project I've come across a search box.

The current implementation of the box is something like this. Where 'empty' state means "include any reference":


According to consistency with every other filter so far in this new design, the search box should look something like this:


I have reservations about either of these options. To me, the first option doesn't seem to communicate the default state as clearly and mutually-exclusively as the second option. But the second option requires many more clicks than the first.

Please help!

I would strongly suggest you go with the first option but with a change.

The second option introduces a programatic step (selecting from the dropdown) that the user should not have to make - There is no requirement for this programatic step to operate as a 'safety catch' so it shouldn't be there.

The first option has a semantic problem - it's difficult to communicate to users that an empty field means that everything is included. This could be solved by changing the way the users understand it. Changing the label to "Filter references" changes the purpose of the field to 'restricting' the results. Now an empty field means 'no restrictions' and a filled field restricts the results to what's mentioned in the field.

One option to reduce the amount of clicks from your second option would be to include an extra line in the form in which the user can decide if they want to search specifically or for any reference. A simple checkbox can be added to facilitate this.

This could be done like so in 2 steps:

and if they wish to search any reference:

You could just split the Filter into two parts:

1. A display of the current Search Filter


2. An input Field to search a suitable filter

Initial State:

After Typing:

You can then synchronize the two parts via JavaScript and display other visual cues (like a filter icon) when the filter is active. And could optionally provide a reset button once the filter is active.

In the first design, the placeholder text could simply say "All", or "Leave blank to include all references". Either of these should inform the users of how the filter will behave.

In the second design, the wording of the first drop down list item "Default (any reference)" could be confusing because of the use of 'Default'. Perhaps "Any reference" would be clearer.

The word 'Default' is not a term everyone would understand, and it could be misread to filter on the default reference (if there a default reference when items are created).

The first design is closer to how other web apps work, and should be more familiar to most users. Is also uses less space.

Use the second option -- but change it so that it uses radio buttons to choose between "Any Reference" and "Search References."

• Any Reference


• Search References [_____________]

The text input field to the right of "Search References" would be enabled if the "Search References" radio button input is selected, and disabled (grayed out) otherwise.