I work on a Network management system (NMS) frontend. Basically this app shows a list of alarms, updated in realtime. Such NMS apps already exist in a large variety, but two things they have in common:
- the alarms are presented in a table (1 row = 1 alarm)
- each table row background color represents the alarm's severity
Point 1 makes perfect sense to me. But point 2? Is there any evidence that having a rainbow on your screen makes you work better? What is a good approach to solve this problem?
Answer
The number of colors seems to be overkill in this situation. To illustrate severity I think it's more useful to stick to a simple, yet well known convention...
download bmml source – Wireframes created with Balsamiq Mockups
You'll notice that I'm using very light colors above. That's because the original colors are too dark against the black text and it makes the text hard to read. And then, for the sake of red-green color blindness you should probably add an exclamation mark to the high priority items.
Other variations on the above could certainly be used. For example, should low priority items be colored at all? Maybe they should be white to let the higher priority items stand out. But in general I think the number of colors should be kept low enough that people will understand and remember their meaning without having to constantly check a key or legend.
By the way, when it comes to contrast, the black text on a red background is the worst offender in your example with a contrast ratio of 5.25:1. This is just enough to be WCAG 2 AA compliant, but it's not AAA compliant. You can test this yourself here... http://www.snook.ca/technical/colour_contrast/colour.html
No comments:
Post a Comment