# UI design for multiple attribute based filtering

I have a movie dataset. The dataset contains movie's attributes like title, actors, directors, imdb rating etc. I am working on a web app which enables user to apply filters on the dataset. For eg the user can filter movies on any attribute of movie:

• Actor = Leonardo Dicaprio Or,
• Genre = horror

And on any combination of these attributes:

• Actor = Leonardo Di Caprio AND Genre = horror AND imdb rating > 7 OR tomato meter >85 %

So,there can be any dynamic combination of these filters.

My question is how do I let users define these dynamic filters? Do you have some example sites doing this in awesome way ?

Somebody willing to select the users from Texas and Alabama would think like state = Texas and state = Alabama and would get zero users selected, because nobody lives in Texas and Alabama.
The previous example illustrates the issues with Boolean expressions mentioned by @user1757436.
IT people understand and love Boolean algebra, and think that everybody else also does. This is why there were so many attempts to publish such UIs.
There is also a skill that we IT-related people have, and that normal people don't, which is the ability to formulate an abstract expression from the top of our heads based on its expected result. Like, a computer program, or a complex Boolean expression.

To skip the issues mentioned above, I'd pose the user an incremental UI, one that worked more like the mind.
For example allow the user the user select DiCaprio and get a lot of films, and the same ol' search form to refine or enlarge the search.
The user's second step could be to realize that she was not very sure if it was DiCaprio or Alain Delon, so she would add all Delon's films, getting instant feedback.
Next, noticing that the current (rather contrived, for the benefit of the example) selection includes too many films, she'd filter it by selecting only horror films.
If the list is still too long she could refine it by choosing only a range of years.

At every stage she'd see the results (instantly, aren't we in 2012?) and a text in English describing the search criteria, like Horror films featuring DiCaprio or Delon, released between 1964 and 2008.

The "we are in 2012" comment means that, in 1998, a database search and the transmission of the results involved a significant amount of resources, while today it does not.
See for example Google, that shows the results almost as you type.

In brief, don't make the users write Boolean expressions, show the results instantly, and let them know what are they looking for.

• hi, do you have any example site implementing such filtering. It sounds like the reasonable way to filter, but I am not able to see the UI which would make it possible. Like I can have a set of select boxes for each attribute, and I can put an AND or an OR relation between all select boxes. But, I don't know how to implement your flexible filtering method. Dec 13, 2012 at 13:10
• Hi shreyj, Look at Google search and how it displays answers when you pause typing. The main idea is not making the user write a fully compliant answer before showing her the results, but letting her learn how it works by updating the result set as she types. Also, search for something like "users do not understand boolean algebra" to get lots of interesting material about this. Dec 14, 2012 at 17:24

This is a difficult problem. It has been studied for decades. I cannot point you to a user interface that meets your needs but I can point you to many attempts at creating this type of UI.

There have been attempts at solving this problem using tiles, Venn diagrams, trees, diagrams, faceted filtering (as mentioned above), and lists. Having worked on this problem a few years ago. Here are some suggestions.

• Look at previous examples on this problem
Research on one of the earliest UIs for this exact problem can be found here.( http://www.cs.umd.edu/localphp/hcil/tech-reports-search.php?text=movie). Look at the last entry on the page - Visual Information Seeking...
• Decide what type of searching/filtering you are trying to support.
There are several taxonomies of search/filter. I like this one.(http://www.designforcontext.com/files/dd-smcd_search-models_ixda_20120222.pdf)
• Decide whether you really need a UI for building a complex query
The example query from the question is

Actor = Leonardo Di Caprio AND Genre = horror AND imdb rating > 7 OR tomato meter >85 %

The number of people searching a movie database that can build that query and understand what it means is quite small because (1) many people confuse the meaning of AND and OR in queries, and (2) adding more Boolean operators increases the likelihood that your user's will not understand what they are creating. This is the conclusion of the research cited above.
• Support the simple case of implicit AND or implicit OR.
Most UIs for creating complex filters support either implicit AND or implicit OR in the primary UI. The UI for building a more complex query is hidden. I realize this is a statement of the obvious but it is the most common UI for this problem because it works well in most cases.
• If a complex UI for a complex filter is absolutely necessary, create one based on much of the research on faceted filtering and dynamic brushing. Omniscope (http://www.visokio.com/omniscope/demos) is one example.