Live Filter Edit
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 example 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.
This document is in version 2 and was last updated on Oct 21, 2009 by generock. The original author of the design pattern was Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
See it in action
Live Filter has 15 comments
-
over 2 years ago
Nicolas
1 Feb 2008
Piece of shit. You claim to give UI patterns, and then you talk ONLY about web apps???
-
over 2 years ago
Gary Bartos
1 Feb 2008
Nicely done, Anders! As a designer/developer of desktop-bound apps, and as someone who has studied design in depth, I will counter the previous comment by claiming that any good designer can see value even if some UI patterns are specific to the web.
Sometimes all a designer needs is an inspiration from a few sentences and screenshots. A site like yours makes this possible, and I consider the site a valuable resource.
For a general review of design, I recommend the book Universal Principles of Design by Lidwell, Holden, and Butler.
-
over 2 years ago
racerx
1 Feb 2008
I love this site. Programmers often have a hard time understanding that their skills in UI stink and the users of there sites would agree. What good is your site if it is unclear how use it?
-
over 2 years ago
The Checker
1 Feb 2008
Good points. One thing though, you need to spell check your copy. Even at the top of your home page, “It has long been common practise to use recurring[...]”—“practice” is misspelled.
-
over 2 years ago
Jeremy Gugenheim
2 Feb 2008
Nicolas simply proves that this is a useful site. We have one set of eyes and we see the whole world through them. All UIs should conform to our views of the world. Intuition, comfort, whatever skill we use to navigate an application, we can only use if the application is navigable. For most people it is comfort. Developers may use intuition but only because we use this stuff every day. Which is one reason I got out of development – it is full of people who know that their way is the only way. Tosh. Utter tosh. Since when has a web site not been an application? Think about it – an ATM is an application, but it behaves a lot like a web site. a kettle is an application but doesn’t behave anything like a web site. Amazon is a web site but behaves like an application. And they all require a UI. Good on you Anders, I look forward to seeing your site flourish – I’m dropping a bookmark here. Thanks.
-
about 1 year ago
greenmoss
1 Mar 2008
Thank you for the inspiration.
-
about 1 year ago
James Kelway
1 Mar 2008
Hi Anders. Great to see this site and it does fill some gaps already. Keep up the good work as sites like this and welie.com are too few and far between. Cheers
-
about 1 year ago
Robert
11 Mar 2008
There is no ‘visit’ function on the links of the UI Design patterns list. How do i know witch one i have seen?
-
about 1 year ago
Anders Toxboe
11 Mar 2008
Robert: Good point – I just added more correct link styling to cope for this.
-
about 1 year ago
Janko
26 Mar 2008
Good site. No matter what anyone thinks, I appreciate your efforts.
P.S. RSS feeds would be nice :)
-
about 1 year ago
Antonio
26 Mar 2008
I like this site. ¡Congratulations!
How can someone contribute?
-
about 1 year ago
BerGriern
27 Mar 2008
Snx for you job! It has very much helped me!
-
about 1 year ago
Kevin Jensen
4 Apr 2008
Site is great but RSS feeds are necessary.
-
about 1 year ago
Anders Toxboe
4 Apr 2008
Kevin: Try this RSS feed: http://ui-patterns.com/rss
-
about 1 year ago
Scott
10 Apr 2008
Great site! Very useful!