A Dentist of a Different Color

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: KAB Dental Supplies

A visit to the dentist is not often one of those most sought after experiences in life. Here, KAB Dental Supplies is a great example of a Fair Color Scheme by way of color mismatch (and Quick-UX Color Scheme value of 0.5).

00_kab-dental_homepage

A chosen Color Scheme can have a profound impact on the psychology and behavior of a product’s consumers.

03_kab-dental_chart

Unlike other examples <link to Sea Unfathomably>, the color choices have not rendered the content unreadable, but have most definitely rendered them increasingly undesirable by neglecting the Cool and Calming end of the spectrum. The Color Scheme of this product is not constituted of welcoming, calming, clinical colors; but, rather ones more so associated with pain, suffering, and alarm (thoughts most, I would hope, dentists do not want associated with them or the tools they use).

As a matter of fact the Color Scheme of KAB Dental Supplies is not too dissimilar from that of the following examples (note their very descriptive names)…

01_kab-dental_evil-dentists

Dental websites and those that supply them with the tools of their craft would be well served to extract themselves from the likes of dentist paranoia, dentist trauma, dentist… again, etc.

Should Do

Whether it is the dentist, him or herself, or those that they cater to, the entire field should strive to scrape away all forms of decay of Desirability by way of Color Scheme. Companies that work within the medical field are smart to seek out the creation of a calm and logical environment. For this product, a good example for a better color scheme, reinforcing the positive, de-emphasizing the negative, can be found in the so aptly named Color Scheme, Doctor Smile

02_kab-dental_doctor-smile

… which presents a Color Scheme that is …

Calming (through the use of cooling colors), and
Trustworthy (a sentiment associated with the blue family of colors).

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!
About these ads

The Product Guy’s Weekend Reading (August 28, 2009)

Every week I read thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

01_product-priorities

On Starting Up…

http://www.inc.com/magazine/20090901/joel-spolsky-setting-the-right-priorities.html
Lessons on product prioritization from the startup, Fog Creek Software.

 
 

On Design & Product Experience…

http://www.kaushik.net/avinash/2009/08/tips-for-improving-high-bounce-low-conversion-web-pages.html
Optimizing consumer intent with product page purpose for enhanced consumer conversions.

02_consumer-intent
03_augmented-reality

On Modular Innovation…

http://www.readwriteweb.com/archives/augmented_reality_five_barriers_to_a_web_thats_eve.php
A look at solving the obstacles of Augmented Reality through Modular Innovation.

 

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!

Sea Unfathomably

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

Midwest SCUBA Center presents both an interesting first impression and simultaneously great example of a Poor Color Scheme.

00_mscsuba_homepage

The most prominent colors on this page are blue, white, and red.

01_mscsuba_colors

This product starts off well enough with its selection of colors in the header, with a high contrasting, easy to read, blue on white, Color Scheme to present the center’s name, explanation, and some contact information.

02_mscsuba_header

But, then the product’s Color Scheme goes off the deep end. The colors of red, white, and blue, in the manner fashioned, do not, pluck the heartstrings of patriotism, but may cause one to be concerned with other matters of that organ.

Not only does the secondary color of the page, red, not mesh with the theme of swimming, and not only is it often used in association with alerts and warnings, but when a user is presented with the overt imagery of red in water, that user may be first inclined to think of Jaws. Learning SCUBA may be sufficiently nerve wracking without this unnecessary association.

03_mscsuba_red-in-water

Associating the instructor and their lessons with the red in the water is not the messaging a SCUBA school wants to convey.

The blinding color scheme is so bad and distracting that it actually hides other somewhat more legible sections of the product. A grey button, that somewhat more legible component towards the bottom of the view, presents the bold option to ‘Continue’ for those daring enough to dip more than a toe in these waters. And, for those adventurous souls, they will discover another set of pages and menus.

04_msscuba_secondary-view

Unfortunately, the bulk of the content on this page, with yellow on blues , is also very difficult to make out.

Should Do

For all of the colorful problems that this product presents its users, the solutions can be simple to implement.

  • Overall, the high water graphic that is being used as the background will cause color matching problems with many color schemes. Replacing this image with a single color or making sure that no text is ever presented directly on top of the water image, but always has a high-contrasting, simple background to play off of would be a good start.
  • On the initial view, the user would be better served through the elimination of the strong, attention grabbing red, and implementation of high contrast color pairs like white on blue or black on white.
  • On the secondary view, as red did not play well with blue, neither does yellow. Here too, the user will benefit from experiencing higher contrasting text; but, my preference remains eliminating or masking the water imagery and shifting to a more eye friendly font color, black or white or blue (of course paired with a contrasting background).

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!

The Product Guy’s Weekend Reading (August 21, 2009)

Every week I read thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

01_vc-entrepreneur

On Starting Up…

http://www.markpeterdavis.com/getventure/2009/08/doing-the-right-thing.html
Advice on VC <-> entrepreneur interactions.

 
 

On Design & Product Experience…

http://www.webpronews.com/topnews/2009/08/18/google-tweaks-adsense-fonts-for-better-performance
On Google tweaking fonts to improve performance and revenue.

02_fonts
03_not-facebook

On Modular Innovation…

http://www.web-strategist.com/blog/2009/08/17/the-future-of-facebook/
On the unimportance of destination at Facebook in a world of Modular Innovation.

 

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!

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!

Quick-UX Credibility from Likexo to Etsy

As a brief postscript to the series exploring Quick-UX and Credibility I would like to share a back of napkin sketch that I made at the beginning of the process that helped structure the series; and that I feel would be most instructive.

credibility-napkin-sketch_thumb[3]

This series’ exploration of Credibility has been a long one, but not an undeserving subject. Credibility, and being able to quickly assess it for an online product, is critical in the increasingly complex ‘web of apps.’

Likexo

00_likexo_homepage_thumb[4] 
(before / after)

None / Average
0 / 0.75

No Obvious Typos

no / yes

General Contact Info Provided

no / yes

Telephone Contact Info Provided

no / yes

Physical Address

no

About Us with Team Member Bios

no / yes

Team Member Bios have Direct Contact Information

no / yes

ConvertFiles

00_convertfiles_homepage_thumb[2] 

(Barely) Low
0.325

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

no

Team Member Bios have Direct Contact Information

no

IndyBudget

06_indybudget_homepage_thumb[2] 

(Barely) Low
0.325

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

no

Team Member Bios have Direct Contact Information

no

ToRSS

04_torss_homepage_thumb[2] 

(Barely) Low
0.325

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

no

Team Member Bios have Direct Contact Information

no

Chart.ly

00_chartly_homepage_thumb[2] 

(Solidly) Low
0.325

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

no

Team Member Bios have Direct Contact Information

no

Pogby

00_pogby_homepage_thumb[2] 
(before / after)

(Solidly) Low / Average
0.325 / 0.75

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no / yes

Physical Address

no

About Us with Team Member Bios

no / yes

Team Member Bios have Direct Contact Information

no / yes

TechCrunch

00_techcrunch_home_thumb[2] 

Average
0.45

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

yes

Team Member Bios have Direct Contact Information

no

Mashable

00_mashable_homepage_thumb[2] 

Average
0.575

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

yes

Team Member Bios have Direct Contact Information

yes

GigaOM

00_gigaom_homepage_thumb[2] 

Average
0.625

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

yes

Physical Address

no

About Us with Team Member Bios

yes

Team Member Bios have Direct Contact Information

no

ThumbTack

00_thumbtack_homepage_thumb[2] 

Average
0.75

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

yes

Physical Address

yes

About Us with Team Member Bios

no

Team Member Bios have Direct Contact Information

no

MakingOf

00_makingof_homepage_thumb[2] 

Average
0.45

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

no

About Us with Team Member Bios

yes

Team Member Bios have Direct Contact Information

no

Etsy

00_etsy_homepage_thumb[2] 

High
0.825

No Obvious Typos

yes

General Contact Info Provided

yes

Telephone Contact Info Provided

no

Physical Address

yes

About Us with Team Member Bios

yes

Team Member Bios have Direct Contact Information

yes

Quick-UX Credibility

No Obvious Typos

+0.15

General Contact Info Provided

+0.175

Telephone Contact Info Provided

+0.175

Physical Address

+0.25

About Us with Team Member Bios

+0.125

Team Member Bios have Direct Contact Information

+0.125

Quick & Useful

Quick-UX Credibility is a measure of the starting point, the foundation of a product’s Credibility. How products, and the people behind them, strengthen, or erode, their trustworthiness through their subsequent actions governs the Credibility imparted to the product’s consumers over time, through extended exposure to the product. However, this extended exposure is only achievable after these products have successfully enticed and converted their visitors into returning readers, by way of a comprehensive User Experience, in significant part due to an initial demonstration (or lack) of Credibility.

And until next week, when the exploration and discussion of products, user experience, modular innovation, startups, or perhaps something quite new, enjoy reviewing the products and ensuing discussions of this series, and see you then.

 

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!