Why Do Color Coded Clues in Level Design Work?

One day I was out for a run along what in SimCity would be considered a Low Density Street –a light traffic thoroughfare on to which several residential zones connect. As I approached one such intersection, a guy in a truck pulled up. We looked right at each other through the driver’s side window and he didn’t pull forward, so I was pretty sure I had the go-ahead to step out in front of the truck and go on my way. I even gave him the little “thank you” wave.

Imagine my surprise, then, when right as I was starting to trot out in front of the truck, he steps on the gas and I literally have to jump back to avoid getting hit. I barely made it, and had just enough time to slap his window as he passed by and shout a few choice curses I had recently picked up on Xbox Live. He flinched back in surprise, like he was shocked to see me appear out of nowhere despite the fact that he had looked right at me and I had waved to him a couple of seconds earlier.

Accidents and near accidents like this happen all the time. Drivers report that they looked carefully, but simply did not see the pedestrian, bicycle, or even motorcycle that was right in front of them. Psychologists Christopher Chabris and Daniel Simons spend a fair amount of time in their book The Invisible Gorilla1 explaining why, but it boils down to the fact that because our brains lack the horsepower to process everything in our field of vision, they compensate by filtering out things that don’t match what we’re searching for. The result is that unexpected or odd objects may actually go unseen even if we’re looking right at them. The guy who almost hit me looked right at me, but he didn’t see me because he was looking for other cars to see if it was safe to pull out, not someone on foot. I wasn’t in what psychologists call his “attentional set.” (The most famous example of this inattentional blindness is the eponymous invisible gorilla, which I wrote about here.)

To see if traffic accidents could be affected by manipulating one’s attentional set, researchers Steven Most and Robert Astur had subjects in a 2007 study2 play a driving simulation that sounds kind of like a particularly boring version of Grand Theft Auto. Each intersection in the game world had road signs arrows pointing left, right, and straight ahead. Some subjects were told to follow only the arrows that flashed yellow, and some to follow only the ones that flashed blue. Near the end of the simulation, a motorcycle pulled out in front of them, forcing them to either slam on the brakes or collide with it. Sometimes the color of the motorcycle corresponded to the color of the arrows that the subjects had been instructed to follow: either blue or yellow. And sometimes it didn’t.

Driving simulation experiment, taken from Most and Astur (2007).

Driving simulation experiment, taken from Most and Astur (2007).

The results of the study showed that when the motorcycle’s color matched the arrows the subjects were following, they applied the brakes more quickly and avoided collision more often. If the colors didn’t match, the opposite was true –several subjects even slammed right into the mismatched motorcycle without ever touching the brakes. The matching colors, the authors argued, put both arrows and motorcycles into the same attentional set, which made them more likely to be noticed when looked at.

See that YELLOW bridge, Ellie? Somethin' tells me we should go there.

See that YELLOW bridge, Ellie? Somethin’ tells me we should go there.

We see color coding all the time in video games, often to aid us in navigation.The first person parkour game Mirror’s Edge offers an obvious example given how it made use of red objects –doors, ledges, pipes, tarps– to mark the ideal flow through an environment. But even while playing the much more plodding The Last of Us, I noticed how the designers subtly used the color yellow to direct me through the level by marking pathways with yellow caution paint, yellow lights, or yellow objects.

Now you know why this works, even if you don’t consciously notice it or think about it while playing: the designers are actually pulling some serious mental judo and using inattentional blindness to your benefit. Once you’ve been trained to be on the lookout for yellow doors, you’ll start to notice anything that’s yellow because your mind is latching on to a certain heuristic to help govern what visual information is ignored and what is processed. This actually argues for more color coding than we may see in most games. If you’re a game designer and want to put a little sparkle or shine effect on a health or ammo kit to make it noticeable, the choice of color matters. Consistency between this color and the color used to offer navigation cues will help players notice both.

On the flipside, if you want to keep some secret area from being too easily discovered, use different colors and unexpected shapes. Like the driver who almost ran me over because he was looking for cars and not psychologists, players are more likely to look right at unexpected objects or environmental features without seeing them.

Footnotes:

1. Chabris, C. F., & Simons, D. J. (2010). The invisible gorilla: And other ways our intuitions deceive us. New York: Crown.
2. Most. S. & Astur, R. (2007). Feature-Based Attentional Set As a Cause of Traffic Accidents. Visual Cognition, 15(2), 125-132.

9 thoughts on “Why Do Color Coded Clues in Level Design Work?

  1. Pingback: This Week I Read – The High Kings Edition « Normally Rascal

  2. Perhaps not quite the same thing, but you could also consider the way things are colour coded between games as a short hand to explaining what something is. If in a game your character had 2 bars tracking that character’s health and magic/energy most players would know which bar was which intuitively, and this pops up in loads of games.

  3. Pingback: How do I make an area unique | Doing video games

  4. Pingback: Best Bits: Reviewing 2015 - Alastair Hebson

  5. Pingback: Would you kindly stay on the path? A lesson in level design from Bioshock – Claire Barilla

  6. Pingback: Why Nathan Drake Doesn’t Need a Compass | Game Maker’s Toolkit | Add 2G

  7. Pingback: Colour-coding research – rinakhatun

  8. Pingback: Why Nathan Drake Doesn’t Need a Compass | Game Maker’s Toolkit – Clip & Fun

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.