{"id":712969,"date":"2021-01-05T10:07:32","date_gmt":"2021-01-05T18:07:32","guid":{"rendered":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/?post_type=msr-blog-post&p=712969"},"modified":"2021-01-05T13:14:05","modified_gmt":"2021-01-05T21:14:05","slug":"why-your-users-value-color-icons-more-than-you-may-think","status":"publish","type":"msr-blog-post","link":"https:\/\/newed.any0.dpdns.org\/en-us\/research\/articles\/why-your-users-value-color-icons-more-than-you-may-think\/","title":{"rendered":"Why your users value color icons more than you may think"},"content":{"rendered":"

By Brandon Haist<\/span><\/span><\/a>\u00a0and\u00a0<\/span><\/span>Ken\u00a0<\/span><\/span>Mead<\/span><\/span><\/a><\/p>\n

\"An<\/p>\n

Photo Credit: iStock<\/p>\n

Many<\/span>\u00a0<\/span>researchers<\/span>\u00a0have\u00a0<\/span>documented<\/span>\u00a0<\/span>the importance of color<\/span> (opens in new tab)<\/span><\/a>\u00a0in\u00a0<\/span>shaping\u00a0<\/span>perceptions<\/span>, providing context, and helping users connect\u00a0<\/span>with<\/span>\u00a0an applica<\/span>tion<\/span>.<\/span>\u00a0<\/span>We took a more focused\u00a0<\/span>approach<\/span>\u00a0recently in\u00a0<\/span>examining\u00a0<\/span>color as relates to<\/span>\u00a0<\/span>icon sets<\/span>.\u00a0<\/span>Our goal was<\/span>\u00a0to understand how color might affect user comprehension, efficiency, and satisfaction.<\/span>\u00a0<\/span>At stake: The satisfaction of long-time product users who have hist<\/span>o<\/span>ry with the icons we were testing.\u00a0<\/span>\u00a0<\/span><\/p>\n

We began by reviewing other\u00a0<\/span>internal<\/span>\u00a0teams\u2019 work\u00a0<\/span>in this area<\/span>\u00a0to ground ourselves in\u00a0<\/span>where the icon set stood currently. This would help us<\/span>\u00a0avoid\u00a0<\/span>redundancies<\/span>\u00a0and<\/span>\u00a0<\/span>determine<\/span>\u00a0how to move forward<\/span>.<\/span>\u00a0Our findings would be critical to informing product direction.<\/span>\u00a0<\/span><\/p>\n

Past research\u00a0<\/span>indicated<\/span>\u00a0that\u00a0<\/span>color<\/span>\u00a0icons contributed to<\/span>\u00a0<\/span>faster task completion and increased satisfaction. <\/span> (opens in new tab)<\/span><\/a>Although\u00a0<\/span>participants\u00a0<\/span>can<\/span><\/i>\u00a0succeed\u00a0<\/span>in<\/span>\u00a0completing tasks with monochromatic icons, they\u00a0<\/span>were\u00a0<\/span>overwhelmingly\u00a0<\/span>seen to<\/span>\u00a0<\/span>prefer<\/span><\/i>\u00a0color icons.<\/span>\u00a0<\/span>Also, in<\/span>\u00a0past research,\u00a0<\/span>approximately one<\/span>\u00a0in ten users had mentioned the\u00a0<\/span>desire for\u00a0<\/span>color icons\u00a0<\/span>unprompted<\/span>, so we knew there was something there\u00a0<\/span>deserving of further study.<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n

The\u00a0<\/span><\/i>core<\/span><\/i>\u00a0question<\/span><\/i>\u00a0<\/span><\/p>\n

The icons sit within the context of the ribbon\\commanding surface where there are a lot of icons, and\u00a0<\/span>it’s<\/span>\u00a0important for users to quickly understand what\u00a0<\/span>they\u2019re<\/span>\u00a0looking at, what they\u00a0<\/span>represent<\/span>, and what they<\/span>\u00a0<\/span>can expect to happen when you click them.<\/span>\u00a0<\/span>The\u00a0<\/span>product<\/span>\u00a0team\u00a0<\/span>was looking\u00a0<\/span>to move to grayscale icons and monochromatic designs<\/span>,<\/span>\u00a0with the belief that they would be perceived as more modern<\/span>.<\/span>\u00a0<\/span>We decided to conduct mixed methods research to\u00a0<\/span>determine<\/span>\u00a0<\/span>whether<\/span>\u00a0their\u00a0<\/span>perception<\/span>\u00a0was correct<\/span>\u00a0and document users\u2019 feedback on\u00a0<\/span>grayscale, monochrome, and color icon sets<\/span>.<\/span>\u00a0<\/span><\/p>\n

Knowing that simple user preference studies are often\u00a0<\/span>biased because<\/span>\u00a0people unknowingly make up rationales behind their choices, we decided to\u00a0<\/span>conduct a comprehensive\u00a0<\/span>icon analysis<\/span>\u00a0to\u00a0<\/span>both test the icons\u00a0<\/span>on a set of\u00a0<\/span>usability\u00a0<\/span>heuristics\u00a0<\/span>and to\u00a0<\/span>understand<\/span>\u00a0the more intangible associations people had with them. To reduce recency bias, we counterbalanced and randomized the icon sets.\u00a0<\/span>\u00a0<\/span><\/p>\n

Our<\/span>\u00a0<\/span>core<\/span>\u00a0question:\u00a0<\/span>How much\u00a0<\/span>color in icons is the right amount?<\/span>\u00a0<\/span>Utilizing the\u00a0<\/span>icon usability heuristics developed by Nielsen Norman Group<\/span> (opens in new tab)<\/span><\/a>,\u00a0<\/span>we<\/span>\u00a0wanted to know if<\/span>\u00a0there\u00a0<\/span>is any<\/span>\u00a0difference in recognition, functionality and attractiveness between the design sets presented: mixed color, accent color, and grayscale?<\/span>\u00a0And finally, what emotional\u00a0<\/span>associations do people make with each of the icon sets?<\/span>\u00a0Our toolset was<\/span>\u00a0<\/span>Benedeck<\/span>\u00a0and Miner\u2019s<\/span>\u00a0Desirability Toolkit<\/span> (opens in new tab)<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

Even without our prior<\/span>\u00a0research, we knew that<\/span>, in general,<\/span>\u00a0color draws people\u2019s attention,<\/span>\u00a0and\u00a0<\/span>that\u00a0<\/span>our brains are wired to recognize patterns and color cues.<\/span>\u00a0<\/span>Our hypotheses were that mixed color icons would be the easiest to distinguish from each other\u200b, and that single color icons (<\/span>a<\/span>ccent color and\u00a0<\/span>g<\/span>rayscale) would be more difficult to distinguish in sets than mixed color icons.\u202f<\/span>\u00a0<\/span><\/p>\n

Key color principles\u00a0<\/span><\/i>\u00a0<\/span><\/p>\n

We conducted our research with two hundred users.\u00a0<\/span>Our findings\u00a0<\/span>validated<\/span>\u00a0both the past research\u00a0<\/span>regarding<\/span>\u00a0color and our own hypotheses.\u00a0<\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 The multi-color icon sets were rated easier to visually distinguish, decipher, and understand.<\/span><\/span><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

M<\/span><\/span>onochromatic\u00a0<\/span><\/span>icons<\/span><\/span>\u00a0(both single-color and grayscale)<\/span><\/span>\u00a0were rated less readable<\/span><\/span>\u00a0than their multi-color icon counterpart<\/span><\/span>.<\/span><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

Based on our research, the m<\/span>ixed<\/span>\u00a0color icons<\/span>:<\/span><\/p>\n