Best UI for filtered search with many filtering options as opposed to single text field
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.
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.
My question is about using lots and lots of filters that are all optional, and displaying them elegantly.
Could you grab a picture of the OKCupid filters... I don't particularly want to sign in there to see them (:
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).
You can also make the filters the focus of the page and fun - like I did in this early stage design idea:
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
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.
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.
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.
Hope this helps.
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!
They have an even better implementation here: http://dnauck.github.io/angular-advanced-searchbox/ would love to see someone do a plugin for this that's non-angular
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.
I think Atlassian Jira does it very well. In Jira there can be enormous number of filters. Most users want a subset of those. Jira solves the problem by showing by default the most commonly used filters. All others are hidden under a "More" dropdown button. The user can choose to add/remove any additional filters.
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.
You should narrow the search scope. Guide the user through major steps so you don't need a lot of filters. Let your system remember the choices for the user. That way s/he always knows the way back.
Users will get stressed/frustrated when they have to choose between too many filters. Result... users will leave you site.
True in some cases. But in some intensive data contexts, users want to be able to narrow the scope based on very specific, overlapping criteria. Making these users walk through a guided flow rather than free-form filtering will result in serious user frustration and process inefficiencies.