How to allow filtering Films in my app intuitively? (GUI design)

Question

I am not sure if this is the right place to ask this but I wrote an app that shows all the movies in one's computer with the appropriate info such as genre, director, rating, etc.

I am wondering how can I make it so that the user can filter them based on criteria such as genre, rating, etc?

Most of them are enums, and I was thinking of using a ComboBox for these but they should be able to specify more than 1 genre. So should I use ListBox controls for these? Then it will be harder to present all these options in listboxes.

I haven't seen any examples of apps doing similar things, that's why I am not sure.

Any ideas?

Answer 1

You can implement or get elsewhere a custom component that allows for checkboxes in front of items in a drop down list, similar to what you can find in Excel.

Another option would be to have a button that says "Filter..." and then you open a dialog box in which you have a drop down list with the criteria, e.g. "Director", "Genre", etc. Depending on the choice of the criteria you could then offer the values, e.g. when "Director" is selected, a list box could contain the names of directors. When "Genre" is selected in the drop down, the list box could contain the different genres. Each of the value lists could also contain the value "All" as the first entry. When you click this it ticks all entries in the list.

Upon closing this dialog box you probably want to also indicate somehow that a filter has been applied. Maybe in the column header.

Of course these are just some very simple suggestions. User interface have a gazillion options for how to represent something and you make it very flashy. At some point it is a matter of taste but you certainly want to try out your UI to see whether it works with others.

Answer 2

If you're building something like this, look at the competition. Copy what's good and improve what's not.

Here, you can take a look at how IMDB does it, they have a simple text search and an advanced search. This allow you to search all or your own movies by rating (0-10), year (e.g. all movies between 1960 & 1970), language, country, genre,...

Answer 3

Put a textbox in each Column Header.

Example :

Putting I inside the filter textbox filters the datagrid to only show Country starts with I

I agree that UX Stackexchange is a better place to ask.