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!
Advertisements
This entry was posted in user experience and tagged , , , , , , , , , by Jeremy Horn. Bookmark the permalink.

About Jeremy Horn

Jeremy Horn is an award-winning, product management veteran with 2 decades of experience leading and managing product teams. Jeremy has held various executive and advisory roles, from founder of several start-ups to driving diverse organizations in online services, consumer products, and wearables. As founder of The Product Group, he has created the largest product management meetup in the world and hosts the annual awarding of The Best Product Person. Accelerating the next evolution of product management, Jeremy acted as creator and instructor of the 10-week product management course at General Assembly and The New School, and mentoring at Women 2.0 and Lean Startup Machine (where is he also a judge). To see where Jeremy is now check him out at (1) http://linkedin.com/in/TheProductGuy and (2) http://TheProductGuy.com