UX Design and Emotion Part 2: The Role of Color

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

Picasso_color feelings

The role color plays on perception has a long history, from the fabric choices of monarchs on the one hand to sumptuary law on the other.

We use colors to describe a state of mind such as feeling blue, seeing red, or shaking off a black mood.

Green with envy color emotion

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.

Color sentiment

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.  

warm-cool-colors

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.

ColorsEmotions

White

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.

color emotion White_simplicity_DeLonghi Toaster

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.

color emotion White_VinylPlayer_Piotr Kwiatkowski

Whitespace

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.

document-white-space

source

Black

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.

color emotion black

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.

color emotion Black_tesla

Tesla app

Red

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.

color emotion Red_espn

Red also makes us hungry. No surprise that it’s so popularly used by fast food chains!

color emotion Red_fast food

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!).

color emotion Red_buttons
By Ahmed Gamal

  color emotion Red_button

As a UX element, Red is frequently used to draw attention to warnings, or important status state..

Orange

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!

color emotion orange  color emotion Orange_Pivo2

Orange is sometimes associated with inexpensive or accessible products. These brands wear it proudly because they reflect the values of their consumers.

color emotion Orange-logos

Yellow

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.

color emotion Yellow_logos

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.

color emotion Yellow_signs

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.

color emotion yellow   color emotion yellow

In nearly all its variations, Yellow is considered optimistic. So don’t worry, be Yellow!

Green

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.color emotion Green_sports

Zepp app

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.

Green_CTA3

Green_switch_sm

Blue

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.

color emotion Blue_light
Blue lights in Glasgow, Scotland

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.

color emotion Blue_United

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.

Purple

royalty, intelligence, spirituality, creativity, courage

Purple conveys feelings of luxury. In addition to its creative affects, Purple carries an air of mystery.

color emotion Purple_syfy

Because of its comprehensive characteristics, it lends itself to a wide range of product types.

color emotion Purple_luxury

 

Brown

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.

color emotion Brown_ups-delivery

Brown’s brightness and saturation can be adjusted to make it a warm neutral.

color emotion Brown_website

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!

 

 

Leave a Reply