Monitoring Colours
Making sense of yellow alert and magenta state
Why
Because I'm dealing with many monitoring systems, and they confused about their colour schemes. "red alert" for an emergency is about the only thing they can agree upon.
Who
People who are designing interfaces for monitoring widgets and tools. Sadly, my schemes may fail for colourblind people (1 in 4 men, but I usually see 1 in 3 for men working in I.T.). See below for how one application has thoughtfully gotten around that.
What
For each item being monitored, it can be measured on two axes:
- Action Required versus No Priority
- Certain Knowledge versus Unknown State
This puts every item being monitored into four categories:
- Certain Knowledge + Action Required = We know we must do something.
- Certain Knowledge + No Priority = It's okay, leave it alone.
- Unknown State + Action Required = It's not responding, find out why.
- Unknown State + No Priority = We don't know and we don't care.
Traditionally, the 1st category is colour-coded red, and the 2nd catetory is colour-coded green. The other states have no traditional colours, although the range from amber to red are usually used as a gradient along the No Priority <-> Action Required axis.
I propose that the different states that a monitored value can be in can correspond radially to a monitor's state on these two axes. For those of you not living in ivory towers: I think I know a way for colours of the rainbow to make sense with monitoring states, and in a way that is consistent.
![[]](monitoring_colours.png)
To the left you can see a box with the up/down edges and the left/right edges labeled. Each corner of the box is one of the four catetories mentioned above. As something in the upper right corner ("We know we must do something") moves down to the lower right corner ("It's okay, leave it alone"), it's colour shift through the spectrum from red to green. As it moves from the upper-right corner to the upper-left ("It's not responding, find out why.") the colour shifts from red to purple. If you think in hues and radians, you can see the typical emergency state starts the the top with 0/red, moves through the typical okay state at 120/green, and the typical disabled state ("don't know, don't care") at 225/indigo.
|
Chances are, you've spent more time writing HTML code by hand than taking colour theory classes in college, so at right I've got the colours and states written in w3.org style hexidecimal colours. expand on this, some helpful algorithms for gradients |
|
How
- use eye-catching animated glyphs, not just colours; more action-required, more attention-getting animation
- mention use of "orange" for about-to-fail state that Nagios/Netsaint uses
- compare/contrast UI schemes by BigBrother, Xymon/Hobbit, Netsaint/Nagios, Mon, Munin, NetCon.
- Bigbrother/Xymon animated glyphs:
- a pulsing cross for critical failure
- a fidgeting circle for poor performance
- a stationary square for satisfactory performance
- a stationary circle for monitoring disabled
- a swirling cloud for unknown state
- an empty circle for unable to test (due to dependency failure)