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.

  • 1
    So, what you want is suggestions about the design? If that is what you want, we can't help you much with that. If you want input on the interaction of the user and the form you mention, I recommend that you explain a bit better the relationship between components. Or even better, try to make a wireframe, that way the help that you will get would be much better.
    – PatomaS
    Commented Mar 27, 2014 at 6:29
  • 1
    A wire-frame would be appreciated. As for right now, I'd suggest looking at other applications to see how they do filtering. But that might be because I misunderstand the question.
    – Dirk v B
    Commented May 26, 2014 at 7:31
  • have a look at this question: ux.stackexchange.com/questions/22277/… Commented Jun 30, 2014 at 19:49

2 Answers 2


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.


To me it seems like there are two clear options:

[        the                                   ]
[        form                                  ] 

[dropdown dropdown dropdown dropdown][submitbtn]


[        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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.