The Stroop effect and usability bugs

Warning: Colour blind people may have difficulty with some of the examples in this post.

I am, for my sins, married to a psychologist.

There, I’ve said it, feels good to get it off my chest.

Before we got married my wife’s ink-jet printer’s colour cartridge got clogged. I held it over a cup of boiling water and then, wanting to see if the remedy worked, I fired up Word and typed the following:

Red green blue

“Oh, you’re familiar with the Stroop effect” says SHMBO.

“Nope I’m just a twisted individual” I didn’t say.

Apparently the Stroop effect states that it takes much longer to name the colours of the words (blue, red, green) than read the words (red, green, blue), this happens because reading is so ingrained in our psyche that our brains automatically decipher the text (i.e. read) and we have to make a conscious effort to ignore the meanings of the words.

As an anecdote, being bilingual¹ I find naming the colours in Hebrew to be much easier than naming them in English (even though the text is the same).

Fast forward half a decade…

A couple of years ago the the company I work for decided that having support personal communicate with R&D via email caused too much trouble and decided to use an in-house escalation system from a company we recently acquired. Our group was chosen to beta test this system and I was put in charge of the beta program. One day I noticed this graph in my dashboard for SLA violations:

I, happy to combine the disciplines of computer engineering and psychology, merrily opened a bug which was just as merrily rejected.

In order to prove that this is in fact a defect I decided to show that Excel had the expected behaviour:

OK, maybe Excel isn’t a good example, everyone knows that Microsoft don’t know how to write software, I bet Google got this right.

Hmmm, that’s even worse, at least Excel got one out of three right…

Lets analyse what someone reading these graphs needs to do.

1. Look at the graph and hopefully notice that the colours of the slices don’t reflect their category
2. Go to the legend and read the categories
3. Note the colour of the category (this is where Stroop comes into play)
4. Return to the graph and map the colour to its category

As always the first step to a solution is admitting you have a problem and (evidently) not everyone agrees that this qualifies as such. I for one think it’s a usability bug, it may be a low severity bug if you’re writing a general purpose spreadsheet application like Excel or Google docs but if you’re writing a dashboard I would argue it’s pretty high. After all the whole point of having a dashboard is to give information at a glance.

The moral of the story

If you’re creating a UI that assigning colours to arbitrary string values, consider checking if the string is a common colour’s name², I wouldn’t go so far as to match Celadon, Cerise and their ilk but anything a four year old would recognise should probably be mapped to its actual colour.

---

[1] Or as my father says, “I used to think I was bilingual until I realized I’m actually semi-lingual.”
[2] W3C specifies 16 valid colours for CSS, this may be a good place to start.