Colors, 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.

For Example: Google (Search Results)

Google Search is a great example of a product that performs perfectly, not just by providing colors very much inline with the target mood of trustworthiness and reliability, but also in how it all impacts the broader readability and accessibility of the products as evaluated from the perspective of color, thereby achieving a 1.0 value for the Color Scheme variable within the category of Desirability within Quick-UX.

A Standard Look

Internet standard colors are high contrast, highly readable, and bring with them the universal understanding of expected behavior, from new blue link and the purple visited link to the black body text on a white background. Standard color usage helps new and repeat users be more productive — when a link is purple a user doesn’t have to struggle to remember what they previous did; they already know that those purple links in a sea of blue links are those already visited on prior trips to the product.

Some standard expectations of color usage seen throughout the Google Search product are…

• consistent link colors
• visited and unvisited links are different colors
• unvisited links are blue
• visited links are purple
• content / descriptions are black

Blue and Black

The strongly colored blue links dominate the search results, catching the user’s eyes and guiding the user from the top listing to each successive hot spot (blue link) on the page.

The black text, rightly subordinate to the blue links, is both easy to read against the white background, and does not interfere with the visual flow of the product.

With this much content on a page, it is easy for a poorly executed color scheme to result in a lack of direction and a confusion of choice. But, here, the weighted use of blue title / links, coupled with other highly contrasting content of lesser attention grabbing strength, provides a perfect use of color, contrast and visual momentum throughout the search results.

Google strictly adheres to these standards and extends these and other web safe color standards and expectations throughout their Search as well as various other Google products. This is a color scheme and structural color approach used throughout the majority of Google’s more refined suite of products (e.g. Google Voice, Gmail, Google Reader, …).

The strength of this product’s Color Scheme and an assessment of its color-based readability and accessibility can be more rigorously and scientifically evaluated by running the product through a serious of color and contrast accessibility tests. The CheckMyColours product runs numerous tests to evaluate a given URL’s adherence to WAI, WCAG 1.0 and WCAG 2.0 standards.

A Standard Feel

This adherence to the most basic of color standards of the web not only ensures great readability and usability of the product, but also reinforces the more ‘emotional’ human responses to this product as the ‘standard,’ the ‘authority’ on information online.

Google Search’s color choices, from logo to page content, can be characterized as consisting of …

• primary colors(except for the occasional green),
• structure, and
• order.

These characteristics:

the minimal color complexity,
adherence to (mostly) primary colors and web color standards,

…result in the simultaneous coexistence of being a definer and follower of the color standards of the Internet, from blue links to black text on white.

Such adherence to web standards and simplicity, the colors, of blue, white, black, purple, yellow, red, and green (within the product, as well as the product’s logo) evoke feelings of …

• honesty,
• objectivity,
• integrity,

… and, in turn, an overall trustworthiness.

Google Search, as the standard bearer for finding information, is reinforced by the ‘theme of standards’ established initially with their consistent and standardized choice of colors. By sticking with the most basic, most standard of colors for a web page, Google Search reinforces the emotional connection of standard bearer, the authoritative voice on online information; demonstrating, through its lack of gaudier colors, a more scientific, more standard, more matter of fact, factual presentation, a cooler presentation of ‘just the facts.’

Think Green

The use of green, a color blend, the most prominent, action agnostic, non-primary color of this product, both in the logo and search results presents a slight break in the rigor of standards. One such interpretation of the emotional impact of green within this product, is that with all the order and structure Google Search seeks to bring to its users, there is also a strand of non-primary, non-structure woven into the product, a sense of being and thinking a bit differently. Further reinforcement of this interpretation, can be seen in the mood effects often associated with the color green, of…

vitality,
creativity, and
sharing.

All emotions and concepts instrumental to both the Google Search product, as well as a primary theme throughout Google’s products and strategies.

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 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: