I’m completely in love with this new commercial by Freschetta that demonstrates what “faceted filtering” would look like in the physical world.
Pattern Definition
Faceted filtering is a mechanism that allows the user to progressively reduce a large group of items by selecting the desired attributes from various dimensions (or facets) of those items
Note: faceting filtering is different from faceted navigation or browsing — while navigation is simply multiple entry points into viewing a large set of data, filtering is specifically the ability to pair down that list.
Resources to learn more about faceted filtering
- Best Practices for Designing Faceted Search Filters by Greg Nudelman – UXmatters
- User Interface Implementations of Faceted Browsing – Digital Web Magazine
- OfficeMax search results by Konigi
Examples of faceted filtering (within faceted navigation patterns)
Got more?
If you have any other examples of faceted filtering in the real world, please share them in the comments!
[This is the beginning of what I hope will be an occasional series on my blog titled …in the Real World, in which I explain various design patterns and user interactions by illustrating how they would be implemented off the web]
Related Posts:
- Onboarding: A Sidebar in “Designing Social Interfaces” October 6, 2009 | 23 comments
- Get a 15% discount to DelveUI in NYC July 23, 2009 | 4 comments
- Class Schedule for MFA in Interaction Design at SVA December 17, 2008 | 0 comments
- Helvetica & Lessons for Experience Designers September 21, 2008 | 10 comments
- Twitter tweaks the homepage, again April 1, 2009 | 5 comments
I see car commercials like this all the time.. I think perhaps Car Soup had a similar commercial.
Great post.
Another example I recently saw is this one from the NYT:
http://www.nytimes.com/interactive/2009/11/06/b…
I really like the way the graph reacts to the filtering options on the top.
Great example! There's a faceted navigation collection in my search patterns library:
http://bit.ly/A5iJ
I'm not sure I understand your distinction between faceted navigation and faceted filtering. Faceted navigation systems are designed to support filtering. They let people pair down a list of results. Can you explain the distinction you're making? Thanks!
Thanks for the comment, Peter, and for the great link.
I have actually seen several faceted navigation systems that are *not* additive — meaning that each facet provides another entry point into viewing the information, but the facets cannot be combined. An example of this would be Endeca's guided navigation functionality for search results, which allows the user to filter by only one facet at a time.
How would you more clearly make this distinction?
Now, if we could only make faceted search do Natural Language Processing and Semantic lookup like this. :)
For most Endeca implementations I'm aware of, users can combine facets, one step at a time. For instance, at Newssift.com…
http://bit.ly/TBM4a
…I can search for “iphone” and then filter by sentiment, then organization.
Alternatively, there are rich examples that avoid page reload:
http://www.volkswagen.co.uk/#/new/
But, I don't think that's the distinction you're getting at. I think you're referring to a simple browse by facet capability, which would only be useful for small data sets. Either way, I think we agree that faceted filtering in the real world is cool :-)
This is so funny. Just last night after I saw this exact commercial, I was telling my husband that I wished something like this could be possible in the real world. It seems like the grocery store is one of the last places that's actually more convenient than online shopping (particularly for produce and frozen foods).
He said there used to be a service where you could order groceries online and they'd be delivered within 24 hours. I'm sure there are still similar services out there. But can you imagine something like this at the actual store? Just type in a few filters and, like a vending machine, your food shoots out and lands in your buggy. If only!
And by “real world”, we mean a CGI-enhanced video.
(But I see your point.)
Here's another example. Multiple filters being applied.
That is an *awesome* example, and a commercial I'd never seen before. Thanks so much for posting it here.