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…

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…

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…

…such as …

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…

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…

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Stardoll: Lost and Naked

Posted on January 29, 2009 by Jeremy Horn

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.

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.

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.

Example: Poor Sequential Flow (value = -0.15)

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.

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

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…

…to going to the Album.

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

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.

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.

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.

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.

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

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…

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.

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

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

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Clogged c-ville

Posted on January 21, 2009 by Jeremy Horn

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)

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.

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

Homepage

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.

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.

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.

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.

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.

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.

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

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

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.

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

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Tunnel’s Vision

Posted on January 12, 2009 by Jeremy Horn

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)

Tunnel 7 still represents a good example of a web product with a Non-negative Visual 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.

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.

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

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

…before finally transitioning to the next layer, starting at ‘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…

Enjoy!

Jeremy Horn
The Product Guy

BCC Report Card: Could Do Better

Posted on January 8, 2009 by Jeremy Horn

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

Example: Fair Visual Hierarchy (value = +0.2)

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

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

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

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

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

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

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

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

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

——————–

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

Menus

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

Color & Consistency

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

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

——————–

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

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

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Confusing Domain of GoDaddy

Posted on December 30, 2008 by Jeremy Horn

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.

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…

…and…

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.

Is the most important information on this page,

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

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…

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

Enjoy!

Jeremy Horn
The Product Guy

JohnMees from High to Low

Posted on December 22, 2008 by Jeremy Horn

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.

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.

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.

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.

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…

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

On the Layout of Quick-UX

Posted on December 8, 2008 by Jeremy Horn

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.

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)

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: visual hierarchy

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)

Stardoll: Lost and Naked

Order & Sequence

Some Examples

Example: Poor Sequential Flow (value = -0.15)

Clogged c-ville

Example: Negative Visual Flow (value = +0.0)

Homepage

Blogs & News

Tunnel’s Vision

Intro Flow

Simply Non-negative

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

BCC Report Card: Could Do Better

Example: Fair Visual Hierarchy (value = +0.2)

Menus

Color & Consistency

Confusing Domain of GoDaddy

Example: Poor Visual Hierarchy (value = +0.0)

JohnMees from High to Low

Example: Clear Visual Hierarchy (value = +0.4)

On the Layout of Quick-UX

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:

Order & Sequence

Some Examples

Example: Poor Sequential Flow (value = -0.15)

Share this:

Like this:

Example: Negative Visual Flow (value = +0.0)

Homepage

Blogs & News

Share this:

Like this:

Intro Flow

Simply Non-negative

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

Share this:

Like this:

Example: Fair Visual Hierarchy (value = +0.2)

Menus

Color & Consistency

Share this:

Like this:

Example: Poor Visual Hierarchy (value = +0.0)

Share this:

Like this:

Example: Clear Visual Hierarchy (value = +0.4)

Share this:

Like this:

Share this:

Like this: