49

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.

Improve this question
5
  • 1
    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, 2012 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, 2012 at 1:20
  • 4
    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, 2012 at 10:34
  • 3
    Check: behance.net 's interface!
    – steppenwolf
    Jun 20, 2012 at 21:07
  • It will depend on the user journeys. Can you elaborate on your app and the filters and how a normal user might use them? From there, some filters might get priority and be shown earlier (progressive disclosure)..
    – Ades
    Feb 4, 2015 at 10:05

6 Answers 6

Reset to default
20

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

Improve this answer
3
  • 4
    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, 2012 at 11:51
  • 2
    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, 2012 at 17:25
  • 4
    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, 2012 at 19:07
13

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

Improve this answer
3
  • 3
    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, 2013 at 23:37
  • 4
    They have an even better implementation here: dnauck.github.io/angular-advanced-searchbox would love to see someone do a plugin for this that's non-angular
    – Sabrina Gelbart
    Jun 18, 2015 at 13:17
  • Exactly what I was looking for. Easily the best way to represent search so far that I've come across.
    – Shaz
    Aug 19, 2015 at 2:32
8

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.

Improve this answer
1
  • That Search Patterns site is amazing ... thanks for the link.
    – Lisa Tweedie
    Jun 14, 2012 at 23:24
3

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.

Improve this answer
2

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.

Improve this answer
0

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.

Improve this answer
2
  • 1
    Can you back this up or provide examples of why this is a better idea?
    – 80gm2
    Jan 6, 2015 at 15:52
  • 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.
    – plainclothes
    May 22, 2015 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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