User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

My web app shows a list of tasks. I can filter them (for instance by done/todo, etc.) along 3 or 4 criteria. What kind of UI is the best to control the criteria ?

All criteria are "closed", i.e. there is no text input like a search field for instance.

share|improve this question
The post title says buttons, are you sure you want the UI element to be a button or is the question open to all kind of UI elements? – Naoise Golden Jan 4 '12 at 15:34
up vote 0 down vote accepted

I can merely guess what your list looks like, but what about some kind of segmented control above the list? If you make it possible to select more than one at a time, it's like checkboxes, just better. ^^

Showing: enter image description here

Where One Two Three in your case would read Todo Doing Done.

share|improve this answer

If your options aren't many in number, and aren't mutually exclusive, the typical pattern is to use checkboxes. Checkboxes are quick to parse and fast to manipulate.

If the options are small in number, but mutually exclusive, stick to radio buttons.

If the options are large in number, or there are many categories, and they are mutually exclusive, employ a dropdown menu. Dropdowns are the least attractive option as they hide their options by default and take slightly more mouse action to operate.

share|improve this answer

There are several options available and it all depends on 1) the number of options that can be selected at once and 2) the available space.

"One option selectable, little space available" would be a drop-down list.

"One option selectable, plenty of space available" would be radio buttons or a variation thereof with JavaScript & CSS.

"Many options selectable, little space available" would be a drop-down list with check boxes next to times akin to what most spreadsheet editors offer for filtering.

"Many options selectable, plenty of space available" would be a list of check boxes or a variation thereof with JavaScript & CSS. Alternatively, you can employ a list-box but you would need to instruct users to hold CTRL when selecting multiple items & the interaction might not be as smooth as with others.

share|improve this answer

Use a drop down

enter image description here

A drop down will allow you to choose from a predetermined list of options and display the chosen option (if there is a single option).

share|improve this answer

Ideally, rather than employing a drop-down, you would make a custom scrollable list containing the items and checkboxes. See Gmail, or the interface for selecting friends when inviting them to a Facebook event for examples.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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