{"id":333,"date":"2016-02-08T19:18:00","date_gmt":"2016-02-08T19:18:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=333"},"modified":"2025-02-25T13:32:56","modified_gmt":"2025-02-25T13:32:56","slug":"easy-action-design","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/easy-action-design","title":{"rendered":"The Stroop Effect and its Implications in UX Design"},"content":{"rendered":"\n

What happens when your brain is trying to process conflicting streams of information? Let\u2019s find out.<\/p>\n\n\n\n

Read this list of colors to yourself:<\/span><\/p>\n\n\n\n

Red<\/span><\/strong><\/p>\n\n\n\n

Green<\/span><\/strong><\/p>\n\n\n\n

Blue<\/span><\/strong><\/p>\n\n\n\n

Purple<\/span><\/strong><\/p>\n\n\n\n

Black<\/span><\/strong><\/p>\n\n\n\n

Brown<\/span><\/strong><\/p>\n\n\n\n

Yellow<\/span><\/strong><\/p>\n\n\n\n

Red <\/span><\/strong><\/p>\n\n\n\n

Blue<\/span><\/strong><\/p>\n\n\n\n

Pink<\/span><\/strong><\/p>\n\n\n\n

Orange
<\/span><\/strong>Piece of cake right? You are only concentrating on doing a single task and an easy one at that. Let\u2019s try this a different way; say the names of the colors that you see here:<\/span><\/p>\n\n\n\n

\"say<\/figure>\n\n\n\n

<\/span><\/a>That wasn\u2019t too difficult either. Your brain had to work a little harder to recall the name for each color but it\u2019s still a fairly simple task.<\/span><\/p>\n\n\n\n

Now try this: Say the COLOR that the words are printed in below.<\/span><\/p>\n\n\n\n

Yellow<\/span><\/b><\/b><\/p>\n\n\n\n

Red<\/span> <\/span><\/span><\/b><\/p>\n\n\n\n

Blue<\/span><\/b><\/p>\n\n\n\n

Pink<\/span><\/b><\/p>\n\n\n\n

Orange<\/span><\/b><\/p>\n\n\n\n

Red<\/span><\/b><\/p>\n\n\n\n

Green<\/span><\/b><\/p>\n\n\n\n

Blue<\/span><\/b><\/p>\n\n\n\n

Purple<\/span><\/b><\/p>\n\n\n\n

Black<\/span><\/b><\/p>\n\n\n\n

Brown<\/span><\/b><\/p>\n\n\n\n

That was pretty challenging wasn\u2019t 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. <\/span><\/p>\n\n\n\n

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. <\/span><\/p>\n\n\n\n

Implications in UX Design<\/h2>\n\n\n\n

So what does this mean for UX design you ask? Well it\u2019s simple \u2013 don\u2019t interfere with the user\u2019s 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\u2026and keep mixed messages to a minimum.<\/span><\/p>\n\n\n\n

Take for example the very commonly mishandled \u2018OK \u2013 Cancel\u2019 paradigm<\/a>.<\/span><\/p>\n\n\n\n

\"Navigation<\/a><\/figure>\n\n\n\n

This interface is confusing to users in two different ways:<\/span><\/p>\n\n\n\n

    \n
  1. Both buttons look exactly the same<\/span><\/li>\n\n\n\n
  2. The \u2018reset\u2019 button is to the right of the \u2018submit\u2019 button<\/span><\/li>\n<\/ol>\n\n\n\n

    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.<\/span><\/p>\n\n\n\n

    Would you ever present your users with this?<\/span><\/p>\n\n\n\n

    \"clip_image003\"\/<\/figure>\n\n\n\n

    <\/span><\/a><\/p>\n\n\n\n

    Of course not. It\u2019s just as tricky to mentally process as this:<\/span><\/p>\n\n\n\n

    RED       <\/span><\/b>BLUE<\/span><\/b><\/p>\n\n\n\n

    What can we change about these action buttons to make them intuitive? First of all let\u2019s put them in positions that make sense.<\/span><\/p>\n\n\n\n

    \"clip_image004\"\/<\/figure>\n\n\n\n

    <\/span><\/a><\/p>\n\n\n\n

    We can see how this applies to our \u2018Cancel \u2013 OK\u2019 example.<\/span><\/p>\n\n\n\n

    \"forwardback3\"\/<\/a><\/figure>\n\n\n\n

    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.<\/span><\/p>\n\n\n\n

    By making the \u2018primary\u2019 or in this case the \u2018submit\u2019 button more dominant, we safeguard users from accidentally selecting \u2018reset\u2019. There is always one action that is more commonly taken (<\/span>or more intensely desired by the designer<\/span><\/a>) at a given point in an interaction and that is the one that assumes the \u2018primary\u2019 role.<\/span><\/p>\n\n\n\n

    \"forwardback4\"\/<\/a><\/figure>\n\n\n\n

    This design assures that all but the most absent minded (or contrary) user will select the action that they intend to perform.
    <\/span><\/p>\n\n\n\n

    Don\u2019t Stroop to Their Level<\/h2>\n\n\n\n

    So while it may be fun to name your Great Dane \u2018Tiny\u2019, UX design is not an ironic art form. Your users will always prefer a transparent and intuitive experience. You don\u2019t want to make things harder than they need to be and you certainly don\u2019t want to be misleading. <\/span><\/p>\n\n\n\n

    \"Your<\/figure>\n\n\n\n

    <\/span><\/a><\/p>\n\n\n\n

    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<\/a>.<\/span><\/p>\n\n\n\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    What happens when your brain is trying to process conflicting streams of information? Let\u2019s find out.<\/p>\n","protected":false},"author":67,"featured_media":2370,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,13],"tags":[],"class_list":["post-333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-ux"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":1986,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/333\/revisions\/1986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}