Color must be processed before it expresses meaning
Design school doesn’t say when to use color, but cognition does.
Recently, you’ve probably seen Google’s new G-Suite icons, that are squintably indifferentiable from each other and are overall, pretty bad. You’ve probably noticed visual updates to Facebook Messenger’s app, which adds yet another punchy gradient to our bursting appetite of visual lexicon. While color is wonderful and communicates meaning far beyond most other physical characteristics, it can very easily turn moments of order and calm, into fireworks of domineering spectacle.
Movies featuring constant explosions reduce the meaning of each successive explosion. Music inundated with bouts of autotune all start to all sound the same — Maybe you’re a fan of these styles, maybe you’re not, but the most successful forms of art incorporate just as much quiet as they do fireworks.
What does it mean to incorporate moments of quiet? To communicate meaning through color at any level of precision, the psychology (expectations, color meaning, context) of its perception needs to be considered first.
The ABC’s of Color Psychology
Research has shown that color cognitively affects people in many different ways. For example, warm colored placebo pills are reported as more effective than cool colored placebo pills¹, the color red causes people to react with greater force and quickness², and black sports uniforms commonly are called for more penalties in the context of sporting events³.
Although some straggling cognitive effects such as these are known, my take on the ABC’s of color psychology is that there is no hard and fast alphabet to refer to — color success depends on evaluating each style in its own vacuum, rather than a hard inflexible set of rules.
White is often processed as a color of purity in Western cultures whereas in Eastern cultures, it is a color for mourning⁴.
Color cognition transcends other characteristics
Remember when I said that color can add spectacles of fireworks in a domineering spectacle? In this way, color can easily overpower other physical characteristics. Just look at the new G Suite icons.
What do you see? Initially, my first read was that the icons are very similar to each other, because of a consistent color scheme. More importantly, the colors are so stunning that they completely negate the differences of form, which help me distinguish the programs.
Now, look what happens when a monochrome theme is applied to each icon. Here, the subtleness of color accentuates the differences in form, rather than creating loud fireworks out of each icon (note I didn’t match the colors perfectly to Google’s style, as that’s not the point of this example). Color doesn’t have to be the only element that denotes cross-program synergy — the icon forms share great similarity already.
G Suite is meant to be a group of similar office-based apps from Google, so their icons should look visually similar enough to tell they are from the same suite, but different enough so that they’re easily accessible. Color is an extremely salient characteristic, because of its ties to emotion and memory. The overuse of color here blows out small differences in form, needed to differentiate the apps.
Top-down versus bottom-up processing
When you search for an app, do you usually go row-by-row, or scan the page in hopes of landing on the right application? If you’re like me, you probably do the latter.
In psychology, there are two competing theories of stimuli processing: top-down and bottom-up processing. Top-down says we project our expectations on stimuli and then process the data. Bottom-up says that we process the stimuli, and then project our expectations on it. I think we do both.
In the image what do you see? You probably see a white shape that stands out from the dark background. This is an example of bottom-up processing — the white shape is processed and the areas of black fade to the background, because black is technically the absence of light.
In the image below, now what do you see?
The focal points now likely become the faces that are created by negative the spaces of black or the absence of light. This is a top-down process because if it was processed in a bottom-up manner, the reflected white bouncing off the middle shape would denote the shape exists, and the absence of light (black), would denote not jump to the foreground and have meaning (the faces).
However, the negative space faces do jump to the foreground, because our minds have evolved to make meaning out of imagery. These two different ways of processing must be understood when designing.
Different modes of processing in application
Based on the way Google designed their G Suite icons, the expectation was that icons would be processed in bottom-up fashion rather than top-down. Small details like the “31” in Calendars, and the lens in hangouts would signify distinction between the programs.
While an experienced user of these programs might recognize these core details between the apps, they almost disappear when scanned in a top-down fashion. Rather than looking at each individual icon and deciding if it’s the desired one, we scan to notice key differences. Color is such a striking characteristic, however, and prevents this.
Highs and lows of top-down processing
For years, strong logos have utilized our human tendency to favor top-down processing to convey evocative meaning through quick, distinguishable imagery. Successful logos do this, and we are instantly evoked with emotion and memories that represent different brands.
While looking at each logo, what is your reaction? The first thing that comes to mind is probably the brand name, but next thing is likely a subconscious feeling of that brand’s identity. This feeling happens, because top-down processing has already assigned meaning to the figure. This meaning is why good logos work using the black and white test. It is also why you probably noticed the two faces earlier in the article.
When set to black, the new G Suite icons are decent, but don’t carry enough interesting characteristics to evoke the feelings, like the logos presented formerly.
How we can predict processing models
While processing is different for everyone, there are steps that I’d recommend to figure out which type of processing will be used for your product. Here are a few that I use:
- Understand the modal — Is the modal an icon? Or is it a featured image? Most of the time, icons are strictly used for wayfinding. Featured images are often read bottom-up and can clue users about primary product information.
- Understand the context the modal is in — Maybe on Facebook, your eye scans the feed for meaningful posts in top-down fashion. However, within the posts you care about, maybe you take the time to read and understand the content in a more bottom-up approach.
- Consider hierarchy — Most app icons exist on pages, but some exist on the doc. Apps existing on the doc are a lot easier to process in a bottom-up manner, because of their structural hierarchy. When notifications appear, they are much more prominent for those icons in the doc.
- 1. If it’s peripheral, it’s top down — The question becomes, can the nature of the element change from peripheral to central. If yes, then there’s possibility that it might be consumed from the top-down.
How to design for top-down, how to design for bottom up?
In top-down modals, design must be more limited, because it is either not the focus, or part of a larger system. The limits on design can apply to many different characteristics, such as color, form complexity, and information architecture (to name a few). More importantly, the design needs to be evaluated for harmony within the larger modal or system that it is a part of.
Bottom-up modals carry much less stringent restrictions. Since they are often processed in isolation of the surrounding elements, there is a lot greater of a creative freedom when designing modals that will be processed from the bottom-up than top-down.
This is why companies might use a simpler logo for situations where top-down processing is more prevalent and a more complex logo (oftentimes with text), when the logo is viewed individually and read from bottom-up.
Summing it up
Very little is understood about cognition to begin with, and even less is known about the inconsistent effects that colors have on our psyche. More research needs to be done on understanding the ways in which humans consume visual information. For now, there are two distinct modes of processing this information that greatly affect how this meaning is ultimately interpreted.
[1]: De Craen AJ, Roos PJ, de Vries AL, Kleijnen J. Effect of colour of drugs: systematic review of perceived effect of drugs and of their effectiveness. BMJ. 1996;313(7072):1624‐1626. doi:10.1136/bmj.313.7072.1624
[2]: Elliot AJ, Aarts H. Perception of the color red enhances the force and velocity of motor output. Emotion. 2011;11(2):445–9. doi:10.1037/a0022599
[3]: Frank MG, Gilovich T. The dark side of self- and social perception: black uniforms and aggression in professional sports. J Pers Soc Psychol. 1988;54(1):74‐85. doi:10.1037//0022–3514.54.1.74
[4]: Cherry, K. (2020, May 28). Can Color Affect Your Mood and Behavior? Retrieved December 03, 2020, from https://www.verywellmind.com/color-psychology-2795824
