The Product Guy: Superfine in 09

Posted on December 28, 2009 by Jeremy Horn

The Product Guy had another superfine year in 2009, sharing and exploring products, their experiences, and many innovative startups and the founders behind them, while getting to meet and speak with many of The Product Guy’s steadily growing readership.

And, as 2009 comes to a close, as I did last year, let’s take a brief look at the top posts that made this year on The Product Guy so totally superfine….

#9 Quick-UX Credibility from Likexo to Etsy Quick-UX Credibility is a measure of the starting point, the foundation of a product’s Credibility. A look at the popular (and not so popular) examples of web product Credibility online.
#8 World’s Best Programmer is… [w/ Respect] The World’s Best Programmer wants respect. And, respect is just one of those conditions prevalent within the environment of the World’s Best Programmer. In this last post in the series The Product Guy reveals just who exactly is World’s Best Programmer, and where/how they thrive!!
#7 Converted by an Android. A short story of Gmail, in parts. Part 1 in a series exploring the eventual adoption of Gmail in one’s daily life, by one once thoroughly addicted to, dependent on, the primarily client-based solution of Microsoft’s Outlook, what brought about this conversion, why it took so long, and what should be done to encourage greater Gmail adoption.
#6 jQuery Plugin: It’s CuteTime! Many online social products, and more continue to, avoid a formal timestamp format… 2009-10-10 23:14:17 and Thu, October 29, 2004 12:14:19 PM … opting for more user friendly, "warm and fuzzy," human-readable styles… 9 days ago and 5 years ago. As a result, the time has come for the jQuery CuteTime plugin. CuteTime goes beyond similar tools and lets you easily: convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!), customize the time scales and output formatting, and dynamically update the displayed CuteTime(s) upon request and/or automatically.
#5 The Future: Gmail, Social Media, and You Over the past many weeks I have explored, elaborated, and exhausted the extent of the then existent exercising of resistance. Now, with such resistance eroded, drawn out through my conversion by an Android, an exploration into the Future of Gmail and the ‘Should Do’ … Readability, Simplify, Organize, Integration and Consistency.
#4 Google: True Colors Shine Through In answering the question of Desirability, "Do I want it?" the sub-category of Color Scheme plays an important role. Google Search is an outstanding example of a Good Color Scheme demonstrating alignment of both colors and messaging. Learn from it.
#3 Stardoll: Lost and Naked When you look at a web page, the various elements of the page can often be seen coalescing into distinguishable regions and groups. Intentionally structured, or otherwise, these groups that constitute the page Layout play an important role in the web product’s Desirability. Stardoll is a great example of a web product with Poor Sequential Flow.
#2 ThreeDots: The jQuery Ellipsis Plugin Many online products employ ellipses within their products to improve various aspects of the User Experience, such as: allowing for easy summary scanning of page content, and fitting more diversity of content into a smaller space. As a result, the time has come for the jQuery ThreeDots plugin. ThreeDots goes beyond similar tools and lets you easily and smartly truncate text for when: text is too long, text doesn’t fit within the available space, you want to employ highly configurable and flexible ellipses within your web product.
#1 Quick-UX. Quick Heuristics for User eXperience. Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX), consisting of the core components of Usability (‘Can I use it?’), Usefulness (‘Should I use it?’), and Desirability (‘Do I want to use it?’). Quick-UX provides 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. Growing in popularity by leaps and bounds since its original posting in 2008, this posting has earned prime placement amongst other, more recent, articles that made this year, 2009, SUPERFINE.

This year also saw the launch of The Product Group (sponsored by Balsamiq Studios) in NYC as an opportunity for Product People of all sorts and levels of experience to meet, interact, and network, in a laid-back, conversational environment. I am certain 2010 will bring many more exciting gatherings, discoveries, and opportunities; and for those reasons, this too, also helped make 2009 for both Product People and The Product Guy, superfine!

Happy Holidays!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

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:

The State of Massachusetts SSAA Grouping

Posted on February 18, 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 Poor Grouping, representing a Layout value of 0.

Example: Poor Grouping (value = +0)

Massachusetts Secondary School Administrators’ Association’s web product, primarily informational, is one that presents a Layout and Grouping of elements detrimental to the overall User Experience, and, in this case, its Desirability, earning it the distinction of being today’s excellent example of a web product with Poor Grouping.

Many elements appear to be grouped, but with none, other than the java-based menu, actually presenting any logical grouping or separation of similar or dissimilar elements. At first glance, many parts appear to be grouped.

But, upon further inspection, the perceived groups are revealed to be a mish mash of apparently random elements.

The content of this product is organized into columns. Within these columns some elements appear to form groups and sections. Upon further inspection, it is obvious that any perceived visual cues have occurred merely by chance, rather than through any human expression of intent to assist the user in isolating and identifying the content of interest.

Beyond the product navigation and the general content, there is no organization. The content is scattered throughout the main body of the product, with no true associations or relevance between any group, column, or mini-group.

The Layout and Grouping of Massachusetts Secondary School Administrators’ Association‘s web product provides a scattered, chaotic, random experience that does not contribute to the Desirability of the product — a great example of a product with Poor Grouping.

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:

Roll of the Dice.com

Posted on February 10, 2009 by Jeremy Horn

Today, we will look at an example of an Internet product with Inconsistent Grouping, representing a Layout value of +0.15.

Example: Inconsistent Grouping (value = +0.15)

Dice.com is all about finding a job, all about searching for a job, thereby making search a core part of the Dice.com product offering and the focus of our attention in this article as we look at a good example of Inconsistent Grouping.

The search page has 3 primary groups…

Job Search	spanning the top of the page (below the page header / site navigation)
Refine Search	left column
Search Results	below the Job Search group and to the right of the Refine Search group

Redundancy & Interactivity

Among the first noticeable aspects of the groups within the user interface is the presence of redundant information and resultant actions. The user arriving at this product view will find a clear path to initiating the search within the prominently located Job Search group.

However, after initiating a search the user is presented with the exact same information within two locations. The information that was typed into the search text field remains, but the user is also presented with the exact same information within the Refine Search group.

Note that most of the information that is displayed within the upper region of the Refine Search group, within the sub-group of Current Search, is exactly what the user typed within the Search Group. The additional information being displayed is set and changeable via the other sub-group of the Refine Search group, indicated by the heading Refine Results.

At this stage, the user is faced with unnecessarily redundant information and multiple paths by which to accomplish the same operations on that information. This results in unnecessary complexity and confusion. If the user wants to remove a keyword from the search, the user is faced with an artificial choice…

Remove the keyword from the textfiield, or

Click ‘Undo’ in the Refine Search group.

Further compounding the negative impact on the Desirability of the product are the inconsistent options presented within each group. The Job Search group allows for adding and removing keywords and controlling whether or not some or all keywords should match to be displayed within the Search Results group. The Refine Search group allows for ONLY the removing of keywords, as well as the adjusting of additional meta information that is presented within the Refine Results sub-group.

The Save sub-group within the Job Search group is not only misaligned with the priorities of the page (its placement makes it appear to be the primary activity and most important action of the page), but misleading in its result. On one hand, the Save sub-group appears to be contained within the Job Search group and, thereby, only saving the information contained within the Search Again sub-group. On the other hand, the Save sub-group’s alignment with respect to the other groups and the language used within the group to describe the interaction, imply the Save operation is applicable to the entire contents of the page, encompassing all of the search information provided by both the Job Search group and the Refine Search group. However, neither of the prior expectations are entirely true. The Save sub-group saves all of the information provided by the Search Again sub-group along with only some of the information contributed via the Refine Search group, continuing an inconsistent experience resulting from inter- and intra-group interactions, as well as their respective alignments.

Cleaner

Most of the product’s page elements present a logic with respect to the grouping of options and information and some semblance of organization with respect to the alignment and approximate interaction between the groups’ various parts. The search view would greatly benefit from the…

Removal of all redundant information and actions, and

Consolidation and realignment of groups…

…such as …

Eliminating the Current Search sub-group — the user knows their search, they just typed it,

Relocating the Refine Search group as a sub-group of the Job Search group (or vice versa),

Adjusting the behavior and placement of the Save sub-group so as to better reflect its results, e.g. moving it to the Search Results group, of course with a minor adjustment in behavior.

And, until some of these (or similar) adjustments are made to improve the Grouping of interface elements within the Dice.com product, it will remain a prime example of a product with a Layout with Inconsistent Grouping.

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Digitaloop’s Clean Groups

Posted on February 3, 2009 by Jeremy Horn

Today, we will look at an example of an Internet product with Clean Grouping, representing a Layout value of +0.3.

Intro Grouping

Grouping by proximity, alignment, boxing, whitespace, or other visual methods is frequently done to convey similar (or dissimilar) concepts and/or functionality. The correct use of element Grouping and interaction between the various groups can enhance the understanding and pleasurable / Desirable effects of interface elements both near and far.

Grouping of Search

For example, picture your typical website search page. Perhaps there is a region, consisting of a Grouping of similar elements, that is used for filtering search results. This region will most likely be aligned so as to be visually related to the search results, that content upon which they will have direct influence. Yet another region may be established to save frequently performed searches. Depending on the type of web product, the importance of saving a search, and the sought after tone for the page, various Groupings and alignments between the region for saving and the region for initiating searches will exist. How the various elements relate to and interact with one another, and how they guide users’ behaviors around the page (and product) can quickly degenerate into a ‘painful’ experience, if not carefully considered. Depending on the target audience and the overall purpose for the web product, the various page element Groupings within the Layout may either constructively, or destructively, impact the overall Desirability of the web product.

Example: Clean Grouping (value = +0.3)

Digitaloop is a clear example of a web product with Clean Grouping.

A visitor to Digitaloop is presented with strata of simply organized groups.

The first group, isolated by margins and a horizontal line, is the name of the individual that the product is about..

In closest proximity to the ‘Nick Lee’ group is the ‘About’ group, also segmented from the other content of the page by horizontal lines and spacing. Through proximity it is easy to extrapolate a strongly relevant relationship between the ‘Nick Lee’ and ‘About’ groups, with the ‘About’ group providing an overview of the ‘Nick Lee’ group.

Together, the ‘Nick Lee’ and ‘About’ groups can further be seen to be contained within a super-group (‘Intro Group’), representing the introduction to the content of the web product, the group bounded by the top of the view and the middle visually contrasting ‘Latest Project’ group.

The next stratum presents the next group. This group, the ‘Latest Project’ group, provides a window into project names, summaries, links, and screenshots.

The bounds of this group are established through the contrasting of this region (lightness of the ‘Latest Project’ group, verses the darkness of the groups above and below). The ‘Latest Project’ group provides the next level of detail to its neighboring ‘Intro Group,’ and is controlled by the user interface elements within ‘Previous Projects.’

The ‘Previous Projects’ contains an aggregation of all projects. When one group controls or impacts the behavior of another group, that level of interaction represents a strong inter-group relationship. The proximity, alignment, and content descriptors of the groups ‘Latest Project’ and ‘Previous Projects’ reinforce a strong inter-group relationship. The grouped projects of the ‘Previous Projects’ group serve as an interface control mechanism (changing the content of the ‘Latest Project’ group to be that of whichever project was clicked within the ‘Previous Projects’ group) for the ‘Latest Project’ group, its immediate neighbor.

The second to last stratum, the ‘Nick Likes’ group, clusters all of the likes and interests of Nick Lee, from websites to photography.

Finally, the ‘Footer’ group creates the boundary for the bottom of the interface, strongly separated from all other content of the page through the use of its white background and spacing.

Grouping within this web product serves to convey relationships of one set of data (e.g. ‘Latest Project’) to another (e.g. ‘Previous Projects’), ensuring no unnecessary redundancy of information, keeping all similar information together, maintaining close proximity between groups that interact with one another, and thereby earning Digitaloop the recognition of being a very good, and easy to follow, example of Clean Grouping.

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)

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

Google: True Colors Shine Through

For Example: Google (Search Results)

Quick & Useful

Clean and Air Cooler

For Example: Air Cooler PLUS

Should Do

Quick & Useful

Higgledy Haven

For Example: HavenWorks

Sin of Overstimulation

Should Do

Quick & Useful

A Dentist of a Different Color

For Example: KAB Dental Supplies

Should Do

Quick & Useful

Sea Unfathomably

For Example: Midwest SCUBA

Should Do

Quick & Useful

On the Color of Quick-UX

Look, Ask

Rubric

Plethora

Quick & Useful

The State of Massachusetts SSAA Grouping

Example: Poor Grouping (value = +0)

Roll of the Dice.com

Example: Inconsistent Grouping (value = +0.15)

Redundancy & Interactivity

Cleaner

Digitaloop’s Clean Groups

Intro Grouping

Grouping of Search

Example: Clean Grouping (value = +0.3)

#9 Quick-UX Credibility from Likexo to Etsy

#8 World’s Best Programmer is… [w/ Respect]

#7 Converted by an Android. A short story of Gmail, in parts.

#6 jQuery Plugin: It’s CuteTime!

#5 The Future: Gmail, Social Media, and You

#4 Google: True Colors Shine Through

#3 Stardoll: Lost and Naked

#2 ThreeDots: The jQuery Ellipsis Plugin

#1 Quick-UX. Quick Heuristics for User eXperience.

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:

Example: Poor Grouping (value = +0)

Share this:

Like this:

Example: Inconsistent Grouping (value = +0.15)

Redundancy & Interactivity

Cleaner

Share this:

Like this:

Intro Grouping

Grouping of Search

Example: Clean Grouping (value = +0.3)

Share this:

Like this: