I'm working on an AI that can detect people and certain vehicles from a camera feed. The user can configure which of these "objects" they want to monitor. They can choose either people, vehicles or both.

enter image description here

When enabling a category, a "drawer" is opened. See picture below. There I want to allow the user to:

  • In the people category, specify which wearables to look for or ignore.
  • In the vehicles category, specify which types of vehicles to look for or ignore.
  • Per default, both categories are set to detect everything, without any of these "filters".

I started with the design of the vehicles drawer, which currently seems to solve the use-case pretty well: The user can specify which types of vehicles to look for and which ones to ignore.

However, things became a bit trickier when I started designing the drawer for the people category, because unlike vehicles which only belong to exactly one sub-type (e.g a vehicle cannot be a car and a bus at the same time), people can obviously wear wear none, 1, 2 or all 3 wearables at the same time. Also, if you have all 3 enabled, does it mean that someone needs to wear all of them or any one?

I also want the user to be able to specify if the selected attributes are the ones the AI should look for or if it is the ones it should ignore.

This is important because some construction sites require people to wear certain gear when entering the site, while others require people not to wear certain gear when entering (e.g ear protection can be dangerous when workers need to be attentive to their surroundings).


enter image description here

4 Answers 4


Every filter has three states 'must wear' 'must not wear' 'does not matter'

Instead of switching a filter on and of you could provide all three states. Something like this.

enter image description here

I do not know how or by whom the tool is used. Is it used by professionals on a daily basis? Or just every now and then? If so icons and colors might not be sufficient. Is it on mobile? If so make sure the size of the options is big enough to use them on a touch device etc.

Your question about the meaning of the filters (should a person wear all or just one of the items). This depends on the requirements of your users. As is I would definitively expect that all criteria must be met.

If it is really a case that your users need to ad a filter with AND or OR behavior you probably need a completely different approach. But given the examples I think this would make not much sense. Why would I find persons wearing either a live west OR eye protection?

  • 3
    I've never seen the circle icon for "does not matter", so it would probably be best to label each column of buttons to make it clear what they mean. Commented Jun 24, 2022 at 15:30

Don't use switches.

Toggle switches are notoriously difficult to read and are only really meant to be used for two different and mutually exclusive options. Like "Chicken or Fish?".

Do use checkboxes.

Checkboxes are designed for positive/negative or yes/no questions.

Show a checked box for a positive and an empty box for a negative.

In your case, items to look for would be positive, and items to ignore would be negative.

For a master category with mixed positive and negative selections, use the checkbox with a horizontal bar to demonstrate that there's something in there but that the options are not all set as positive.

Three different checkbox states: unchecked, checked, and indeterminate

Whatever you choose to do, make sure you apply it consistently throughout your product.


As others have mentioned, checkboxes/radios are appropriate here vs switches (general rule: if your panel needs a Save button, don't use a switch, because they imply instant change.)

There's space for both categories' options to exist on the panel, so it would be helpful for the user to save a tap and view everything that's being monitored all at once. (If they uncheck People, all of the options under People can be hidden. Same with Vehicles.)

You'll need something more complex like a rule builder if you want to give your user the option to include and exclude combinations of items (like "only monitor someone who is wearing both eye protection and a vest"). Best to define those rules before designing, because the design will change according to what's needed.

Here is a basic pattern, though, that can cover most of the "any" cases (anyone who is wearing eye protection, ear protection, or a safety vest.)

The app's purpose is to track people and/or vehicles, so your defaults probably shouldn't be "track nothing".

Detect drawer with all people and vehicles selected

Your app can track all people and all vehicles and your user can test things out, make sure all is working.

Then, they can fine-tune what to track. Looking at the people section - the user likely either want to narrow it to include a certain population, or exclude a population from the whole. The inclusion function can deliberately exclude those who are wearing other safety items (the system would need to update these boxes in real time, depending on what's checked). The end result might look like this:

Only include those wearing glasses selected

Again, a lot more complexity can be built into this to accommodate combinations. Your stakeholders might want to weigh in on what the system should do, and not do.


As described, the filter has more than one action: select and add/subtract. The functionality should display each action clearly. For example, a checkbox to select and an add/remove button:

enter image description here

  • 2
    Hmm, I'm not sure I'm following. How would you specify that you are interested in people NOT wearing eye protection? How would you specify that you are interested in people that DO wear eye protection?
    – Chris
    Commented Jun 23, 2022 at 13:59
  • Check/uncheck - Add/remove
    – Danielillo
    Commented Jun 23, 2022 at 14:39
  • 1
    Surely an unchecked box with a '+' means the same as a checked box with a '-'... and I'm not sure what the italics and text-indent convey. This does seem unnecessarily confusing for users. Commented Jun 24, 2022 at 14:09

Your Answer

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

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