By Brandon Haist and Ken Mead
Photo Credit: iStock
Many researchers have documented the importance of color in shaping perceptions, providing context, and helping users connect with an application. We took a more focused approach recently in examining color as relates to icon sets. Our goal was to understand how color might affect user comprehension, efficiency, and satisfaction. At stake: The satisfaction of long-time product users who have history with the icons we were testing.
We began by reviewing other internal teams’ work in this area to ground ourselves in where the icon set stood currently. This would help us avoid redundancies and determine how to move forward. Our findings would be critical to informing product direction.
Past research indicated that color icons contributed to faster task completion and increased satisfaction. Although participants can succeed in completing tasks with monochromatic icons, they were overwhelmingly seen to prefer color icons. Also, in past research, approximately one in ten users had mentioned the desire for color icons unprompted, so we knew there was something there deserving of further study.
The core question
The icons sit within the context of the ribbon\commanding surface where there are a lot of icons, and it’s important for users to quickly understand what they’re looking at, what they represent, and what they can expect to happen when you click them. The product team was looking to move to grayscale icons and monochromatic designs, with the belief that they would be perceived as more modern. We decided to conduct mixed methods research to determine whether their perception was correct and document users’ feedback on grayscale, monochrome, and color icon sets.
Knowing that simple user preference studies are often biased because people unknowingly make up rationales behind their choices, we decided to conduct a comprehensive icon analysis to both test the icons on a set of usability heuristics and to understand the more intangible associations people had with them. To reduce recency bias, we counterbalanced and randomized the icon sets.
Our core question: How much color in icons is the right amount? Utilizing the icon usability heuristics developed by Nielsen Norman Group, we wanted to know if there is any difference in recognition, functionality and attractiveness between the design sets presented: mixed color, accent color, and grayscale? And finally, what emotional associations do people make with each of the icon sets? Our toolset was Benedeck and Miner’s Desirability Toolkit.
Even without our prior research, we knew that, in general, color draws people’s attention, and that our brains are wired to recognize patterns and color cues. Our hypotheses were that mixed color icons would be the easiest to distinguish from each other, and that single color icons (accent color and grayscale) would be more difficult to distinguish in sets than mixed color icons.
Key color principles
We conducted our research with two hundred users. Our findings validated both the past research regarding color and our own hypotheses.
The multi-color icon sets were rated easier to visually distinguish, decipher, and understand.
Monochromatic icons (both single-color and grayscale) were rated less readable than their multi-color icon counterpart.
Based on our research, the mixed color icons:
- Are easier to visually distinguish, decipher, and understand.
- Have more positive, modern associations.
- Were rated as most attractive.
- Inspired greater satisfaction with users.
Customers did not respond as positively to grayscale and single color icons:
- The single-color accent icon set and grayscale icon set were rated less readable.
- Grayscale was familiar and viewed as businesslike, but has more negative associations.
- Grayscale was ranked as least attractive.
- Asked about the amount of color in the icons, participants found the mixed color and accent color designs to be “about right amount of color.” Most said the grayscale design had “far too little color.”
-
Not just color for color’s sake
In doing this research, what surprised us was the clarity of the feedback. It clearly indicated that the push to go to grayscale and monochromatic designs would not resonate with our long-term users, who find color to be important in being able to read, understand, and work effectively. While the product team thought grayscale would be perceived as more modern, users had the opposite view. The top word association customers had for the color icons was modern, while grayscale was associated with words like dull and boring. Users’ feedback also resoundingly refuted the idea that monochrome would be embraced.
And it wasn’t just that more color was needed and desired, but that a variance in color helped drive understanding. Put another way, it’s not just about more color, it’s about the judicious application of color. Our users consistently told us how much context and meaning they take from color in icons. Furthermore, context is derived not just from the icon in isolation, but the icon within the context of the ribbon.
Despite the push to monochrome or grayscale icons, many of our long-term customers are simply not ready to embrace them. Color icons are scannable and familiar, with years of visual muscle memory contributing to their popularity. Users perceive them to be more informative and easier to find – and more importantly, users complete tasks more quickly with color icons vs. monochromatic ones.
Updating the look of an icon may seem like a minor change. However, there’s a lot at stake. It’s something that users rely on and interact with every day. Many of our customers have been using them for decades. When implementing such a change, consider the audience and test your assumptions. Changing icon color is not just ‘chrome’ —it’s fundamentally changing the tools our users rely upon. We need to help them to feel confident and successful when they use our products.
What do you think? How do these ideas make you think about icons in your products or the ones you use every day? Tweet us your thoughts @MicrosoftRI or follow us on Facebook and join the conversation.
Brandon Haist is an accomplished researcher and independent thinker. He has traveled the world in his pursuit of understanding the human psyche, in addition to holding a Master’s degree in Applied Cognitive Psychology. Brandon has had a successful career in Design Research, being a lead researcher for two Fortune 100 tech companies – Microsoft and HP, with his expertise evident through his product recommendations and the holding of multiple patents at both companies. The lens through which Brandon sees the world is just as critical as it is insightful and refreshing.
Ken Mead is UX Researcher with a strong design background. He has 6 years of industry experience in fast-paced start-up environments, helping organizations implement digital business strategies to improve their work environment, productivity and growth. He has a Master’s in Human-Computer Interaction from UC Irvine.