I'm working on a filtering capability for venues. One group of filter options requires me to account for 3 different states.

  1. Unselected (neutral, user doesn't have a preference)
  2. Selected, Yes
  3. Selected, No

User may only select one item at a time (can't select both). User may also unselect items once they've selected them.

Keep in mind this will be for mobile on Android. To give you a clearer example I've attached a couple of images on the directions I've been working on. Which layout do you think is most usable, and will be easiest to interpret by the user? Appreciate your input.

Option 1 - Stacked

Option 2 - Head to Head

Option 3 - Segmented

  • Just a minor OCD nitpick, I know these are just mockups but if you go with the 2nd option you should switch the choices so that the woman icon isn't above the "male only choice" – DasBeasto Oct 6 '15 at 13:36
  • The third option looks great to me, but I am more familiar with the control. In the actual results, if your users view a large number of results without making a choice, or there are too few results with the applied filters, then a CTA to remove one of the applied filters may be beneficial. – Daniel Brown Oct 6 '15 at 14:18

I'm not sure if it's entirely related, but you're really showing only two states: Selected and Unselected. You should add a third "No Preference" selection to each subject, if you choose. That may be more clear than "unchecking".

To answer your actual question, I prefer the final option (with the rectangular buttons) as it provides the largest and easiest hit target. Perhaps it would be valuable to provide a "No Preference" option, as I stated. As a user, I would be a little confused about clearing my selection - it's portrayed a boolean choice which is a bit unclear. I would want validation that my choice is plausible, rather than confusion about the form being incomplete or not.

| improve this answer | |
  • I think that adding a 3rd choice (No Preference) will be more confusing, because what's the real difference between nothing being selected, and 'no preference' selected. The reason I referred to it as '3 states' is because it's really as black and white as for example, Wifi 'On/Off' or Share My Location 'Yes/No'... Let's call it 2.5 states :P Thanks for your input, any further comments would go a long way – The Waldorf Oct 6 '15 at 13:54
  • One more thing to keep in mind, I have added a clear 'X' icon on the far right. Not sure if you've noticed it. Does that not serve as a clear option for the user to clear their selection? Thanks – The Waldorf Oct 6 '15 at 13:58
  • There is no difference between a 3rd choice and nothing selected. However, I feel this UI is cross-threading radio buttons and check boxes. Take input forms that ask you if you're a protected veteran for hiring - they offer "Yes, I am a veteran", "No, I am not a veteran", and "Prefer not to disclose". This makes it clear to both the user (them) and the solicitor (you) that the input was considered and completed. Otherwise, the form is in an ambiguous state of both incomplete and complete. It's unclear unless you know the user's intent. – Fedoranimus Oct 6 '15 at 14:01
  • I did notice the "X", however, that doesn't apply to my above statement, I don't believe. – Fedoranimus Oct 6 '15 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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