Best UX approach for grouping filter items for detailed search criteria?

Question

We have a search based site that has a quick search by name, a detailed search with name, a group drop down selection, and address and/or zip code search. However, below this is 4 textboxes, 2 drop downs, 4 check boxes, and 5 radio buttons for advanced search options.

Originally we just had a few items, but things keep growing and we are running out of screen real estate if we just keep adding things in. Is there a better UX design to group or categorize filtering criteria or is the fact that we keep adding more filters eventually going to make the selections confusing to the users? How do you balance simplicity with functionality in a case like this?

Here is a screenshot for the advanced search options, with text marked out as it's a commercial site.

Answer 1

Filter items can be as long as they need to be to give the user all they need to complete their tasks efficiently, and get the results they want and expect. To base how long or in-depth the filter needs to be, that would require some level of user testing to see on average how in-depth the person searches, and the options they need to give them the most optimal result possible, as this all will depend on your user base, and the information you are searching through.

With balancing simplicity with functionality, here is a few tips:

Hide Complexity

An article from Smashing Magazine says it best:

If you can’t kill a complex feature, the next best thing is to hide it. Too often, rarely used yet complex features take up more screen real estate than frequently used yet simple features. This shouldn’t be. A good user interface should make the most common tasks the most prominent and then hide rare tasks so that they don’t get in the way.

An option in this case, is to hide the additional filtering fields and have them be opened by a link that serves as a dropdown. This will drastically minimize the screen real estate, and make it easier for users that just want to do a simple search, but keeps the main fields that are required, or most used, shown initially.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Organize Information Into Groups

One thing I noticed from looking at your current form, it's all in one box. This may be okay for the search functionality you have now, but once you start adding more and more fields, it can get overwhelming to the user, and cause a lot of unnecessary cognitive load. A simple solution for this case is to organize your fields into groups of similar data.

^{download bmml source}

This allows the user to evaluate just the group of information, and determine if they want to filter by that data or not, if so, they can skip it all together, instead of having to evaluate each individual field. It also makes it easier to find the information the user wants to search by.

Simplify Select Options

As you add more and more options to a multi-select box, this will take up more screen real estate. A solution to this is to hide the full list of options, and only show the first, or most used options initially. In this example, 2 options may not be sufficient to hide additional options, but once you get to around 10-15 options, that's when I would go ahead and hide the additional ones.

^{download bmml source}

These tips are of course not all you could do, but should give you a head start on cleaning up the UX before you start adding in a lot more filtering options and it gets really heavy.