Blogs

Color and user experience


Authors: Ashley Karr
Posted: Thu, June 13, 2013 - 7:48:11

Take away: Proper use of color can enhance the user experience of any design as color affects humans psychologically, physiologically, and emotionally.

Emerald is: “Lively. Radiant. Lush. A color of elegance and beauty that enhances our sense of well-being, balance, and harmony.” Pantone named it 2013’s Color of the Year. I am glad that lively, radiant, lush elegance, beauty, and balance are harmonizing my experience during the 365 days that comprise 2013. However, this is a bold statement–just like the color. Can color really do all of this? The answers are yes and sort of. Please do read for further explanation.

Psychological effects of color 

Color can augment memorization, recall, and recognition. In interactive designs, color can suggest categories and give identity to chunks of information. This can create a design that is more efficient, clearer and easier to understand, easier to learn, and easier to navigate. 

Physiological effects of color 

Colors affect our nervous systems. Research shows that, for example, bright reds stimulate our sympathetic nervous system, resulting in physiological changes such as an increased heart rate. In contrast, soft blues and greens create the opposite physiological effect and help us relax.

Emotional effects of color

Colors themselves and the meanings we attach to them affect our emotions and moods. For example, most people associate the color yellow with feeling happy and energized. On an individual level, a person could associate the color yellow with the color of their home during childhood, which invokes fond memories and pleasant feelings.

Cultural context of color

Remember that meaning in general is culturally constructed. Sensitivity to the cultural context and meaning of color within your user group is important. The following is a common example demonstrating the cultural implications of color. In many Western cultures, black represents death. In some Eastern cultures, white represents death. How this will affect one’s design and user interface decisions is up the design team; however, it is important to remember that we always operate within a cultural context. Our users do, too.

Quick guide to color and meaning from an American perspective

Red

  • Increases blood pressure, heart and breathing rates
  • Stimulates the adrenal and pituitary glands, which can temporarily increase strength and stamina
  • Represents vitality, ambition, and passion
  • Can dispel negative thoughts
  • Associated with anger, danger, indebtedness and irritability

Pink

  • Induces feelings of relaxation, tranquility, warmth, and protection
  • Reduces feelings of aggression and irritation
  • Associated with nurturing, selfless, generous love
  • Light and soft pink associated with femininity, while bolder and hotter hues suggest youthful and fun energy

Orange

  • Stimulates digestive and immune systems
  • Associated with energy and vitality
  • Younger audiences respond to bold oranges, while older and upscale audiences respond positively to softer hues
  • Has only positive affects on mood, acts as anti-depressant

Yellow

  • Stimulates the brain, creating alertness and energy
  • Activates lymph system
  • Happy, optimistic, confident, and uplifting
  • Associated with the intellect, organization, discernment, memory, clarity, decision-making, and good judgment

Green

  • Brings equilibrium and relaxation, feelings of comfort
  • Helps us breathe deeper and slower
  • Suggests nature, peace, well-being
  • Deep shades suggest wealth
  • Represents environmental friendliness
  • Particular shades of green, such as olive, can represent illness and nausea 

Blue

  • Lowers blood pressure, has a cooling and soothing effect
  • Deep blue stimulates the pituitary gland, which regulates sleep patterns, and is associated with calm, restful nights
  • Inspires mental control, clarity and creativity
  • An overuse of dark blue can be depressing
  • Suggests the sky and ocean

Purple

  • Violet suggests purification, cleansing, peace, and balance
  • Combat shock and fear
  • All hues help with mental and nervous disorders
  • Stimulates compassion, intuition, and imagination
  • Associated with the right side of the brain
  • Relates to sensitivity, beauty, and idealism
  • Associated with royalty and nobility

Brown

  • Suggests earth and home and home, stability, and security
  • Can also suggest dirtiness or retreat and isolation from the world

Black

  • Comforting and protective
  • Mysterious, suggests silence and death
  • Can also be considered sleek and fashionable

White

  • Purity, clarity, peace, and comfort
  • Suggests freedom, although too much can be considered cold and isolating

Gray

  • Suggests independence and self-reliance
  • Can be a negative color, suggesting evasion and non-commitment, separation, lack of involvement, loneliness

Color use restrictions

  • Overuse of color creates clutter and confusion. Find one color for your background, one that represents your brand or message, and two complementing yet contrasting colors that can act as indicators for active links, hovering, and visited links. This means a site should have a minimum of four colors. Any additional color should be chosen with care.
  • Underuse of color results in a dull design lacking in interest and meaning. It can also result in confusion. Imagine trying to find a text embedded link that was the same color as the surrounding words!
  • Improper use of color at worst can cause great offense. Remember color carries the weight of meaning, and this meaning is always wrapped in cultural contexts. Be aware of these meanings and use them, and their colors, with respect and purpose.
  • Color blindness affects roughly 10% of the male population. Keep this in mind as you are choosing contrasting colors. If the colors you choose to serve different functions in your design do not suggest a stark enough contrast, a sizeable portion of your user group could be negatively affected by your choice.

How is color important in user experience?

Remember that user experience is overarchingly affective. Both objective and subjective evidence supports the concept that color affects humans psychologically, physiologically, and emotionally. Importantly, these effects come wrapped in cultural contexts. This means that the reactions that color evokes in us can change depending on the culture or cultures in which we were raised, currently reside, or are currently acting as a user. Selecting and using color with thought, purpose, and care can enhance the user experience. We would love to hear your experiences with color use and choice in your designs. Please write your comments below. Until next time, please enjoy the experience.


Posted in: on Thu, June 13, 2013 - 7:48:11

Ashley Karr

Ashley is a UX instructor with GA and runs a UX consulting firm, ashleykarr.com.
View All Ashley Karr's Posts


Post Comment


*

Comments submitted to this site are moderated and will appear if they are relevant to the topic.


@Nick Fine (2013 06 25)

Where are your references?  Much of this is regurgitated popular psychology without any evidence to support it.

@Benoît Larivière (2013 07 04)

Thanks.
I would add also that a tool such as Colour Contrast Analyser (Paciello Group) is helpful to ensure a proper legibility of the text.

@Steve Dolan (2013 07 14)

Great read! I wanted to add something I learned recently: When designing, choosing the style of your hyperlinks so that they easily stand out is important. I’m talking about beyond just changing the color, but also bolding and adding an underline makes a difference. The concept is, if you desaturate and blur your design, you want to still be able to tell where a link is located in your text.