Clean and Air Cooler

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.

For Example: Air Cooler PLUS

A good example of a 1.0 value for the Color Scheme variable within the Quick-UX framework is Air Cooler PLUS.

00_aircoolerplus_homepage

Q: Do the colors match the products messaging?
A: Yes.

Air Cooler Plus is a very good example of a product with a Color Scheme very much inline with the goals and sensations that they seek to convey to its users.

01_aircoolerplus_ac

Sometimes being blue can produce a very happy result. The blue end of the spectrum is not only associated with feelings of sadness and melancholy, but also the more physical sensations of cool and frigid temperatures.

02_aircoolerplus_header

A visitor to this product can instantly picture the cool blues of ice, and even the purpling of chilled lips. And, with this product, the theme conveyed by shades of blue ranging to the deep purple are perfectly in tune with the purpose of the item this product is selling, a cooling, chill inducing, warmly embraced, air conditioner.

Q: Do the colors negatively impact the user’s ability to read the content?
A: No.

All of the messaging of this product is presented with the text color in clear and high contrast to the background upon which it has been placed. Furthermore, the contrasting nature of the text color with the text background color, whether it is black text on a white background, or (icy) white text on an indigo background, is always done with a color from the simple product color palette being paired with a contrasting neutral color. Throughout this product the presentation of these high-contrast, color pairings result in a non-negative impact on the readability within.

03_aircoolerplus_text

Q: Is this product suffering from color overload?
A: No.

The color palette of this product is very simple.

04_aircoolerplus_colors

The Color Scheme primarily consists of a range of blues, your normal web product neutrals of black and white. Only to draw the consumer’s attention, to key locations and information within the various views of this product, will you find the appropriate use of higher contrasting, attention grabbing colors.

Should Do

Specifically surrounding this product’s use of the more attention grabbing colors, reds, yellows, etc., there are some basic steps that can be taken in further refining its use of color…

All would benefit from bringing more attention to the call-to-action buttons.

05_aircoolerplus_buy-online-now

For example, while the ‘Buy Online Now’ button is set apart from its surroundings by way of its 3-dimensional distinction, versus the general flatness of all other product elements, it can easily blend in with the rest of the blues and cool colors of the page. Here, the use of reds, or colors outside of the blue-purple color range would help further distinguish this important user action.

On the product pages, this emphasis issue, with respect to the call-to-action buttons, in this case ‘add to cart,’ can also be seen.

06_aircoolerplus_product

Clearly the product is emphasizing availability and price, over the purchase action.

07_aircoolerplus_product-red

To rectify this situation, something as simple as swapping the colors used within the two regions in question, or having the only red on the page being the ‘add to cart’ button, may prove sufficient.

Another minor point is that while it is good manners (and Usability) to clearly label a link that points to a PDF file, this could be done in a more focused manner.

08_aircooler_plus-pdf

With this appropriately chosen color scheme, the red colors of the PDF logo bring a bit more emphasis to this informational region that the situation appears to call for; needlessly deemphasizing the purchase events. In these cases, instead of warning the visiting clicker by displaying the PDF logo, a simpler approach, such as using a text label ‘(pdf)’ at the end of the appropriate links, is better suited.

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