Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What UI provides the best user experience when searching using many filters as opposed to a single text input.

For example: I have 15 filters (all optional) that users can filter results by. The emphasis is on these filters, not a text search. What is the best way to display all these filters without being overwhelming and created a cluttered interface?

The only site that I've seen that has managed to do this decently is OKCupid, which allows the user to select, then customize, a specific filter from a list.

share|improve this question
    
Not sure I understand your question. There are hundreds of sites with lots of filters e.g. jobsites, shopping sites What is unusual about your filters? For any site it depends on the context of the problem. –  Lisa Tweedie Jun 9 '12 at 0:07
    
My question is about using lots and lots of filters that are all optional, and displaying them elegantly. –  Garen Checkley Jun 9 '12 at 1:20
    
Could you grab a picture of the OKCupid filters... I don't particularly want to sign in there to see them (: –  Lisa Tweedie Jun 9 '12 at 10:34
1  
Check: behance.net 's interface! –  steppenwolf Jun 20 '12 at 21:07
add comment

4 Answers

Filtering and searching are similar but different problems. Most web designs employ a combination.

Take amazon.com for example. SaaS apps displaying relational data often use filters on grid controls. A good example of very scalable pattern for that type of problem that is backed by research is http://mspace.fm/mspace

Depending on the details of your problem you might be able to just use traditional form controls like the OS X Finder displays when doing advanced "search". Just remember that users don't always understand (or care) about the distinction between search, filter, or similar things.

share|improve this answer
add comment

Lots of sites have problems with too many filters for search. Most sites offer a basic and more advanced filter options - these need to be carefully researched to identify what the basic research criteria should be. Then you have to carefully design the filter to fit each criteria. There is something of an art to this.

I do think in general it is best to go for the list layout rather than a dialog. For one this gives the user the option to open and close accordians to customize the criteria to the those they are interested in.

One sector it might be worth looking at for ideas is job search sites. They typically have exactly this problem and deal with many many different types of user. One solution is to allow users to select the filters they want and show them as tags at the top... in effect allowing users to visualize their query. For instance Reed show the query items in orange at the top ... you can delete them at any point. They also do a good job of choosing the filter widgets for each criteria and showing where the data is (sensitivity information).

The reed employment search bar

You can also make the filters the focus of the page and fun - like I did in this early stage design idea:

Balsamiq mockup of an advanced search page with sliders and buttons

This is the initial search page after the user has selected "Advanced search" - simpler filters and buttons were shown on the results page in a left nav for further what if fiddling. Sketch done in Balsamiq Mockups

share|improve this answer
1  
Your mockup seem pretty sophisticated, but I wouldn't go for it. At first, it is too big, roughly 2-3 screens tall, so you have no overview. Second, user has no feedback, what will he get. It results to pinging back and forth through form and results pages. Personally, I hate that kind of searching. No offense. –  Frantisek Kossuth Jun 10 '12 at 11:51
1  
To me this seems like an intimidating interface. Would be fine if it was part of a workflow where users are trained, but overwhelming to a new user. Just my thought. –  Garen Checkley Jun 10 '12 at 17:25
1  
You should have seen the original search panel! Firstly this is the advanced search option. It was only for initial search... the results page had filters left and results right in a more standard format. But I agree still way too many complex concepts. I put it there to illustrate an extreme. –  Lisa Tweedie Jun 10 '12 at 19:07
add comment

Faceted navigation has become a very popular search pattern to solve situations like the one you describe. Amazon uses it very well.

Extract of the book Search Patterns about faceted navigation, by Peter Morville and Jeffery Callender:

In keeping with the principles of progressive disclosure and incremental construction, users can formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps.

I also like how Gmail integrates advanced search into the search box, using keywords to narrow the search.

share|improve this answer
    
That Search Patterns site is amazing ... thanks for the link. –  Lisa Tweedie Jun 14 '12 at 23:24
add comment

I have been using this control and it has helped me bringing in clarity to any kind of search criteria to my end users. This is a javascript plugin by DocumentCloud and its called as Visual-Search. Its a stunning plugin and by far the best way to represent searches. You add as many filters as possible, it still is very clean and clear for the end users to use it and that is exactly what any one looks at when using an application.

Hope this helps.

enter image description here

share|improve this answer
    
Re: "by far the best way to represent searches", such an extraordinary claim demands extraordinary proof. What makes this the best solution? Do you have user testing or other evidence to support that claim? If so, we can all stop looking! –  Kit Grose May 27 '13 at 23:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.