The Stroop Effect and its Implications in UX Design

What happens when your brain is trying to process conflicting streams of information? Let’s find out.

Read this list of colors to yourself:

Red

Green

Blue

Purple

Black

Brown

Yellow

Red

Blue

Pink

Orange

Piece of cake right? You are only concentrating on doing a single task and an easy one at that. Let’s try this a different way; say the names of the colors that you see here:

That wasn’t too difficult either. Your brain had to work a little harder to recall the name for each color but it’s still a fairly simple task.

Now try this: Say the COLOR that the words are printed in below.

Yellow

Red

Blue

Pink

Orange

Red

Green

Blue

Purple

Black

Brown

That was pretty challenging wasn’t it? When you give your brain two conflicting problems to solve at once, things can get confusing very quickly. This phenomenon known as the Stroop effect was first described in 1935 by experimental psychologist John Ridley Stroop. The Stroop effect shows that when a color word is printed in the same color as the word, people can name the ink color more quickly compared with when a color word is printed with an ink color that is different from the word.

One explanation for this is interference. From preschool on, reading is a task that people practice every day. We become so good at it that we read words automatically. When we are asked to name the color of the word instead of reading the word, the automatic reading of the word interferes with naming the color of the word. Sure, you can still do it, but reaction time is significantly slower when you have to purposefully ignore signals from your brain.

Implications in UX Design

So what does this mean for UX design you ask? Well it’s simple – don’t interfere with the user’s natural thought process. If you want someone to navigate through your interface with ease, you need to design things in such a way as to take advantage of naturally occurring human cognitive processes…and keep mixed messages to a minimum.

Take for example the very commonly mishandled ‘OK – Cancel’ paradigm.

This interface is confusing to users in two different ways:

1. Both buttons look exactly the same

2. The ‘reset’ button is to the right of the ‘submit’ button

Not only is it difficult to differentiate between the two actions because of their identical appearance, but their placement is also misleading. Submit is a forward moving action and reset equates with going back.

Would you ever present your users with this?

Of course not. It’s just as tricky to mentally process as this:

RED       BLUE

What can we change about these action buttons to make them intuitive? First of all let’s put them in positions that make sense.

We can see how this applies to our ‘Cancel – OK’ example.

We are getting there, but there are still a few more improvements we can make. One of the keys to clear differentiation of actions is to use a set of primary and secondary button styles. These can utilize differences in color, shadow and/or text treatment.

By making the ‘primary’ or in this case the ‘submit’ button more dominant, we safeguard users from accidentally selecting ‘reset’. There is always one action that is more commonly taken (or more intensely desired by the designer) at a given point in an interaction and that is the one that assumes the ‘primary’ role.

This design assures that all but the most absent minded (or contrary) user will select the action that they intend to perform.

Don’t Stroop to Their Level

So while it may be fun to name your Great Dane ‘Tiny’, UX design is not an ironic art form. Your users will always prefer a transparent and intuitive experience. You don’t want to make things harder than they need to be and you certainly don’t want to be misleading.

If you are looking for something fun to do this weekend, try the Stroop test on your friends and family online: http://s3.mirror.co.uk/click-the-colour-and-not-the-word/index.html.