What's the best UI to use when asking a user for a negative selection (i.e. avoid X)?

Question

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:

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?

Answer 1

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

^{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:

^{download bmml source}

Answer 2

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