Which is better to design a Filter?

Question

Which is better for filter, select a single value:

1. Check box ( Use js to keep single selection )
2. Dropdown list
3. Radio buttons
4. Highlighted labels

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

Answer 1

It depends on what you want to do. :)

• Use checkboxes (or other toggle buttons) if you want to provide for applying several filters at once. If you want to use them for single value, then listen to @AndroidHustle regarding manipulating them, and only use them for single, independent, boolean values.

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

• Use dropdown, combobox, or autocomplete-box to hide the alternative filters behind a dropdown, typically a great idea if you have an endless list of filters.

^{download bmml source}

• Use the Radio Buttons or the Segmented Control to clearly print out what options there are, typically sorting on a distinguishable attribute.

^{download bmml source}

• Finally, the Segmented Control (iOS term) differs from the Radio Button group with the advantages of fitting in one row, and it resembles the use of a Tab Bar more than a filter, if that is what you are after.

^{download bmml source}

Edit:

Come to think about it, depending on what you want to filter on, the list goes on for each control there is. DatePicker, free text, Multi-value-controls, position sliders.

Without context, platform, content, and so on, there is not one single correct answer to this question. :)

Answer 2

You should never manipulate a checkbox option-group to act like a radio option-group, this violates the conventional and expected behaviour of the user interactive element. So no single select checkbox.

Dropdown list Vs. Radio buttons: This really depends on the layout of the search form (if that's what this is) and how many options there are. Radio buttons are good for 2-3 options, any more and they start occupying a bit too much space and a dropdown would be preferable.

The highlighted labels panel follows a similar interactive pattern as a radio option-group. Difference is that it can be more seamlessly integrated into the aesthetics of the applications. Again, like with the radio option-group they could easily crowd if they get to be too many. However, in my experience, in contrast to radio-buttons, they often indicate real-time filtering, for example like searching for an area and in real time filtering cars, motorcycles and bicycles that are for sale in that area. This may be because they resemble tabs in look and feel which in their turn are immediate interactive elements. Using it to beforehand set up a search in a search form is somewhat unfamiliar to me.

Answer 3

It really depends, I think:

• radio button: if there are max 4-5 options to choose from
• dropdown list: if there are max 20-30 options (they use it for around 100 options, but in this case it is really hard to use)
• tabs: if there are only a few options, and tabs fit into your UI
• filter field: if there are more than 100 options to choose from

Generally I would prefer filter field with suggestions and/or autocomplete.