Wednesday, December 27, 2017

filtering - Which is better to design a Filter?


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


mockup


download bmml source – Wireframes created with Balsamiq Mockups



Answer



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.


mockup


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.


mockup


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.


mockup


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.


mockup


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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...