14

I'm designing dietary preferences filter for a food ordering app. unlike regular filters where users want selected filters to show, in this case the users will be selecting what they DO NOT want in their food. As this is a sort of exclusion filter.

enter image description here

this is how i'm designing it. i'm concerned as this is the reverse of the the filter logic that users are used to, will this be intuitive? is there a better way to do this?

Improve this question
1

7 Answers 7

Reset to default
14

You could make the labels of the checkboxes negative (e.g. Pork-free or No Pork). I would change the checkboxes to toggles as it makes it more clear whether you tick something to be excluded or to be included.

dietary filters

This a very similar problem when you exclude means of transport when searching for a route. You might find some more inspiration there.

Means of transport

Improve this answer
6
  • 3
    That's a good idea, but to ensure full clarity I would add checkmarks to the selected options.
    – Steve O'Connor
    May 27, 2020 at 11:48
  • 3
    One nice thing here is you can also add positive terms like 'Vegan' or 'Kosher' to the list right next to 'Nut-free'.
    – Jeremy Nottingham
    May 27, 2020 at 19:25
  • 13
    I don't see how it is any more clear when they're checkboxes versus filled buttons. To me, it is a lot less clear what a filled button means than a checkbox. The latter is a standard widget; the former is something of your own invention. The major difference is that you've labeled the options with "-free", rather than relying on the title of convey what to "exclude".
    – Cody Gray - on strike
    May 28, 2020 at 7:14
  • 1
    I like the idea of making the items themselves negative, instead of the preamble (which people tend not to read). A slight tweak: instead of ‘Xxx-free’, how about ‘No xxx’?
    – gidds
    May 29, 2020 at 14:00
  • @CodyGray I think togglebuttons work better with negative items than checkboxes (e.g. [ ] Chicken-free; does it mean that I do get chicken or does the label in the checkbox react to the checked state). Togglebuttons are very common, e.g. in text editors for making text bold or italic (toggle buttons in material design).
    – Nash
    May 29, 2020 at 20:55
11

Does creating the filter in this way break consistency with other filters you are using? If so it would be better to find a way to create a filter using consistent logic by rephrasing the query.

The first option below (on the left) has all options in the list preselected, so the user can unselect specific foods as per their requirements.

The second option (on the right) rewords the question to ask what they want to avoid eating, so they can check their preference.

"Include foods that contain" list with all items checked vs "What foods do you want to avoid?" with only one item selected.

Improve this answer
12
  • 3
    I find this confusing. In the selection as shown above, do I get meals with mushrooms or not?
    – infinitezero
    May 27, 2020 at 23:48
  • 2
    @infinitezero You get all meals that both contain mushrooms, and that do not contain mushrooms. So you get no food at all. Thanks for playing.
    – Billy left SE for Codidact
    May 28, 2020 at 4:13
  • 3
    They're two different options for a UI, @infinitezero. You would not see both of them simultaneously. If you look only at the right, it is obvious that you would not be served food containing mushrooms, since you've asked to avoid them.
    – Cody Gray - on strike
    May 28, 2020 at 7:15
  • 1
    There's a big difference between the two images. The first can give the impression that you have to choose things you prefer to eat, the second makes unambiguously clear that you have to choose what you prefer not to eat, and that's the actual question here.
    – jazZRo
    May 28, 2020 at 8:49
  • 2
    As @CodyGray point out - they are two different options :)
    – Steve O'Connor
    May 28, 2020 at 10:17
4

I think the answers so far are missing an obvious trick. Combine the include and exclude filters. Each item has a radio button for include and exclude.

Here the user would like to see food that contains chicken meat and nuts but does not contain mushrooms.

-- Filter by ingredients --
    Inc. Exc.
     ☐   ☐    Prawns
     ☐   ☐    Pork
     ☑   ☐    Chicken meat
     ☐   ☒    Mushrooms
     ☑   ☐    Nuts

This is similar to Steve O'Connor's answer, however, I think it is subtly better because it allows the user to communicate statements such as "I don't care what's in it, I just don't want mushrooms" and "I know that I definitely want chicken".

Supposing you have a large list of possible ingredients you could have a search box that lets you filter the options. Here the user has already decided they want pasta, so the option is 'stickied' to the top of the list, and now they want to check the dairy options.

-- Filter by ingredients --
    Inc. Exc. [Dairy]
     ☑   ☐    Pasta
    -----------------
     ☐   ☐    All Dairy
     ☐   ☐    Butter
     ☐   ☐    Milk
     ☐   ☐    Cheese
     ☐   ☐    Yoghurt
Improve this answer
3

You don't want this filter to look and work compeletly different from the other filters. It's all about the right title/label above. Make it unambiguously clear. Maybe you have to add a description below the title that explains the purpose of the filter a bit more.

Also you can make the filter show the "exclusiveness" a bit better by adding a strike-through:

enter image description here

Improve this answer
3
  • 1
    If you have to explain the label though, that suggests the label is problematic and so should be changed if possible.
    – Steve O'Connor
    May 28, 2020 at 10:20
  • @SteveO'Connor I can only agree with that.
    – jazZRo
    May 28, 2020 at 12:05
  • 2
    I am sorry, but I would hate it. Striking it out next to a checkbox does not make clear if the option is disabled (unavailable?) or negated or if it should be active. So you have three positive/negatives shown here: "exclude" in the title, then the checkboxes and then the strike-out and to me it looks a bit like double-negative to strike out something in an exclude-list.
    – allo
    May 29, 2020 at 20:43
1

What is the goal for this selection list?

Depending on the answer to that question, the solution might look different. For example:

  • If the filter addresses customers' allergies, you could rephrase the heading accordingly:

    enter image description here

  • For more complex dietary restrictions, I've seen some airlines use a simple popup-up menu with options such as Halal, Kosher, Vegetarian etc.

  • If this is "just" about personal preferences, I'd prefer Steve's suggestion of a list that has all options checked by default, so users consciously have to uncheck something they don't like.

In any case, make sure that whatever design you use will test well with your target users, especially if this is, indeed, about those allergies!

Improve this answer
2
  • 1
    I see no indication that this is related to allergies in any way. Other than nuts and prawns, the things on the list are not common allergens and are likely either dietary restrictions (pork) or simply preference. Airline meal selection is probably a bad example since those are standardized across the industry and there's rules around that so they're limited in how/what they can display. (There's a Q&A on travel SE about this somewhere.)
    – Roddy of the Frozen Peas
    May 28, 2020 at 18:01
  • @Roddy, I've edited my answer to clarify its intent.
    – JochenW
    May 28, 2020 at 23:11
1

I'm taking all the ideas here and making a synthesis of some kind:

  1. List all of the available options

  2. Use a toggle format with a green button to include on the left side and a red button to exclude on the right side, like so:

✓ | Kosher | x ✓ | Meats | x

  1. Make it all neutral in the beginning (maybe whites) — but when the user specifies a direct preference of restriction for any, emphasize that choice (by coloring the toggle with positive colors for the OK-ones and negative/danger colors for not-OK ones)

  2. Move the OK toggles to the top and the not-OK toggles to the bottom of the list.

If you can imagine — I'm sorry, I don't have immediate access to a computer right now for graphical presentation purposes — Gmail's treatment of email addresses in the To box. You get toggles with X's to delete on the left hand side.

Improve this answer
0

Bouncing off Robin above, fundamentally you are either wanting a list item or not.

So IMO might be to make switches next to them.

To turn them on or off.

No complicated layouts, just a few switches next to the items, perhaps in a wider column that yours in grid format.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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