How should I design a “filter” screen where you can filter on many fields

Question

I have a webpage that has a filter screen where you can select filters on one or many fields and these filters are applied on other pages when it grabs data from my DB. Some of the fields have dropdowns, some other fields have textboxes (where you can do partial string search) and many other fields are multiselect list boxes (like this).

I show this page in a jquery dialog but now i have over 30 fields you can filter on so the vertical scroll bar is getting out of hand. Is there any more elegant UI for showing a screen where you can filter on many different fields without having to scroll all over the place? An example website that do this well would be great

Answer 1

I also had the problem of having to display lots of filter options for many different fields. In my case, I was able to estimate which filter options were most likely to be used and so I only displayed the top 5 most likely options with a "+{number} more" link. When this link was clicked, a jQuery dialog box would open with the full list of filter options, along with a simple search tool.

I think the key to any elegant solution would be to only show a useful subset of the filter options, as to not overload the user with options. Of course, this depends on how well you are able to measure the usefulness of a filter option, if at all.

This is what the main set of filters looked like:

Is ther any alternative UI option for Sharepoint Ribbon Bar? Each "filter group" takes up a relatively small amount of screen space -- about ~110px wide. This meant I was able to make good use of the horizontal screen space, overflowing to another row if needed.

The dialog box for all filter options looked something like this: