From Startup Color to Hitting the Right Visitors with a 4×4

Posted on April 16, 2011 by Jeremy Horn

Every week I read thousands of blog posts. For your weekend enjoyment, here are some of those highlights. What are you reading this weekend?

On Starting Up…

http://www.rocketwatcher.com/blog/2011/04/startup-launch-lessons-from-color.html
Color your understanding of launching a startup right.

On Design & Product Experience…

http://www.inspiredm.com/winning-knowledge-content/
Target your visitors with a 4×4 to achieve greater engagement.

On Modular Innovation…

http://www.crunchgear.com/2011/04/14/review-nike-sportwatch-gps/
Hone your knowledge of a new device of Modular Innovation.

Have a great weekend!

Jeremy Horn
The Product Guy

From Product Focus to the Enticements of Color

Posted on March 12, 2010 by Jeremy Horn

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

On Starting Up…

http://visitmix.com/Opinions/Bass-ackwards
Forget about the technology. Focus on the product.

On Design & Product Experience…

http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/
Influencing your visitors through color.

On Modular Innovation…

http://highscalability.com/blog/2010/3/9/applications-as-virtual-states.html
Virtual States from Modular Innovation. Inevitable?

What are you reading this weekend?

Jeremy Horn
The Product Guy

Google: True Colors Shine Through

Posted on September 21, 2009 by Jeremy Horn

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:

Clean and Air Cooler

Posted on September 14, 2009 by Jeremy Horn

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.

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.

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.

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.

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

The color palette of this product is very simple.

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.

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.

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

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.

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

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Higgledy Haven

Posted on September 7, 2009 by Jeremy Horn

For Example: HavenWorks

Some havens present many distractions to the mere mortal, and this one, HavenWorks, presents no shortage of User Experience problems that can be explored. But, for today’s conversation, we will focus on this product’s ability to be a strong example possessed by a cluttered pallet and Fair Color Scheme, and achieving a Quick-UX Color Scheme variable value of 0.5.

This product’s consumers are instantly overcome with very strong, bright, highly contrasting primary colors all competing for their attention.

Sin of Overstimulation

Instead of presenting a simple, harmonious, color scheme, this product assaults the eyes with a combination of both intra- and inter-element color and contrast discord and overstimulation.

While readable, altogether, the colors of this product create a persistent state of disharmony and conflict, perhaps inline with the state of politics that this product covers, but too overt in their presentation and welcomed by no one desiring the information that this color scheme masks; an orgy of colored hot spots seeking to draw the user’s attention, pulling the user from red to blue, green to white, etc. and back around again and again.

Should Do

A bit more work than last week’s example may be required to improve this product’s Color Scheme. A good place to start in sheltering this product’s visitors from color overload (and "contrast abuse") can be achieved by reducing the level and frequency of contrast through…

Minimizing the number of primary colors on the page, and
Reducing the number of elements and points of contrast.
- Leverage the colors to group common elements, use hues to transition or sharper contrasts to emphasize (occasionally — this should be the exception, unlike the current color implementation).

Quick & Useful

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

A Dentist of a Different Color

Posted on August 31, 2009 by Jeremy Horn

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).

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

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)…

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…

… 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

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Sea Unfathomably

Posted on August 24, 2009 by Jeremy Horn

For Example: Midwest SCUBA

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

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

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.

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.

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.

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

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

On the Color of Quick-UX

Posted on August 17, 2009 by Jeremy Horn

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…

Do 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 refridgerator both 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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Do I want to use it? Evaluating Desirability through Quick-UX.

Posted on April 14, 2008 by Jeremy Horn

Desirability is a very real component of a product’s User eXperience. The feelings that a product invokes in an individual are often difficult for that individual to elaborate upon, beyond such feelings like those of a sense of pleasantness, happiness, awkwardness, or one of frustration.

While quantifying Desirability can, in many cases, prove to be quite challenging, those emotions that relate to the Desirability of a product can be quantified via Quick-UX as one of its three core categories (the other two core categories being Usability and Usefulness).

The minimal representative subset of variables for Desirability that adhere to the primary goals of Quick-UX (quick assessment for summary, direction guidance, and quantitative comparison) are…

Aesthetics (and minimal design),
Layout (including the visual hierarchy, flow and grouping of elements of the product)
Color Scheme (and Contrast), and
Typography.

Aesthetics

Information overload negatively impacts, hence the word ‘overload,’ the actual Desirability of a product. Any more, or supplemental, information and functionality than is needed contributes to the erosion of a pleasing and enjoyable experience.

Content, mouse-interactions, and transitional animations should be kept short and to the point. Do not explain a feature with a paragraph of information where a brief 3 word phrase would do, nor use a 3 word phrase when a clearly identifiable button can, itself, clearly convey the underlying message or functionality.

I have found that the product’s Aesthetics contribute most significantly to its overall Desirability. For this reason, unlike the other variables that make up Quick-UX, the Aesthetics variable can be assigned a value from 0 through 2 (as opposed to the typical maximum value of 1).

The value assigned to the Aesthetics variable in determining Desirability within Quick-UX is…

2 if the product presents a clean, sharp, pleasing and enjoyable product environment where interaction is a pleasure. In addition, the product consistently makes good use of mouse-overs and animated transitions.
1 if the product presents generally “OK” Aesthetics. The product may have some mouse-over states and other beneficial transitions, but these states and transitions are found to be incomplete and would benefit from a more comprehensive and consistent implementation.
0 if the product suffers from information and graphical (transitions, interactions, etc.) overload. In this case, the content and graphical aspects of the site continually get in the way of getting the desired task completed quickly, efficiently, and enjoyably.

Layout

The Layout of a page is about more than just Usability. The Layout of a page, the visual hierarchy, its flow, as well as grouping and alignment of its elements, is the environment within which the user works and interacts with the product — it sets the tone and, in turn, shapes the product’s Desirability.

The value of the Layout variable is the sum of the decisions…

…regarding the product’s visual hierarchy…

If the most important content of the page

Stands out clearly (the user’s eyes are instantly drawn to these elements), add 0.4, or
Takes at least a few seconds to become apparent, add 0.2, or
Takes more than a few seconds to become apparent, don’t add anything.

…regarding the interface’s visual flow…

The visual flow can be described as the interface/page forces that guide the users’ eyes about the page. If a page has a negative visual flow, then it contributes to guiding the eyes away from the critical sections that need to be looked at and used to take primary actions and make decisions.

If the overall visual flow provides a non-negative impact on the page hierarchy,

then add 0.3,
otherwise do not add anything.

Furthermore, if the interfaces of the product require / recommend a specific sequence of steps be taken to accomplish a task, and the visual flow has a negative impact, guiding the user in the non-desired order, then subtract 0.15 from the Layout variable.

…regarding the grouping and alignment of the page / product elements…

A good product has clearly defined ‘regions’ within its interface. For example, a search engine may have one region for entering the search parameters, and another region for viewing the search results.

If the interfaces of the product present UI elements that appear to be scattered, placed without association or relevance to neighboring or distant elements that possess similar or different functionality, then no additional value is added to the Layout variable.

Otherwise, if most page elements appear to form logical, related groups or clusters, where perhaps not all of the clusters are neighboring or some of the clusters have redundant logic and functionality, then add 0.15 to the Layout variable.

However, if the relationships between like and dissimilar elements and groups are clearly presented, with no apparent inconsistencies, then the Layout variable is, instead, incremented by 0.3.

Color Scheme / Contrast

The Color Scheme of a product sets the mood and appeal. Color schemes can be simple, with only one or two colors, to very complex, with many complementary and varying levels of contrasting colors.

For example, red’s, yellow’s and orange’s are warm colors and, as a Color Scheme, could, very appropriately, be paired with products that wish to intuitively convey concepts or themes of warming or heating, like FeedBurner (as a theme derived from the name) or portable space heaters (products that keep you warm in the cold of winter).

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, there are some extraneous color selections or a mismatch of color temperature, Contrast, or saturation with respect to the messaging and tone. For example, an air conditioning website would probably want to stay away from the warm colors (red, yellow, orange), even if aesthetically pleasing.
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.

Typography

Some people do not fully appreciate the degree of impact that Typography can have on a product’s overall User eXperience, and especially its Desirability. Different fonts, different font sizes, and how they are arranged and laid out to interact with one another and other product elements, do more than present readable, or unreadable, content, but frame many of the emotional aspects of the product.

Typography decisions control the ranges of voice from loud and shouting to gentle and whispering, from serious to comical. When products are presented with too many fonts, they increase the likelihood of conveying the information with too many, and inconsistent, voices; as opposed to a pleasing, guiding conversation about the product.

If the Typography from page to page, interface to interface, functionality type to functionality type, is clean, readable, and consistent in usage then the Typography variable is assigned a value of 1.
Otherwise, if minor to major inconsistencies are apparent, or an overloading of Typography ‘voices’ are present, but all remain readable, the Typography variable becomes 0.5.
However, if the inconsistencies are tremendous, and make understanding the content difficult or bewildering, or even if only some of the content is unreadable, the Typography variable equals 0.

So… Do I want to use it?

While this question within the Quick-UX framework provides for the rapid assessment of Desirability, it represents only one of the three ‘questions’ that, when combined with…

Can I use it? (Usability)

Should I use it? (Usefulness)

…provide for an easy, consistent, and expeditious means by which to determine a product’s overall User eXperience.

Enjoy!

Jeremy Horn
The Product Guy

Quick-UX. Quick Heuristics for User eXperience.

Posted on March 24, 2008 by Jeremy Horn

Introducing… Quick-UX

There are many procedures, rubrics, methods, analyses and theories with respect to assessing the overall User eXperience of a product. Most User eXperience assessment approaches require a heavy investment of time, analysis and effort.

Often, a quick assessment of User eXperience is more aptly called for. A quick assessment allows for rapid compilation of simple heuristics that can be very handy in providing…

a summarized view of a product’s overall User eXperience,
directional guidance for a product’s future development, and/or
metrics for comparison with other products.

More detailed and extensive heuristics (many with hundreds of variables to evaluate) exist that delve into the finer details that lead to more directly actionable steps, but they are neither cheap in time nor money.

Quick-UX is a method that I have developed and refined over time and frequently utilize when quick assessments are best suited to the task. The method that I describe below is a great way to build a summary description with quantifiable and comparable metrics, representing the understanding of the overall User eXperience of a product.

The Quick-UX evaluates the degree to which a product successfully addresses the following 3 questions:

Can I use it? (Usability)
Should I use it? (Usefulness)
Do I want to use it? (Desirability)

The elements evaluated in response to each question constitute a minimal representative subset that accurately addresses the question posed while adhering to the goals of Quick-UX.

Evaluating Usability

Whether or not something can actually be used is critical to a product. Quickly evaluating the ease with which the typical consumer can use a product consists of looking at the following variables:

Accessibility,
Consistency,
Recognition (also including Intuitiveness),
Navigation (also including site-flow, transitions, and interactions), and
Page Load Time.

Each variable here, as well as those making up the other 2 evaluation categories (‘questions’), possess specific rubrics to generate repeatable and quantifiable values (each normalized to be of the range from 0 through 1 or 2) that can consistency be understood and compared to like evaluations. For the Quick-UX, each category can, through the summing-up of each of its values, achieve a maximum category score of 5 (minimum being 0).

Evaluating Usefulness

What good is a product if it isn’t useful? Does the product solve a new problem, or an existing problem? Does it do so in an innovative and creative way? The quick evaluation of Usefulness is constituted by an assessment of these variables:

Functional Expectations (expectations are created via marketing, content, branding, etc.; put another way, ‘were the functional expectations of the product, from the perspective of the consumer, achieved?’),
Errors (including handling, recovery, and prevention),
Product Differentiation (including memorability),
Findability (i.e. search engine friendliness), and
Credibility.

Evaluating Desirability

The Desirability of the product, its appearance and the feelings it can stir in the user through the methods of presentation, can often be a good proxy for the organic word-of-mouth campaigns and buzz that spring up around it. Desirability taps into the emotions of the product’s users through:

Aesthetics (and Minimal Design),
Page Layout,
Color Scheme (including Contrast), and
Typography.

Desirability consists of only 4 variables. Aesthetics, unlike all of the other variables in the Quick-UX, is normalized to a range from 0 through 2, due to its greater impact on the overall desirability of a given product.

Try it. Use it. Tune it.

All of the values, when summed up (max. value of 15), form the UX (User eXperience) Rating for the evaluated product. The higher the rating, the better the product’s overall User eXperience. My favorite use for this evaluation is to quickly compare the User eXperience of multiple products with one another.

As the Internet and online products evolve I update and adapt my approach to quick evaluations. Let me know how the Quick-UX works for you. Tweak it, adjust it to suit your particular goals. Please share your findings.

What sort of quick User eXperience evaluation methods do you use?

More Information

You can read more about alternate User eXperience evaluation heuristics and theories at these websites…

Ten Usability Heuristics (link)
Stanford Guidelines for Web Credibility (link)
The User Experience Wheel (link)
Metrics for Heuristics: Quantifying User Experience (part 1 part 2)
User Experience Design (link)
User Experience Strategy (link)
How To Quantify the User Experience (link)
Designing Interfaces (link)

Enjoy & Post experiences with Quick-UX and other methodologies.

Jeremy Horn
The Product Guy

On Starting Up…

On Design & Product Experience…

On Modular Innovation…

Share this:

Like this:

On Starting Up…

On Design & Product Experience…

On Modular Innovation…

Share this:

Like this:

For Example: Google (Search Results)

Quick & Useful

Share this:

Like this:

For Example: Air Cooler PLUS

Should Do

Quick & Useful

Share this:

Like this:

For Example: HavenWorks

Sin of Overstimulation

Should Do

Quick & Useful

Share this:

Like this:

For Example: KAB Dental Supplies

Should Do

Quick & Useful

Share this:

Like this:

For Example: Midwest SCUBA

Should Do

Quick & Useful

Share this:

Like this:

Look, Ask

Rubric

Plethora

Quick & Useful

Share this:

Like this:

Aesthetics

Layout

…regarding the product’s visual hierarchy…

…regarding the interface’s visual flow…

…regarding the grouping and alignment of the page / product elements…

Color Scheme / Contrast

Typography

So… Do I want to use it?

Share this:

Like this:

Introducing… Quick-UX

Evaluating Usability

Evaluating Usefulness

Evaluating Desirability

Try it. Use it. Tune it.

More Information

Share this:

Like this: