0

Designing for a monitoring dashboard that alerts the safety officer if the following incidents that might occur to workers onsite.

  • high heart rate
  • low heart rate
  • high environmental temp (may cause dehydration)
  • low environmental temp (may cause hyperthermia)

Currently, the personal devices each of the workers get these alerts on their screen

  • (red heart) high heart rate
  • (red thermometer) high environmental temp (may cause dehydration)
  • (blue thermometer) Low environmental temp(may cause hyperthermia)

my question is, what would be a good use of colors to draw attention to the incidents on the dashboard? Red seems to naturally draws attention to something urgent. However, it's being used for high heat and high heart rate. Cold and low heart rate need to be highlighted as well, but using blue somewhat downplays the urgency of this as its a cool color.

2
  • What's the background color? Sep 27 at 6:56
  • @RoAchterberg its white
    – Blue Ocean
    Sep 27 at 7:26

2 Answers 2

2

It's hard to give a definitive answer to this, as so much depends on the existing context. If there already is a dashboard design that you can share with us, it'd help a lot to see that first. However, here's a few pointers to help you think along the right lines:

  1. Determine the priority that these warnings need to have. To me they sound like urgent notifications that need immediate attention.
  2. For maximum salience, you want the information to stand out above everything else. In other words, they need to be at the top of the visual hierarchy.
  3. Using color perception to indicate urgency depends in part on how that user's mental model is trained. Try to use something universal and unambiguous. You've already observed correctly that there can't be any conflict between existing use of the same colors within the interface. Consider also any visual cues the user will see on the device, outside of your application.
  4. If the device affords it, consider pairing the visual notification with an audio signal and/or vibration pattern.
  5. Consider animating the notification to help make the notification more salient.
  6. Consider adding a well-trained icon to give the notification extra urgency.

Like I said, without having seen the rest of the interface, I have to speculate a bit on the use case. It's hard to provide you with a nuanced answer, but in this case I would avoid depending on color perception alone to grab attention. Assuming these indicents will be low occurring, you might consider combining the following elements in your design:

  • Use black and white for maximum contrast, supported by an icon.
  • Place the alert in a part of the screen where no other notifications pop up. For instance, if the application shows other notifications in the top right corner, don't put the alerts in the same spot.
  • Animate the alert.
  • Use red in supporting design elements. Works especially well if used on an icon that is richly grounded in the user's mental model (think universal warning signs).
  • Consider blurring the background when the alert is showing.

I'd be interested to see what you end up with. Hope this somewhat helps you get going.

1

Maybe color is not your friend here. There are other ways to attract attention and communicate importance. Exaggerate things a bit, a high contrast, thick border, bold and/or uppercase title. See this example:

enter image description here

1
  • Possibly, the frame and warning could still be red (to help convey urgency), but the icon for type of urgency could be blue (or black details + large blue details and snowflake)?
    – pereric
    Sep 29 at 7:32

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.