The Product Guy’s Weekend Reading (January 30, 2009)

Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

01_secondary-transaction

On Starting Up…

http://www.markpeterdavis.com/getventure/2009/01/the-4-types-of-exits-secondary.html
Exiting via a secondary transaction to bolster liquidity.

 
 

On Design & Product Experience…

http://www.37signals.com/svn/posts/1545-how-we-reduced-chargebacks-by-30-as-a-percentage-of-sales 
On the usability of billing.

02_usability-billing
03_mosembro

On Modular Innovation…

http://www.sitepoint.com/blogs/2009/01/26/how-mosembro-uses-microformats-to-improve-usability/
A look at the Modular Innovation and microformats of Mosembro.

 

Have a great weekend!

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!

The Product Guy’s Weekend Reading (January 23, 2009)

Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

01_entrepreneurs_roundtable

On Starting Up…

http://www.centernetworks.com/entrepreneur-first-round-capital
Entrepreneurs Roundtable with Howard Morgan from First Round Capital.

 
 

On Design & Product Experience…

http://www.stoweboyd.com/message/2009/01/typepads-big-improvements-to-user-experience.html
A example of TypePad’s misguided UX improvements.

02_typepad
03_advertising_MI

On Modular Innovation…

http://darmano.typepad.com/logic_emotion/2008/11/the-4-cs-of-community.html
Connectivity of Modular Innovation and its role in robust online advertising.

 

 

Have a great weekend!

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!

The Product Guy’s Weekend Reading (January 16, 2009)

reading_w_TPG_thumb5_thumb2_thumb2_t[2] Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

On Starting Up…
http://www.entrepreneur.com/startingabusiness/successstories/article199436.html
A look at the soul of the serial entrepreneur.

On Design & Product Experience…
http://www.sitepoint.com/blogs/2009/01/13/crimes-against-hypertext/
On the usability of hypertext.

On Modular Innovation…
http://www.readwriteweb.com/archives/diso_dashboard.php
Distributed Social Network Dashboard, Marc Canter’s Modular Innovation metaphor.

Have a great weekend!

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!

The Product Guy’s Weekend Reading (January 2, 2009)

reading_w_TPG_thumb5_thumb2_thumb2_t[2] Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

On Starting Up…
http://www.forbes.com/forbes/2009/0112/066.html?partner=daily_newsletter
Speculation of the final ‘exit’ of venture capital.

On Design & Product Experience…
http://www.usabilitypost.com/2008/12/29/slip-in-wordpress-dashboard-interface/
A interesting look at a simple and quick tweak to improving the Usability of a prominent element of the WordPress dashboard.

On Modular Innovation…
http://www.readwriteweb.com/archives/whats_next_after_web_20_redux.php
From open data to modular websites, the Modular Innovations to expect in the near future.

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!