Filtering

by Zack on September 5, 2009

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:

Filter for:

Animal
Good pet?
Notes
Ape
No
You never know what they’re throwing.
Cat
Yes
Sleeps a lot, but furry and good to snuggle.
Dodo
No
All sold out.
Dragon
No
Difficult to procure since they don’t exist.
Duck
No
Splashes water, takes up space, and quacks at strangers.
Fish
Yes
Quiet and keeps to themselves. Terrible for cuddling.
Frog
Yes
Easy to care for and fun to leave on the dinner table.
Gerbil
Yes
Keep away from vacuum cleaners.
Hamster
Yes
Just like a gerbil, minus the tail.
Iguana
Yes
Lives for over 20 years.
Kinkajou
No
Never likes to touch the ground.
Lion
No
Not good around house guests.
Mouse
Yes
Chews on electrical wires, is easily replaced.
Parakeet
Yes
Looks pretty, doesn’t do much.
Parrot
Yes
Talks constantly, is often right.
Platypus
No
Has poisonous knees (its true, look it up).
Porcupine
Yes
Really not snugly.
Rabbit
Yes
Be ready to clean out the cage every day.
Scorpion
Yes
Eats goldfish, not great for kids.
Skunk
Yes
Remove the scent gland before bringing them home.
Slow Laurus
No
Has poisonous elbows.
Snake
Yes
Eats many of the pets on this list.
Tarantula
Yes
Scares your friends, you’ll never get a date.
Tiger
No
See Lion.
Walrus
No
You can’t keep a walrus in your bathtub.
No results found

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:

Search for:

Animal
Good pet?
Notes
Ape
No
You never know what they’re throwing.
Cat
Yes
Sleeps a lot, but furry and good to snuggle.
Dodo
No
All sold out.
Dragon
No
Difficult to procure since they don’t exist.
Duck
No
Splashes water, takes up space, and quacks at strangers.
Fish
Yes
Quiet and keeps to themselves. Terrible for cuddling.
Frog
Yes
Easy to care for and fun to leave on the dinner table.
Gerbil
Yes
Keep away from vacuum cleaners.
Hamster
Yes
Just like a gerbil, minus the tail.
Iguana
Yes
Lives for over 20 years.
Kinkajou
No
Never likes to touch the ground.
Lion
No
Not good around house guests.
Mouse
Yes
Chews on electrical wires, is easily replaced.
Parakeet
Yes
Looks pretty, doesn’t do much.
Parrot
Yes
Talks constantly, is often right.
Platypus
No
Has poisonous knees (its true, look it up).
Porcupine
Yes
Really not snugly.
Rabbit
Yes
Be ready to clean out the cage every day.
Scorpion
Yes
Eats goldfish, not great for kids.
Skunk
Yes
Remove the scent gland before bringing them home.
Slow Laurus
No
Has poisonous elbows.
Snake
Yes
Eats many of the pets on this list.
Tarantula
Yes
Scares your friends, you’ll never get a date.
Tiger
No
See Lion.
Walrus
No
You can’t keep a walrus in your bathtub.
No results found

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.

{ 2 comments… read them below or add one }

Jason Beck July 9, 2010 at 3:14 pm

It would seem from your article that your example is functional, but I am seeing a jQuery error, and nothing changes when I click Filter or Go. I am using Firefox 3.3.6.

Zack July 9, 2010 at 5:34 pm

Thank you very much for letting me know. I was referencing some JavaScript libraries from Google and they moved. I fixed up the references and everything is working now.

Thanks again.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: