1

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

2
  • 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. Oct 6 '15 at 14:18
2

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.

4
  • 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 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 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. Oct 6 '15 at 14:01
  • I did notice the "X", however, that doesn't apply to my above statement, I don't believe. Oct 6 '15 at 14:02
0

this is an age-old question. I first saw satisfactory implementation in NeXTSTEP in 1990, and in some Windows applications including Windows 95 file manager file property-sheets around 1997. Still often not done properly.

this comes up in your context, search criteria entry. this also comes up in any context where Properties of many objects-- a multiple selection-- can be reported (shown) for all objects at once, and can be manipulated (set on all objects to a particular value, in one action).

the problem is that a checkbox can only express two values: True or False. This is the PRESENTATION of data TO the user, not the INPUT FROM the user.

many misleading and error-prone UIs conflate a boolean False value of a checkbox widget with an "indeterminate" or "does not apply" (your case), or "varies among the selection" (my example above), leading to wrong answers being provided by the computer to the user (because "False" cannot be specified as search criteria), or data corruption (because the user appears to be setting all objects to False for that attribute).

NeXTSTEP and Windows implemented this using a tri-state checkbox; that is, a checkbox that displays three possible visualizations, false: empty [ ], true: checked [x], and indeterminate: [~]. And allows the user to rotate from among them: in a Search Criteria context, from among all three choices; in a Multi-Objects Properties contexts, from among True or False as positive-to-be-done actions*.

sometimes instead of [ ][x][~] the visualizations were [N][Y][gray box] etc

When I designed UIs using this principle for plain HTML where built-in checkbox widgets cannot be modified, I generally used a drop-down menu (SELECT tag) with the three values instead of a checkbox.

*if these widgets are on a dialog or pane whose action only takes place at a later time when OK or Search or Apply is clicked, then it's ok to rotate back to the third choice, effecting a "nevermind" gesture. However, if widgets are instant-acting and modify the page or data immediately, then upon refresh the third choice would no longer apply. Be careful of "instant actions" on multiple selections, it's a great way to put a gun in users' hands by making it trivial to corrupt data widely with a single click! (such situations should not be 'instant acting', it's too dangerous).

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.