On the Color of Quick-UX

desirabilityColors, their schemes, and contrasting arrangements play an important role in increasing, or depressing, the Desirability of a product. Colors play an important role in invoking emotions, conveying themes, and guiding messaging.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Do I want it?" the sub-category of Color Scheme plays an important role.

Look, Ask

When evaluating the Color and Contrast of a product’s Desirability, from color temperature to brightness and saturation, some questions worth asking are…

01_bad_colorsDo the colors used negatively impact one’s ability to read the content?

If the color choices of the product make the product’s content unreadable, what desire would any user have to return? It is important consider color interactions, e.g. red and blue, brightness, e.g. light grey, and contrast, e.g. blue on blue, among other things.

Do the colors seem to match the product’s messaging?

Colors can have both direct and subliminal influence over the content to which they are applied. Colors should reinforce the messaging, not work against it. For example, in presenting a web product that advocates clean water, the last colors you would want associated with the product are those of browns and blacks, indicative of muddy, dirty water. Another example can be demonstrated through  orange refridgeratorboth the implied meaning and temperature of the colors selected. On a hot August day, a visitor to an air conditioner corporation’s website would be best served with visions of coolness and comforting environments, e.g. whites, blues, and greys, instead of those reminiscent of the oppressive outdoor heat, e.g. reds, oranges, and yellows.

Is this product suffering from color overload?

Color schemes should be kept simple and contextually relevant. When a product overuses color variety, or inconsistently implements the colors, e.g. sometimes links are blue, sometimes grey with yellow highlight on mouse-over, color overload can result in a product’s Desirability quickly descending into information overload, and induce layers of confusion.

Rubric

The Color Scheme variable is assigned the value of…

  • 1 if approximately one to three primary hues are present within the product and those selected hues accurately reflect the message and theme of the product (some examples: warm colors = energy, cool colors = respectable, etc.).
  • 0.5 if the color palette is cluttered with some extraneous color selections or there is a mismatch of color temperature, contrast, or saturation with respect to the messaging and tone.
  • 0 if the contrast and color selections that comprise the product’s Color Scheme make some or all of the product’s information and/or functionality difficult or impossible to read or understand.

Plethora

There are many good resources for learning more about color theory, and the various roles it plays in online products. Some good resources are…

To understand more about the role of contrast…
http://www.gomediazine.com/design-tip/rule-three-contrast-contrast-contrast/

List of resources for understanding color online…
http://vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/

To understand color temperature and selection for web products…
http://newark1.com/color/000055.html

To understand the psychology and interplay of colors…
http://www.colourlovers.com/blog/2009/06/02/color-basics-dos-and-donts

Quickly evaluate an online product’s color and contrast accessibility…
http://www.checkmycolours.com/

Quick & Useful

The variables…

Aesthetics,
Layout,
Color Scheme, and
Typography

…represent the Usefulness category of Quick-UX for the evaluated product. When looking at an entire product, the question “Do I want to use it?” represents only 1 of the 3 core components (Usability, Usefulness, Desirability) of a Quick-UX evaluation – a sure-fire, rapid way to obtain concrete and comparable means by which to assess a single product or compare its strengths and weaknesses to other products.

Over the next few weeks I will be various good, as well as bad, real-world examples of use of Color and Contrast in online products and websites …

Poor Color Scheme
Fair Color Scheme (Cluttered)
Fair Color Scheme (Mismatched Color)
Good Color Scheme (First Example)
Good Color Scheme (Second Example)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Color Scheme components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!
Advertisements
This entry was posted in user experience and tagged , , , , , by Jeremy Horn. Bookmark the permalink.

About Jeremy Horn

Jeremy Horn is an award-winning, product management veteran with 2 decades of experience leading and managing product teams. Jeremy has held various executive and advisory roles, from founder of several start-ups to driving diverse organizations in online services, consumer products, and wearables. As founder of The Product Group, he has created the largest product management meetup in the world and hosts the annual awarding of The Best Product Person. Accelerating the next evolution of product management, Jeremy acted as creator and instructor of the 10-week product management course at General Assembly and The New School, and mentoring at Women 2.0 and Lean Startup Machine (where is he also a judge). To see where Jeremy is now check him out at (1) http://linkedin.com/in/TheProductGuy and (2) http://TheProductGuy.com