Live Filter

Problem summary

The user wishes to specify a search by different categories to narrow down results

Example

Usage

Use when search results can be so plentiful that getting an overview of all results will last a lifetime
Use when search results can be categorized into filters: the search most be contextual.
Do not use when your search is not easily categorized into filters.

Solution

Whenever you make a change to any input fields, the search results are immediately updated without refreshing the page. This is a variation of the Table Filter pattern. The biggest difference between the two is the feedback time when making changes.

You start out by having one big pot of items you wish to search. This can be emails in your inbox, products in your webshop, or maybe people in your address book. Common for all these types of items is that they can all be categorized. Emails can be filtered by subject, sender, or reciever, products can be filtered by for instance price, and the people in your address book can possibly be filtered by job positions.

Present the user with a list filter categories, and let the user filter these by inserting input in text boxes, choosing options in dropdown boxes or even through checkboxes or radiobuttons. Whenever the user makes a change to any of the input fields, the results are automatically updated.

Rationale

The live filter pattern has been brought up by Pete Forde. He suggests moving from the traditional search paradigm to a filter paradigm:

With a search, you start off with nothing and potentially end up with nothing. Counter to this approach is filtering, where we present everything available, and then encourage the user to progressively remove what they do not need.

Using the live filter pattern moves the search from a monologue to a conversation. The user can progressively remove what they don’t need step by step and receive feedback immediately.

When you weight your decision to use this filter, consider whether the pattern complicates or simplifies search. If it does anything else than simplify finding the correct search result, choose another solution.

More examples images of the Live Filter pattern


Live filter within the desktop appliation iTunes.	Live filter implemented at google suggest – with only one category: search string.	At apple.com, search results are presented in a visually pleasing way in a drop-down as you type.