I'm developing a table that shows incoming deliveries. One column shows whether or not the material/item in question is hazardous, and while a reason is given, it's only really necessary for me to display yes or no in this use case.

Naturally, yes has positive connotations. So if I represent it with a checkmark, some people would assume that this hazardous object is safe, thanks to that data. Long story short, a checkmark could mean "yes, it's hazardous" or "it's okay".

One idea I had was to display nothing in that column, or a warning symbol if it's hazardous, but I'm second-guessing myself there. I'm wondering what's the least confusing.

EDIT: Note that users won't be able to interact with the table. It's just on a dashboard.


  • 1
    Displaying a symbol on hazard is probably the way to go. Some (most?) countries will have "standard" icons for different hazards (and perhaps a generic one) ... see for example this UK Health & Safety Executive page (although I've seen others in yellow). – TripeHound Aug 30 '17 at 9:48
  • TripeHound has my comment, is it simply that the delivery is or isn't hazardous? If so, is there mileage is showing what the hazard is, as many items can be hazardous in different ways. – DarrylGodden Aug 30 '17 at 10:14
  • @UXfrom12 why do you need mileage? Or did you mean level of the hazardous item? – NB4 Aug 30 '17 at 10:34
  • It's just a term, i.e. something worth investigating. – DarrylGodden Aug 30 '17 at 10:47
  • I'd like to make it that clear-cut, but in this case, it's just a simple yes or no. Image here. All of the items listed are non-hazardous, hence the green and the checkmark, but my doubt is that the checkmark could be interpreted as "yes, it's hazardous". – Simon Fish Aug 30 '17 at 11:01

If you wanna keep consistency of green check marks you can change wording. When you ask about safety (instead asking for hazard), check mark is good option then. checking marks no longer are ambiguous


The problem with the checkmark on the green background is that both the background and the icon conceive a "positive" meaning, something affermative, and not negative.

Answering a question ("Hazard?") with a positive checkmark is not something you would expect: the checkmark usually answers the question "The end status of this thing is OK?". Like what you have done on the last column, where the green checkmark means "the delivery is done, everything is OK".

On the hazard column I'd place the answer to the question, that is Yes or No. The background color should highlight the dangerousness of the fact that the answer is "Yes", or the fact that the delivery is safe so it is not hazardous.

Here is a quick mockup with 2 alternative solutions.

Mockup of answer

[EDIT] The "NO" cell could be even displayed without the green background, if it is not necessary to highlight the fact that the delivery is not hazardous.

Mockup with white "No"

  • My problem with this is that the color provides a positive response whereas the text provides a negative response. I like the concept in your edit, though - drawing no attention to a mundane/safe response makes a lot of sense. – Simon Fish Aug 31 '17 at 7:31
  • Yes, it's tricky because it is a double negative (a thing that is not hazardous: it is not a thing that is not safe), that you would avoid in your UI. – Stefano Aug 31 '17 at 8:20

Consider using only a marker, such as the exclamation mark in a triangle you discussed elsewhere, with a colored background, for for the hazardous deliveries. Doing so will:

  • Decrease cognitive load over solutions with multiple icons/colors
  • Improve visibility for dangerous deliveries
  • Avoid accessibility issues where colorblindness could cause issues (especially for Deuteranopes)

From what I can understand, there are two ways of representing your information:

  • Make the column name unambiguous - Let the column name say,

    Is this hazardous?

That way, Yes and No will have very clear meanings

  • Use the icons. It might be slightly ambiguous but the icons/symbols below generally refer to hazard/danger.

Hazard icon 1 Biological hazard icon Hazard icon 2 Different icons for hazard

  • In this instance I don't have much room. I'm using "Hazard?" as the column title. My biggest concern is how to discern something that's not hazardous from something that is in an aesthetically-pleasing and understandable manner. If I were to use Yes and No, or a check/cross, I'd have to color it like the column next door. – Simon Fish Aug 30 '17 at 10:54
  • Yes or No would be a better choice than the tick marks. Change the highlight to yellow/red in case of hazardous materials. If possible, have a tooltip on the column which clearly states that, "Yes means hazardous and No means safe" – Shreyas Tripathy Aug 30 '17 at 11:16

So I decided on this:

  • Header: Named "Safe?" as recommended in Ada's answer. Using the more positive form of the question avoids any ambiguity in what a checkmark might mean. Asking "Hazardous?" is a bit like asking "do you mind?", if you get what I mean. In the language of icons, it's hard to distinguish whether positive feedback means a negative consequence, but by asking the positive question, this ambiguity is gone.

  • Cell:

    • SAFE displays this icon (a check within a circle) in the color green if everything is okay. The white background is to denote that this cell is of less priority than one with a warning, as recommended in Stefano's edit, though implementation is closer to that of denveruxer. Giving the cell less visual priority makes it both safer and more intuitive for the user to assume that everything is fine.
    • UNSAFE uses a warning yellow background with a warning sign, assisted by details of the hazard if there's sufficient room. This draws significant attention to the cell.

Thank you all for your answers - it's quite interesting seeing how several different approaches combine to give the best one.

  • 1
    Something to consider is the cognitive load added by having two symbols and background colors. You're asking the user to track and decipher multiple symbols and colors in different pages on the document. Eliminating the symbol and color for "safe," and only warning about the "unsafe" deliveries, would decrease cognitive load and allow for more accurate and efficient interpretation of the table. – denveruxer Aug 30 '17 at 14:38
  • 1
    That's wise. I don't know why I'm so hell-bent on attaching green to when it doesn't have a hazard. Having tried my solution, I think I prefer it to anything else, but then again, a delivery without a hazard is more of a mundane thing, so it doesn't need decorating. You should submit that as an answer. – Simon Fish Aug 30 '17 at 15:15
  • Thanks, always glad to be helpful! I went ahead and submitted it as answer, along with a note about avoiding an accessibility issue for the colorblind among us. – denveruxer Aug 30 '17 at 19:11

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.