The State of Massachusetts SSAA Grouping

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

00_mssaa_homepage

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.

01_mssaa_groups

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

02_mssaa_chaos

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.

03_mssaa_faux-groups

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.

04_mssaa_stuff

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!
About these ads

Roll of the Dice.com

desirabilityQuick-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 Inconsistent Grouping, representing a Layout value of +0.15.

Example: Inconsistent Grouping (value = +0.15)

00_dice_homepage

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

01_dice_groups

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.

02_dice_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.

03_dice_refine-search

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.

04_dice_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.

05_dice_save-group

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)

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

Digitaloop’s Clean Groups

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

00_digitalloop_homepage

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

07_digitalloop_groups-label

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

01_digitalloop_nick-lee

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

02_digitalloop_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.

03_digitalloop_latest-proje

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

04_digitalloop_previous-pro

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.

05_digitalloop_nick-likes

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.

06_digitalloop_footer

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)

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

Stardoll: Lost and Naked

desirabilityQuick-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 Sequential Flow, representing a Layout value of -0.15.

Order & Sequence

Sometimes order matters — completing one step/stage, or a series of steps/stages, before doing something else; that something else usually being the primary function of the web product. When there is a series of steps, a sequence of actions, the Visual Flow, both within and between product views / pages, should be a positive influence (or, at worst, a neutral one). For example, a new user setting up an account for the first time, or the process of preparing and publishing a new blog post with all the bells and whistles.

Some Examples

Online products use many visual cues to guide users around and between views in simple and calculated fashion through the use of such interface elements as numbering, arrows, and animated interface transitions.

To guide their new users from stage to stage within their new user process, Spurl (an online bookmarking service) uses numbering to indicate both how much further the user must travel, and where to go next.

90_spurl

FeedPerfect takes the extremely complex process of managing a store’s product data feed and presents a very intuitive and guided process through the use of wizards, colors, contrast, and arrows throughout the many stages of setup and maintenance.

91_feedperfect

Both numbering and arrows are used by Plurk (a twitter-like web product) to guide their new user through account creation to setup through acclimation.

92_plurk

Example: Poor Sequential Flow (value = -0.15)

00_stardoll_homepage

For this example we will look at the new user setup flow for the web product, Stardoll, a process that must be completed to effectively take advantage of the core offerings of Stardoll.

From the homepage, it does not take too long to discover how to begin the process of creating a new account.

01_stardoll_homepage-create

The initial step of setting up and configuring this new account is straightforward.

02_stardoll_newuser-1

03_stardoll_newuser-2

After the first setup step, the Visual Flow begins to work against the user, and instead of guiding the user from one stage to the next until they achieve 100% set up, all aspects of the Visual Flow, both inter- and intra-view, appear to work towards distracting, confusing, and derailing the direct path to setup and completion.

At this point the user sees their initial Stardoll with many compelling options all around; from visiting the Suite…

04_stardoll_suite

…to going to the Album.

05_stardoll_album

Many users are likely to be compelled down these paths before even dressing their character.

06_stardoll_medoll-initial

While it is clear that the character is not 100% set up, it is simultaneously, equally unclear as to what is next required of the user, including whether or not either working on the album or suite will contribute to an increase in the percent completion of the initial character setup process.

The Visual Flow draws the user’s attention to the ‘My Page’ menu choices and ‘My Account’ options along the left side of the page, but there are no cues guiding the Visual Flow of the product and, in turn, the user to the completion of the new user character setup.

07_stardoll_medoll-mypage

08_stardoll_medoll-myaccoun

Assuming the aforementioned distractions don’t catch most users, and the average user continues with the process of customizing the character’s body type, there are a multitude of additional choices and visual distractions present that can easily divert the user off the target path towards completion. One such option is ‘Star Sparkles,’ which appears within the interface as just one of the many ways to customize the body.

09_stardoll_medoll-sparkles

Upon selecting this option, the user is whisked off to a very different section, with neither an indication as to what to do from here nor where to go from here. It remains clear that the user hasn’t completed the setup process, from the ever present status bar, but no aspects of the Visual Flow coaxing the user in one direction versus another — especially important to a new user of a product. Here, like other pages, the same elements catch the eye, none of which assist in determining the next step or ideal sequence of events.

10_stardoll_starplaza

The fortunate user completes the setup of their body type, moving them 20% closer to completing the process, by clicking on the Save option. Completely counter to the minimal Visual Flow present within the product views, the user is then brought to the Suite view, displayed to the left of the MeDoll Editor within the user interface, opposite of this page’s, as well as the typical English web product’s, left to right Visual Flow.

11_stardoll_suite-20

Right away, the My Suite view directs the user to click on the Shop button, zipping the user to the Star Plaza shopping mall.

12_stardoll_shop

After purchasing a few items at the mall the user is primarily guided by the Visual Flow to do more shopping. The user, not wishing to be trapped in this perpetual state, is very likely to choose a secondary path, such as returning to the suite…

13_stardoll_done-shopping

14_stardoll_postshop

At this point, as disorientation continues to grow as to what must be done next, a user may think that clicking on the prominently positioned ‘Start’ option would set them on the right path — but, that would be the last thing the new user would need to resume the process of continuing to get set up, nor will clicking this option place the user on the correct set up path.

15_stardoll_start-20

The desired sequence for completing the setup of the new account is clearly …

From user name and bio

To MeDoll

To Suite

To Star Plaza

To Suite (or styling studio or more shopping)

To …

16_stardoll_nakedWithout belaboring every detail of the convoluted Visual Flow and process in the completion of the setup of an individual’s character, the user is left feeling confused and frustrated from a site naked, devoid of key visual elements, simple visual cues (arrows, numbering, etc.), that could go very far in expediting and making this process, and product, much more Desirable.

Clearly, there is a setup process with a desired sequence of steps that Stardoll wants you to go through upon creating a new account, but finding and following that path is tricky and littered with many diversions, earning Stardoll the recognition of being a good example of a web product with Poor Sequential Flow.

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

Clogged c-ville

desirabilityQuick-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 Negative Visual Flow, representing a Layout value of +0.0.

Example: Negative Visual Flow (value = +0.0)

00_cville_homepage

c-ville is a web product with a Negative Visual Flow — despite having recently undergone a design upgrade. The arrangement of the page elements, color interactions, and heavy use of animations, negatively impact the ease with which target content can be identified and extracted by the user from the product; visually guiding the user away from content and useful information, thereby negatively impacting the overall Desirability and, in turn, User Experience of c-ville.

Something quite difficult to represent in the screenshots I am including is the overabundance of animated content on the page, from the primary content region to a majority of the advertising. Animations are very powerful tools for guiding / altering the path of the Visual Flow.

15_cville_homepage_animatio 16_cville_news_animations

All of the web pages within the product exhibit generally the same Negative Visual Flow, with some minor distinctions worth mentioning.

Homepage

00_cville_homepage

01_cville_homepage_flow

English language websites, on average, have a left-to-right Visual Flow. Here, too, c-ville‘s Visual Flow initially exhibits similar characteristics, starting at the hot-spot, red graphic, in the top left of the page.

02_cville_homepage_top-left

The color and placement of the ‘Old Trail Village’ ad presents a very strong pull on the Visual Flow from the starting point, resulting in the user’s eyes moving to the right, virtually skipping over the name and logo of the web product.

03_cville_homepage_logo-and

One of the newer additions to the homepage, and next encountered within the Visual Flow, is the animated, graphical, c-ville content region; positively drawing the user’s gaze to itself. This element presents a good deal of the highlights and purposes of this web product.

04_cville_homepage_large-co

While the content region near the center of the page is a positive contribution to a Negative Visual Flow, the Visual Flow soon finds itself diverted to the side of the page. Due to the usage of strong contrast and colors, as well as the excessive implementation of animations, the right-hand margin of the page forms the final leg.

05_cville_homepage_right-ad

As the user’s gaze is corralled into that rightmost column and guided down that margin, heavy in advertising, it is important to note that the user’s eyes are drawn away from the rest of the web product’s non-advertising, core content.

Blogs & News

Without the large pull of the central content element displayed on the homepage, many of the other views within this product present an even more stark Visual Flow going from the top-left, red graphic, to the banner ad, and down the plethora of animated ads running along the right-hand side of the page.

06_cville_news

07_cville_news_flow

 

08_cville_blogs

09_cville_blogs_flow

The Blogs page experiences a slight pull of the Visual Flow towards the region above the primary non-advertising content region, after the traversing the ‘nycshuttle’ banner advertisement, before continuing along the path formed by the rightmost 2 columns of advertising.

10_cville_blogs_free-ad-now

In an almost visual staccato, the visitor’s eyes are jerked from the lower-right corner of the screen to a secondary visual path on the left side of the screen, a bit below the red graphic and logo (indicated by the yellow arrow path).

11_cville_news_yellow_pt1

The Visual Flow picks up here due to the strongly contrasting and animated content within the region.

12_cville_blogs_yellow_path

Upon continuing the Visual Flow down this column, the path moves to the title of, and then down, the main content region of the page, the final stage in a Visual Flow that encourages looking most anywhere but here, earning c-ville.com the identification as a product with a Negative Visual Flow.

13_cville_news_primary-cont 14_cville_blogs_primary-con

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

Tunnel’s Vision

desirabilityQuick-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 Non-negative Visual Flow, representing a Layout value of +0.3.

Intro Flow

Visual Flow describes the path that the users’ eyes take within a product. Here, like other variables within the evaluation of Layout, the resultant assessment of a product’s Visual Flow is guided by such things as color and contrast, spacing and grouping, numbering and directional indicators.

The better the Visual Flow of a product the more intuitive and natural the experience feels and the more consistently (decreased chance of variation, variable decision branching) the path followed will be repeated on subsequent uses and visits.

Simply Non-negative

Understanding and acknowledging that Visual Flow fills a full spectrum of quality from ‘horrible’ to ‘awesome’ is important. Quick-UX calls for simplicity and rapidity of User Experience calculation.

For the quick assessment of Visual Flow within the Quick-UX framework, the most important aspect of the evaluation of this variable is confirming that the product at least presents a Non-negative Visual Flow, non-harmful to the User Experience and Desirability.

Example: Non-negative Visual Flow (value = +0.3)

00_tunnel7_homepage

Tunnel 7 still represents a good example of a web product with a Non-negative Visual Flow.

01_tunnel7_flow

This web product demonstrates a very typical Visual Flow within a stratified structure. The starting point, where the user’s eyes begin the journey around the interface, is at the logo, in the upper-left — a very common starting point.

02_tunnel7_logo

From here the flow moves to the right, carried by the strong emphasis (almost like a very bold underline of the logo/ brand) by the menu bar to the first stand-out content of the page, explaining exactly what is Tunnel 7. Notice how the flow is captured both visually and in the logical progression of the product marketing, from who to what.

03_tunnel7_standards-based-

The Visual Flow then can be seen to move to the next layer of the design, guided by emphasis, color contrast, and correlated alignment (resulting in a visually heavier right side of page) to its previous neighbor within the Visual Flow – ‘Recent Podcast Episodes’.

04_tunnel7_podcast

From this point the flow passes through the section for ‘Recent Blog Posts,’ horizontally aligned with the previous element, and receiving similar emphasis…

05_tunnel7_blog-posts

…before finally transitioning to the next layer, starting at ‘Follow Me’.

06_tunnel7_follow-me

Tunnel 7 presents a very common, modern structure, with simple layering guiding the Non-negative Visual Flow of the page. In addition to the more basic elements of emphasis (bold text, dark colors, contrast) that shape the Visual Flow of the product, the messaging and marketing within, also guides and reinforces the perceived Visual Flow, from high-level information at the top, beginning with the product’s name / logo, and advancing to greater and greater detail as the user is guided from layer to subsequent lower layer, moving from an overview of Tunnel 7 to specifics on activities and methods of contact.

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

BCC Report Card: Could Do Better

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

00_bellevueCC_homepage

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

  1. All of the non-purple components of the website stand out in contrast to the very purple nature of the page, and
  2. 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.

01_bellevueCC_give-to-bcc

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

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

02_bellevueCC_top-left

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

03_bellevueCC_center

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.

04_bellevueCC_center-variat

——————–

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

Confusing Domain of GoDaddy

desirabilityQuick-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 Visual Hierarchy, representing a Layout value of +0.0.

Example: Poor Visual Hierarchy (value = +0.0)

GoDaddy is a website whose primary purpose is to enable people to purchase and setup domain names. Despite a major redesign that this web product has recently undergone, it remains an excellent example of a product Layout with Poor Visual Hierarchy. This assessment is easily accomplished through the evaluation of the homepage, whose Layout and design characteristics are echoed throughout the website.

00_godaddy_homepage

To start off, identifying the most important element of this page cannot be accomplished through any visual cues of Layout. As a matter of fact, the Layout and structure of the page presents to a great deal of redundant information…

01_godaddy_redundant_domain

…and…

02_godaddy_redundant_accoun

And numerous hot-points on the page, all competing for the initial attention of the visitor’s eyeballs upon arrival, most obviously indicated by the use of the strong oranges and reds on the page.

03_godaddy_hotpoints

Is the most important information on this page,

My Products,

04_godaddy_myproducts

or Logging in,

05_godaddy_logging_in

or Email offers,

06_godaddy_email_offers

or Buying $1.99 domains,

07_godaddy_199_domains

or Starting a domain name search,

08_godaddy_domain_search

09_godaddy_domain_search

or Buying web hosting,

10_godaddy_web_hosting

or Expressing myself through .me domains,

11_godaddy_me_domains

or Getting a .tv domain

12_godaddy_tv_domains

Furthermore, GoDaddy logo and tagline, ‘The Web is Your Domain,’ are dwarfed with respect to the other competing priorities of this page.

13_godaddy_logo

Even if one can conclude the various competing elements on this page are all equally important and can be concluded as the top of the page’s Visual Hierarchy, their redundancy of purpose and message, as well as no clear relationships between most neighboring elements of the page, and no clear secondary elements (unless one attempts to claim everything else would be secondary) further erodes any potential inherent Visual Hierarchy.

Adding to the destruction of the page’s Visual Hierarchy is the clutter of buttons, general content, and marketing on the page. The use of white space and relational placement appear to have no purpose in indicating the importance, or relative importance, of the plethora of options on the page, beyond the lower tier importance attributed to those elements placed in the footer.

The primary usage of whitespace is limited to offsetting the messaging / actions for…

Product Advisor

Express Yourself

Web Hosting

.TV Domains

14_godaddy_more_marketing_s

…all of these options offering a small subset of basic and secondary (or tertiary) services, especially in contrast to many of the other more basic options that can be found on this page for the searching and registering of domain names, in general.

GoDaddy’s homepage, as well as the rest of the web product, provide such a diffused Layout and structured experience as to make identifying either the important or even merely sought after actions an unnecessarily time consuming effort, all contributing to the distinction of being a solid, educational example of a web product with Poor Visual Hierarchy.

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

JohnMees from High to Low

desirabilityQuick-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 Clear Visual Hierarchy, representing a Layout value of +0.4.

Example: Clear Visual Hierarchy (value = +0.4)

JohnMees.com provides a very good, simple example of a Clear Visual Hierarchy.

00_john_mees_homepage

The most important section within the page hierarchy is the middle section of the page clearly indicated through its prominent centralized placement, large font headers, elegantly large and simple iconography, and high-contrast text on non-complex backgrounds. This section is valuable in its efforts of branding and immediately conveying the purpose of the site and the content to expect within.

01_john_mees_key_messaging

The obvious next level in the page hierarchy is the title region of the page, the individual’s name, John Mees. While having large, bold text, it is visually stressed to a lesser degree through the placement of a lower contrasting, patterned background behind the producer’s name.

02_john_mees_title

Finally, in the Visual Hierarchy of the page is the footer region, with decreased text and hierarchically organized from right, Contact John, to left, John’s details, from highest contrast section header to lowest contrasting.

03_john_mees_footer

The Clear Visual Hierarchy of JohnMees.com is immediately obvious to everyone who visits, organized into basic layers, presenting a very pleasing and Desirable experience, both in graphic design, and in the coincident advancement of the marketing from most important to least important.

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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

On the Layout of Quick-UX

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


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 of and between 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, will be (or is).


Through a well planned Layout, beyond basic Usability, a web product can portray itself as a welcoming and pleasing — Desirable — place to be.


Picture your typical website search page. Perhaps there is a region that is used for filtering search results. This region will most likely be aligned to be visually related to the search results, the content upon which they will directly 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 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, type of purpose for the web product overall, the Layout may either constructively, or destructively, impact the overall Desirability of the web product.


The construction of a web page immediately conveys concepts of hierarchy, flow, and grouping. These concepts combine, revealing the relationships and intents of the web product, either positively or negatively contributing to the Layout, creating an inviting or off-putting environment, one of four components that constitute a product’s Desirability (the others being: Aesthetics, Color Scheme, and Typography).


The Layout variable’s rubric is:

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, add zero.


…regarding the interface’s visual flow…

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

then add 0.3,

otherwise do not add anything.

If the visual flow has a negative impact on required / recommended sequential steps,

then subtract 0.15.


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

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.


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: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!