Higgledy Haven

Posted on September 7, 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: 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

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:

About these ads

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:

BCC Report Card: Could Do Better

Posted on January 8, 2009 by Jeremy Horn

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Should I use it?" the sub-category of Layout is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.

The relationships between and among various page elements, how they play off of one another, constructively guiding a process, or organizationally segmenting a concept, can influence how accepted, by the user, the product is, and how Desirable, how much they (the users) will actually want to use it.

Today, we will look at an example of an Internet product with Fair Visual Hierarchy, representing a Layout value of +0.2.

Example: Fair Visual Hierarchy (value = +0.2)

Bellevue Community College‘s website presents an online experience that takes at least a few moments for both the new and somewhat familiar visitor to orient themselves and identify the important content and action elements of the page, resulting in this product being today’s example of Fair Visual Hierarchy.

The color scheme of Bellevue Community College drives two forms of immediately noticeable emphasis.

All of the non-purple components of the website stand out in contrast to the very purple nature of the page, and
Dark purple elements catch the user’s eyes and imply greater importance than the lighter colored elements.

Perhaps the element on this page that initially indicates a high degree of importance is the ‘Give to BCC’ button. The brightness of ‘Give to BCC’ with the heavy weighting given to its neighbors, marketing text ("flexible options for busy people", "emergency alerts") presents an initial, yet artificial, sense of greatest importance relative to the entire webpage and website.

Upon ‘escaping’ this visual local maximum of the page, two regions appear to compete for the next level in the visual hierarchy. They are…

the menu section in the top-left of the page, and

the large marketing / content region in the center of the page.

The top left menu prominently displays its content within a very dark, emphasized menu box, with the contrasting logo (containing a splash of red) further drawing attention and emphasis to the content within this region of the page.

The main content region of the page competes for attention through its use of non-purple (sometimes) and larger, bolder title fonts.

——————–

Given a few extra moments, the user can ascertain the most important elements, and from there, the appropriate degree of importance attributable to the various page elements and actions, with the help of colors, emphases, size, whitespace, and placement on the page. Through some simple changes the most important elements and user decisions can be engineered to be more readily apparent (along with secondary, tertiary, etc. elements) — immediately observable, not taking a few moments to sift through.

Menus

The page has many menu sections and supplemental actions scattered throughout. To better convey the hierarchical importance of the respective elements, the web product would be better served by bringing together the menus, collating the actions, and, on a local level, bringing attention to their respective subsets.

Color & Consistency

Consistency is a very important variable in understanding a product and assessing its overall User Experience (more information). Here too Consistency can be seen to impact the ease with which the Visual Hierarchy can be realized. The inconsistent use of such formatting tools as fonts, capitalization, and colors increases the difficulty of determining the hierarchy of the page content.

There do not appear to be any rules with respect to how the importance of an object correlates to colors, contrast, style (e.g. shadows, round corners), whitespace, or other visual elements of this product. Here, the visitors to Bellevue Community College’s website would benefit from designers’ implementation of some basic visual rules. For example, limit the darker colors and contrasting regions to the MOST IMPORTANT information on the page — pick 1. Also, use empty space between and among elements to create clear separations between concepts and informational groups.

——————–

The methods implemented on this website work against the observer in identifying and rapidly ascertaining the Visual Hierarchy of the webpage thereby resulting in Bellevue Community College’s website being a very good example of Fair Visual Hierarchy. The priorities of the page are not wholly elusive, but do take at least a few moments to judge and act upon.

Over the next several weeks I will be providing real-world examples of Layout values…

Clear Visual Hierarchy (value +0.4)

Fair Visual Hierarchy (value +0.2)

Poor Visual Hierarchy (value +0)

Non-negative Visual Flow (value +0.3)

Negative Visual Flow (value +0)

Poor Sequential Flow (value -0.15)

Clean Grouping (value +0.3)

Inconsistent Grouping (value +0.15)

Poor Grouping (value +0)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Layout 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:

A Spot on myPunchbowl

Posted on October 27, 2008 by Jeremy Horn

Intra-product-type consistency, the Recognition and intuitiveness present within a product, is a key component in determining the overall Usability of a product. For an air travel website to be usable, it should have some basic, recognizable, consistency with other airline products. For example, on the top-left region of most every air travel website you will find a form to enter starting and destination locations, departure and return dates, as well as the number of passengers traveling on the given trip.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Can I use it?" the sub-category of Recognition is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.

Today, we will look at 2 examples of Internet products with Fair Recognition, representing a Recognition value of 0.5.

Example 1: Fair Recognition (value = 0.5)

Starting on the homepage, a feature commonly expected and observed on almost every event planning website, is the ‘create event’ button (or ability), and this is noticeably absent on this website.

myPunchbowl is a sound online event planner achieving Fair Recognition, a Recognition value of 0.5. The product presents minor changes in how it approaches the event creation process, from modified grouping of information to the sequence of steps that must be traversed.

The beginning of the event creation process provides no guidance as to what the subsequent steps will require or where / when the user will be prompted for the basic event information (the "when" and the "where").

In this first stage, when the user is just trying to orient him/herself, and accomplish the common task of defining an event, they are presented with four choices of how one may like to proceed, instead of just being taken to the next logical, expected, stage of the event process.

It isn’t until the user gets to the ‘Your Design’ stage that they are presented with a very recognizable interface for guiding them through the remainder of the event creation process.

There are basic elements that a user expects when creating an online event, from understanding the sequence of events to knowing how to enter the minimal information to get the event set up and completed. myPunchbowl forces the user to jump through the hoops of ‘event type’ and ‘initiation design’ before having the opportunity to enter information into the most expected features of online event planning, Title, Date, Time, Address, etc.

Altogether, it will not take the typical myPunchbowl user, or for that matter, an online event planner user, too long to orient themselves (through some poking, clicking, interacting), adapt and learn how to use the fairly Recognizable myPunchbowl event creation process.

Example 2: Fair Recognition (value = 0.5)

Sometimes the things that set you apart, those things that contribute to providing a unique experience can also lead to some unexpected results for the average user.

The typical travel website presents the user with a request for the basic information on the homepage, for example, start and end date, origin, destination, and number of passengers. Here too is where the Vayama, a travel website, begins the travel planning process.

After defining the basic parameters for a trip, a search is typically initiated. It is at this stage that Vayama‘s unique approach to simplifying the process results in a less Recognizable experience. On the generic travel website, the user, upon initiating the search, is brought to a specific webpage for browsing, and filtering the results.

Many websites also allow for the modification of the search parameters from the search page, while others require the user to return to the location from whence the search was initiated.

Vayama has combined all of these commonly separate pages into a single user interface that adapts as the user interacts with it. It isn’t until the user has to specify the travelers, select the seats, and pay for the tickets, that they even have to leave the homepage of the site.

The combining of commonly separate steps presents its own set of Recognition challenges for the product’s users.

The initial search form alongside the search results makes one think that they can change anything on the page and alter the results. However, this is not the case. Search results pages typically present all of the controls that will filter and impact those results. The unique presentation and process at Vayama, result in different behaviors and set of expectations, requiring some finesse, poking, and interaction to adjust to this paradigm shift in travel planning.

This page requires some clicking and then paying close attention to see if there has been either no discernible reaction or, in other instances, an actual change. Expanding on this example, modifying information within the filter section has immediate impact on the search results, while modifying information within the top half of the form, the basic parameters, has no observable impact on the results, until the ‘search’ button is re-clicked (and all settings with ‘search section’ are reset and results erased).

Another section of the website that results in achieving the Fairly Recognizable rating is the seat selection interface. The seat selection is very cool, but different. After a few seconds the user can orient to the 3D presentation — which is both unexpected and an unusual presentation within the travel industry. Most users won’t have an issue with the format, but the seat selection can be tricky and will require minor adaptation.

Nothing at Vayama is overwhelmingly unrecognizable (much of the overall experience is fun) and, being Fairly Recognizable, can, with some finesse, be figured out and used by the average user.

* * *

To help everyone gain a deeper understanding of Quick-UX and how to benefit from performing quick, quantitative analyses of User Experience, I am, over the course of this series providing real-world examples of Recognition values…

Broad Recognition (value 1)

Fair Recognition (value 0.5)

Poor Recognition (value 0)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usability and Recognition 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:

The Product Guy

Discussion, advice, and reviews regarding online products, the people behind them and the trends they represent, from Modular Innovation and Product Management to User Experience and Quick-UX.

Tag Archives: fair

Higgledy Haven

For Example: HavenWorks

Sin of Overstimulation

Should Do

Quick & Useful

A Dentist of a Different Color