What is the best design for buttons filtering a list?

Question

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.

Answer 1

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:

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

Answer 2

Use a drop down

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

Answer 3

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.

Answer 4

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.

Answer 5

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.