Layout of filters in HTML form

Question

I'm struggling to figure out a decent way of laying out a filtering system in an otherwise simple HTML form.

For context, the form is used to submit issues, like those you see on an ISP or web host's server status page listing all the current issues. The filter is to determine a subset of users that are affected by the issue. There are several different kinds of filters and there can be anywhere from one to a couple dozen items in each filter.

So when filling out the form, the system admin can either use the default setting which is all users, or select one or more filter items from one or more filter lists.

I know the description is fairly vague, and I don't have any concepts to provide clarification, but any suggestions would be much appreciated.

Answer 1

I have found that you get better usage when your filters are laid out in the same pattern as the fields on your form. Users seems to like have the User Name filter field in the same place as the User Name data entry field.

This will not work as well when you have dozens of fields on your form. It can be much simpler to give the users a single field in which to enter search criteria with a Search button. Then it falls to the developer to make the search query against all of the appropriate fields. Also, the single search field in the upper right corner is almost ubiquitous.

Answer 2

To me it seems like there are two clear options:

[        the                                   ]
         bulk                                  
         of
         the
[        form                                  ] 

[dropdown dropdown dropdown dropdown][submitbtn]

or

[        the                          [dropdown]
         bulk                         [dropdown]
         of                           [dropdown]
         the                          [dropdown]
         form                       ] [submitbtn]

Putting the dropdowns above your form area will obscure the form input when you want to select something.

Putting them on the right side is a nice touch because they are all stacked, but is a bit more technically involved and also obcludes vews of the dropdowns that live below.

Just some ideas. Hopefully they are useful to your creative process.