Application color theme and alert notification colors / status colors

Question

I've been fighting this forever and it just occurred to me that it would be a good idea to post here and get some useful feedback.

The main application of the company I work for was initially based on a red-black palette because of the logo colors. The company was recently acquired by a larger company that uses blue-white colors. As a result, I created two different color themes depending on whether the app is used by our company or the parent company.

The application is a security dashboard. So the dominant color (red or blue) is used for action buttons, link colors, chart colors, graph nodes color etc. I had initially created a night mode theme that was sitting nicely on top of both of the two themes.

Since this is a security application there must be alerts - including criticality colors. I tried to use as neutral variations of colors as possible, down to the point that they are easily distinguishable between 5 levels of criticality from green to red. First issue is that the critical alert is red, so it gets mixed up with the red theme buttons, the read graph nodes, etc. I tried millions of different ways to represent the alert criticality, however I didn't find a solution I am happy with, so any suggestions would be really helpful. Currently there is a banner at the top with alerts rolling and every time an alert is updated the background color changes according to the criticality - this was a feature asked, can't avoid it, so you can see that it causes a dissonance in the theme.

Given the above, I was in the process of creating a brand new theme from scratch, with neutral colors, white, greys, black and keeping color just for the colors and links when hovering, so that the only colors visible to the users are actually the alert colors - neutral colors blend in nicely with different alert colors.

I was very pleased with the outcome (I was around 85% complete) when I received instructions that the parent company demands we follow strick visual guidelines for our app - so, use variations of blue. Needless to say, all my efforts of neutralizing the theme went down the drain but now I am facing a lot of issues with the alert colors. Keep in mind that I will have to maintain BOTH themes independently.

a) Color scales are needed for our graphs depending on traffic (for example) - so let's assume I am using the dominant red color for this. Below a graph there's a map with alerts - so we have 5 different colors - green, yellow...red. So the user might get confused an alert with a plain element. There are also cases where something looks like it is online/pending/offline, so more colors enter the game. Since we have alert maps or device maps, the user can easily get mixed up if he doesn't read the context.

So I currently have 3 color sets: theme color, alert color, status color

b) The blue color defined by the style guide and the spectrum of the alert colors don't match at all.

Here is a paste with a medium criticality level: https://i.stack.imgur.com/mvEGz.jpg

Is there any other way anyone can think of to represent the alert and status colors?

Answer 1

Sound like you have a lot of color codes people would need to remember. Not sure if this is the best approach. Why not try to use a visual representation of status priority instead of color coding it?

Maybe something like this :

Answer 2

You already have a big problem with colors, in my opinion especially with black/red theme - but I won't discuss about it here, then I'd try a different approach for alerts.

Background: alert must catch attention and color variation is one possible solution.

Solution: do not use (only) color variation, it's one possible solution but not the only one. Blinking, font size and shapes will also efficiently drive users attention to your alerts.

In this simple example you have more than one element to drive user attention:

• Color (red in this case), assuming it's not already used for something else then bright/different color will be noticed.
• Border and background: if most elements have not a background and a border then a variation will be noticed.
• Font: bold font (if sparkly used) will be noticed. Effect may be improved also increasing font size.

Plus few more tools you may want to use:

• Blinking. Blinking it's annoying but it's absolutely eye catching. For not critical alerts you may limit blinking time (let's say five seconds after user activity).
• Sound. More annoying than useful but for very critical alerts it's a viable option. To use cum grano salis.
• Images. An image, especially if screen is not full of colorful pictures will catch attention. They don't even need to convey any information, most important thing is to stand out.

How to apply this to different alerts? Blogs already made us used to this:

To summarize: 1) if you already heavily use colors and you worry that alerts won't be noticed then do not use color to highlight alerts.

2) Instead if you worry because of color scales then you should pick different scales for each chart/panel/map you show:

Even better, do not rely on color scales unless you're absolutely sure about what you're doing (see also Why Should Engineers and Scientists Be Worried About Color? plus don't forget to check visual result for color blind people). Gray shades (or single - well-chosen - color) works perfectly in many situations. Note that when they have to mix then you can produce effective and nice designs: