In part one of Design and Emotion, I talked about how product design can inspire emotion. In this segment, I’ll be focusing on the effect of color on emotion, and its impact on product and UX design.
“Colors, like features, follow the changes of the emotions” – Pablo Picasso
We use colors to describe a state of mind such as feeling blue, seeing red, or shaking off a black mood.
Color psychology has produced many studies on the importance of color in marketing, business, and product design. We now know that color affects the food choices we make, the flowers we grow – and also the cars we buy! The influence of color is even powerful enough to affect the efficacy of the medications we take.
Nowadays we can design products and interfaces in a nearly infinite number of colors. So, let’s discuss how we can use colors in our design to evoke the right emotion in our audience.
Colors are are divided into warm and cool characteristics. These color groups have been associated with different psychological responses. Cool colors such as Blue and Green are considered peaceful and relaxing. Warm colors such as Red, Yellow and Orange are stimulating – and so, not surprisingly, are associated with food and appetite. Purple, which combines invigorating Red with serene Blue, is said to encourage creativity.
Colors, also called hues, can be tweaked. We can create additional shades by adjusting color brightness (by adding Black or White) and saturation (by adding gray which changes the intensity or vividness). Differences in brightness and saturation can evoke very different feelings. Compare, for example, the energy of Red with the sweetness of Pink.
purity, simplicity, freshness, youth
White might not seem like a color, but it serves an important purpose in design. White is often used in product design to emphasize innovation and simplicity.
In digital design, it is often used to better highlight other colors. White is used around screen elements to better emphasize and distinguish them. Don’t underestimate the impact that white space has on your screen design.
Note that “white” space doesn’t actually have to be White. However, in interfaces with lots of text, the inclusion of white space – for example margins, gutters and spaces between text blocks – is an important element of user experience.
authority, strength, sophistication, elegance
Black is the strongest color and is therefore used to quickly attract attention. It is commonly used for text for the contrast it affords on light background.
This boldest of colors is often used to generate feelings of exclusivity and elegance. Black doesn’t need much more than the occasional pop of color. Its starkness says it all.
energy, passion, speed, danger, power
Red usually generates excitement. It gets our hearts pumping! Red elements usually attract more attention. In branding they often indicate energy and power.
Red also makes us hungry. No surprise that it’s so popularly used by fast food chains!
The color Red signals a sense of urgency and attention – and gets us to get things done more quickly and powerfully. It’s often used in product design to focus attention on a call to action (you really want to press that!).
As a UX element, Red is frequently used to draw attention to warnings, or important status state..
cheerful, friendly, enthusiastic, playful
Orange is a playful, casual color. It’s energetic, but less so than Red. Use Orange to convey an upbeat mood. I love its use in this fun (and most necessary) app!
Orange is sometimes associated with inexpensive or accessible products. These brands wear it proudly because they reflect the values of their consumers.
happiness, hunger, intensity, warning
This hue can evoke different moods in you. It generally creates feelings of happiness and friendliness. It is sometimes connected to frustration and anger. Although a cheerful color, babies are more fretful in Yellow rooms. Lighter saturations are less likely to cause anxiety – yet retain Yellow’s warmth.
Yellow is the most eye-catching color and is very effective in branding.
Because of its visibility, Yellow can be very useful when applied in small amounts to draw notice. It can be particularly effective when used with black or grayscale.
Too much Yellow can be hard on the eyes, though, so it’s best not to use a vivid Yellow as a background to a text-rich page.
In nearly all its variations, Yellow is considered optimistic. So don’t worry, be Yellow!
growth, health, nature, money, harmony
Refreshing Green is generally a well-liked color. It’s a balance between warm Yellow and cool Blue.
We associate Green with growth, freshness and peace. It works well for designs relating to the environment, medicine, and often, wealth and prestige. It’s also used in some sports-related design when it reflects playing fields and the outdoors.
Vivid Green colors are dynamic to the eyes and grab a lot of attention, so they work well for call-to-action buttons and as state indicators.
trust, loyalty, dignity, safety, wisdom
When people were shown an array of eight colors, Blue emerged as the most liked color overall, and by far the color most preferred by men.
It is the coolest of colors and although it is associated with sadness, it has a calming effect. So much so, that it is being used to prevent street crime and suicides.
Because of its association to sky and sea – generating feelings of relaxation – Blue is frequently used by airlines and travel sites. It’s popular with social networking because it represents communication. It promotes interaction and doesn’t distract users the way other colors are likely to.
Blue is popular with banking and government for the trust it conveys (when we’re relaxed, we’re open to trust). Blue is favored by the hitech sector as well, because it projects awareness, logic and knowledge.
royalty, intelligence, spirituality, creativity, courage
Purple conveys feelings of luxury. In addition to its creative affects, Purple carries an air of mystery.
Because of its comprehensive characteristics, it lends itself to a wide range of product types.
reliability, warmth, organic, food
Brown is the color of earth and wood which projects straightforwardness and resilience. Some consider it old-fashioned or dirty. It is however used often in design (what better way to elevate a mood by associations to chocolate?) – and successfully signals dependability.
Brown’s brightness and saturation can be adjusted to make it a warm neutral.
The bottom line: Don’t select a color based on color stereotypes (“green is for things that are natural”). Do choose colors for your brand or product that support the personality and image that you want to present to your users.
Color me inspired!