2

Assume you're a dietitian asking what foods someone avoids (dietary restrictions), what's the best UI to use?

Some examples I've toyed with:

Checkbox Selection

Source code at http://codepen.io/anon/pen/OpKKNd

Is there a better way to display this UI or maybe ask it differently so there's no confusion as to what the user is selecting? Is there a technical term for this type of selection?

Omar
  • 123
  • 4

2 Answers2

6

You're overthinking this and causing some kind of weird double negative. You're asking for active user input - in order to deselect - what the user doesn't want. That is a very confusing anti-pattern.

Just have the user actively select what they want to avoid from a plain list (no pre-checked boxes).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Another solution might be to have dropdown menus which make it more explicit what is being selected:

mockup

download bmml source

jered
  • 266
  • 1
  • 4
  • Any concern that this form makes it appear as though you want what you selected given the check mark next to each item? – Omar Apr 10 '17 at 22:31
  • @Omar I don't think so. It's a fairly common pattern to have users select something they want to avoid or remove. In the context of a dietary plan I think it would be pretty clear what selection is being made. I added another possible solution with dropdown menus which makes it more explicit. – jered Apr 10 '17 at 22:41
  • It's also worth noting that on all medical forms, you specify allergies by the checking ones that you have, not the ones that you don't have. Checking allergens that you want to avoid would be consistent with that. – 17 of 26 Apr 11 '17 at 15:53
1

To avoid double negatives, use selection on what you want to avoid, BUT you could give a better reinforcement of the avoidance concept using striketrough text.

Something like that:

Select the allergenes you want to avoid:

+ Nuts

- Dairy

TheManuz
  • 51
  • 3