Filtering vs. Searching

Search and filter are full of subtle differences that change everything. Searching is fundamentally inclusive. I’m looking for something like this, please go find it. Searching is also infinitely expansive. Google searches for everything. It doesn’t restrict you to certain fields.

Filtering shows you a set of data and let’s you filter down the results. It uses an exclusionary model. Let’s look at a simple example:

Let’s explore this interface by trying some simple interactions. Try to find what you are looking for like this:

1. Filter for “cat”.
2. Clear the filter.
3. Filter for “mouse”.

Performing the first filter is easy. You press the filter button and typed in c-a-t. Clearing the filter is trickier. The button still says filter and that implies adding a filter, but you want to remove one. We could change the name of the button to something like manage filters, but that would make it even more confusing.

Once you’ve opened the filter dialog you’ll notice that it is modal. You can’t do anything else until you get rid of it. I’m not totally opposed to modal dialogs, they work well for authentication, but I always try to use them with care.

Now you have the dialog and you might press the cancel button. After all you want to cancel the filter you just applied. However, cancel will close the dialog and change nothing. The way you clear the filter is to apply a second filter with an empty name. This idea of cancel something by applying the inverse is popular in computer programming, but it is too confusing for this UI. We could add a clear button, but that brings new confusion. Are you clearing the contents of the dialog or clearing the filter?

The fundamental problem with this type of interaction is that it has saved state. It remembers the applied filter, but doesn’t really indicate that to you the user. After you’ve filtered for cat you need to replace the filter by filtering again.

Another issue is the title of the filter dialog. Add Filter makes sense in step one, but doesn’t really make sense in step two when you are really removing the filter. These types of tricky language problems are a good indication that there is room for improvement in the interaction. Good UI is easy to explain.

Now try another test, filter for “Walrus”.

I’ll bet it was tricky to figure out how to find Walruses. The “Good Pet” checkbox is at fault. The checkbox is either on or off and that makes it impossible to filter for all animals regardless of their viability as pets. You have to know if a walrus makes a good pet before you filter. Actually, it is worse than that. You have to know if I think a walrus makes a good pet. You might have a lot of trouble finding skunk since a neighbor of mine actually did have a pet skunk.

The “Good Pet” checkbox is poor UI within this filtering interaction. We could change it to a set of radio buttons that, but these types of bad interactions are pervasive in filtering scenarios because of the nature of the interaction. When you think in an exclussionary way you tend to present your users with exclussionary options like this or that instead of inclusive ones like all. All get represented as not filtered.

This filter is an increasingly complex interaction. The more you want to do the more difficult it is to do it. Can you imagine having an advanced filter dialog? It has the same pitfalls all over again.

Filtering also has data performance problems. You have to see all the results before you filter them down. Imagine if Google showed you the entire Internet and then asked you to filter it for what you want.

Now let’s look at the same interaction using a search metaphor. We start with the search dialog which makes it very clear that this interface helps you find things:

Try to perform a task similar task with the search dialog.

1. Search for “Cat”.
2. Search for “Dog”.

The interaction is much clearer. You do the search and then start a second search. There is no saved state and none of the language problems with the filter dialog. You just search for what you want. This search interaction is also much more flexible. We could support a complex search pattern or add an advanced search.

We also don’t have to worry about data overload. You never see all of the animals at once unless you want to. This isn’t as much of a problem with 25 animals, but imagine 500 or 1,000. The search expands well to larger amounts of data. You don’t have to worry that loading everything will be slow since people only see what they ask for.

Filtering works well for a small number of fixed choices applied to a small amount of data, but it doesn’t scale upwards and it isn’t as flexible. Searching is an expressive interaction that scales almost infinitely. The success of Google has made one thing abundantly clear: everyone can understand search.

Note: The image used for this article is stock photography and is not available under the creative commons license.

I know this bounces around a little on IE. I ran into a bug with IE and Wordpress and I haven’t been able to resolve it. I’m working on it.