How to handle color consistency when the color has both thematic and actionable reasons for the color?

Question

Note: the example is from the Batman Arkham Knight videogame game, but it's something that can happen outside the world as well.

In Batman: Arkham Knight, there are certain sidequests where you can switch characters between B(atman) and C(atwoman) to fight color coded robots. One type has a blue chest and can only be safely damaged by B. If C tries to damage them, she takes damage instead. The other type has a red chest and handled in a reversed fashion: B can't damage them, C can. There are also sequences where it doesn't matter who damages them (because C doesn't partake in these sequences) and they are green, unless they're wielding guns, in which case they are also red.

This is a situation where user interactable options are color coded for an actionable reason: you need to do X with the blue robots and Y with the red robots. However, when you switch characters, you need to to Y with the blue robots and X with the red robots, because the colors also have a thematic reason: the blue ones are linked to character B, the red ones to character C. there were times where this mix of thematically consistent and actionably inconsistent behavior confused me. To make it even trickier, later sidequests have a mechanic where a robot can switch from blue to red, sometimes midway through changing characters.

Now, I understand that as a videogame, Arkham Knight is an edge case where a minor amount of actionable inconsistency is acceptable, since in this case it's a bit of extra depth to the gameplay and the thematic consistency also has a role to play. There are however business cases in which:

1. A business item has a color assigned based on physical properties;
2. A program displays a number of business items on multiple displays;
3. Based on the color, certain actions need to be undertaken;
4. Actions are switched between colors based on the display.

An example: An engineer has 2 dials showing pressure in different containers with green and red areas, where one container needs to be above a certain pressure level (like a pressure cooker) and the other container has to be below a certain pressure level (like an escape valve). For one dial, he needs to add pressure in the red and remove pressure in the green. For the other dial, he needs to add pressure in the green and remove pressure in the red. In both cases, red indicates the pressure that cannot be crossed, while green indicates that there is room to alter the pressure. However, the action to be taken changes based on the dial.

In such a case, is it better to be consistent based on the action to take (red should always add pressure/be avoided, green should always reduce pressure/blue should always be hit), or based on the theme of the indicator (red is dangerous/for character C, green is safe/blue is for character B)? Or is it too dependant on the situation to make a blanket statement?

Answer 1

Relying on color alone to indicate anything is dangerous. You risk confusion, and accessibility concerns are introduced when handicapped or the disabled are users (colorblind being a simple example).

Here are a few common techniques for indicating function:

• Shape (Red octagon, yellow equilateral triangle, green plus sign)
• Pattern (Vertical stripe, checkered, diagonal stripe)
• Size (See heading sizes)
• Shade (disabled/enabled)
• Animation (Flashing, rotating, etc.)

What I'm getting at is that there are only so many colors at your disposal, and even if you use them all, not all of those colors will be accessible to all of your users. More complex problems require the use of iconography and other visual cues to create a solid distinction.

Answer 2

Sometimes, I think these sorts of problems can be resolved with an additional helper like an icon or something of the sort. Sometimes a UI can suffer from trying to simplify too much. However the use of colour and iconography might clear things up a bit.

In the case of your batman example, if I got it right, red is always linked to catwoman, and blue is always linked to batman? But depending on which character you're controlling at the time, you must hit a different button? If this is the case, I would think that the colouring is a good choice, because you always associate one colour with one character's attacks.

If it's the opposite, ie: regardless of who you are controlling, red means you will take damage, and blue means it's safe to attack, I would also think that's an acceptable use of colour consistency. I think my main "quibble" would be in that the chosen colours are blue and red, as red can either give off a negative/danger vibe https://resources.oncourse.iu.edu/access/content/user/rreagan/Filemanager_Public_Files/meaningofcolors.htm It would maybe have made more sense to make her targets another colour like yellow or something.

This is where I think some sort of symbology could help guide the user. While the npcs that you're beating up may have uniforms of a certain colour, it would help the user to have some sort of targeting icon that might inform them who should be using the attack. (now, I realize that most players would probably balk at this because it would make the game too easy, but I'm trying to approach it from a "user friendly" type of viewpoint)

For your real life example, assuming you're looking at a graphic like this and assuming that you're trying to keep the division between the two at a certain level (say 50% as in this example) Then (at the risk of oversimplifying) perhaps to increase/decrease pressure, there is only one lever that you can move up and down and the pressure will react accordingly.

Perhaps if the intent of control set A is to keep the pressure at a certain level, you would move the lever up (there should be appropriate messaging with the lever or iconography to help the user) and if the intent of control set B is make sure pressure is below a certain level, then there is one lever which you would mostly move down. I feel like in this case, the levers would be intuitive because you would be moving them up and down to correspond with there you want that line between red and green to be.

Now, maybe it is impossible to simplify it this much and you actually require two buttons because the mechanical processes are so different. In that case, I would make the green button increase the green in the bar, and the red button increase the red in the bar.

Iconography could clear this situation up - perhaps with something like corresponding gauge icons to represent lowering the pressure and its opposite to represent raising the pressure

or something simple and generic like this:

or something like this to signify venting pressure

and maybe some arrows to represent increasing pressure...

I hope that makes sense!