Stardoll: Lost and Naked

Posted on January 29, 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 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…

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:

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:

Somewhat Less Del.icio.us

Posted on September 1, 2008 by Jeremy Horn

…because Delicious is synonymous with tagging online. With all of the improvements made within the latest upgrade to Delicious, the functionality and procedures surrounding tagging remain minimally and indirectly altered. Primarily, the changes to Delicious (its domain name included) were limited to desirability and usability (discussed last week), with its usefulness marginally augmented.

Lacking

There were no improvements nor innovations of any parts related to tagging. I look forward to seeing a more innovative stance from Delicious and seeing resolute efforts made to…

Encourage and facilitate more tagging,
Add structure and order to the tagging process, and
Improve the searching, exploration, and discovery process.

By no means are any of these (Delicious) next steps trivial, but rather they are steps (most specifically related to the Usefulness of the product) that will need to be continually presented and refined, by whichever company that desires to be a leader in describing the context and content of the web.

Encourage

Tagging is critical to Delicious. Central to success for a user and to the Delicious community- at- large, is the frequent and descriptive usage of tags. With less tagging, or less accurate tagging, users will have a more difficult time locating older content. With more tagging, users are able to better organize, filter, and find saved and new information. With more tagging, the community will be able to better understand the extent of the existing system-wide knowledge, and how it is evolving, as well as the potential it has for impacting themselves.

Today, Delicious encourages tagging by way of simple user interface presentations, inline editing…

…and the display of Popular tags and Recommended tags within the full-screen edit of new content…

In addition, the new Sidebars, by allowing for easier, to both modify and view, access of tags, also facilitate their bundling and usage.

In some sense Delicious has made tagging a little bit easier to understand, read, and do. Substantial in encouraging any sort of online activity is the simplification of that activity. In this sense, there are many avenues to explore. Some of them being…

Encourage alternate or corrected tags (spelling, more common or specific descriptors)

Add

The most obvious injection of structure is introduced to the tagging process within the latest update via the orderless tags of the Tag Bar…

From more structure comes a reduction in the information / content noise. Presenting just a little bit of structure, or means of organization, has a significant impact on the system utility – from the introduction of a minimally common way of thinking and organizing to helping people focus their tagging descriptions and find new information within different, and possibly foreign, domains.

Simple personal structure, like folders and private tags, would have a greater impact upon this goal — and for those people, and there are more than a handful that use multiple Delicious accounts to organize their bookmarks, they would be able to use a single account to accomplish everything (and probably more, especially without the burden of maintaining multiple accounts).

On the non-personal, i.e. public, additions of increased structure, merely a level or two of hierarchical guidance (e.g. tag categories) could exist to help the user quickly zero in on an accurate description of the new content directly resulting in reducing the “strain” on the user to figure out the right tags to assign, as well as letting them come back later and add more details as they occur to the user, all while still being able to filter and zero back in on the item in the future.

Improve

The latest upgrade added the ability for context-based searching and Tag Bar usability enhancements in an effort to improve the searching, exploration, and knowledge discovery processes.

In the end, this upgrade was quite incremental in nature in so far as the purpose of exploration and discovery are concerned. Here too, knowledge discovery and searching can greatly benefit from an increase in simplification.

Instead of entering, or guessing, one tag at a time, to browse or find content, semi-hierarchical tag clusters, representing concepts and groups of varying scope, could be automatically generated. Individuals would be able to gain broader understanding of the current state of the Delicious environment, the coalescing of tags and ideas, and use them as an alternate means of drilling down.

Another method of simplifying the discovery and search actions can be done through the offering of suggestions for alternate and additional words related to the tags being entered for the search (just like those suggestions that can be made when submitting new content).

Improving the exploration and discovery processes will directly lead to the increased utility and usefulness of Delicious.

…and…

Since Delicious had been acquired by Yahoo (Dec. 2005) change has come very slowly to the product and created a plethora of opportunities within the tagging (and semantic tagging) space that have yet to be fully taken advantage of — but, eventually, either Delicious will choose to lead or other companies, like flickr or twine.

Delicious accomplished a good deal in the way of improving the tagging experience. Now they need to continue, and evolve the functionality of Delicious, (the tagging) and improve the usefulness — lest the mantel for tagging leadership be taken up by other innovators, like flickr, twine, or another up-and-comer.

Share & Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Somewhat More Del.icio.us

Posted on August 25, 2008 by Jeremy Horn

With the delivery of the Delicious version 2.0, 9 months after everyone received the initial sneak peak, also came the formal changing of the product name from del.icio.us to delicious.com (no more funny period punctuation) — making the domain name easier to remember, type, and use.

And this is the theme that enjoyably permeates all aspects of the Delicious upgrade – improving the usability and desirability of everything Delicious. Delicious has made wonderful use of color, contrast, flow, and balance. All this results in simplifying all aspects of interaction, providing more intuitive control, as well as bringing to light features that many, including myself, never knew existed.

As part of bringing to light these “secret” or lesser used features, Delicious has made a serious effort in raising the level of social interaction and sense of community. Wherever you look and interact, there is always a sense of connectedness to other people, from the new look of the bookmarks…

…to more intuitive access to other people’s tags and notes on your bookmarks…

…and the priority level navigation to people…

… and their networks…

Throughout the new UX, from the tag bar to context-based searching to editing bookmarks, everything is zippier (also with less page loading and more ajax) and the interactions much more enjoyable.

Known for tagging

The improvements don’t introduce much in the way of new features or enhancements to the concepts of tagging — but, as I continue to find out, these improvements have brought to light many features that always existed and makes others easier to notice and use. That is why, as I denote in the title, the long awaited upgrade is tagged with ‘somewhat.’ Delicious has been known for its leadership in the tagging of the Internet. Will this leadership continue? Has the mantel already been wrested by fresher upstarts?

Next week, I will continue with part 2 (of 2) of our discussion of Delicious, this latest product update, and look further at how Delicious 2.0 has taken tagging to the next level.

Subscribe now (click here) to make sure you don’t miss any part of this series exploring Delicious 2.0 as well as other upcoming, insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Do I want to use it? Evaluating Desirability through Quick-UX.

Posted on April 14, 2008 by Jeremy Horn

Desirability is a very real component of a product’s User eXperience. The feelings that a product invokes in an individual are often difficult for that individual to elaborate upon, beyond such feelings like those of a sense of pleasantness, happiness, awkwardness, or one of frustration.

While quantifying Desirability can, in many cases, prove to be quite challenging, those emotions that relate to the Desirability of a product can be quantified via Quick-UX as one of its three core categories (the other two core categories being Usability and Usefulness).

The minimal representative subset of variables for Desirability that adhere to the primary goals of Quick-UX (quick assessment for summary, direction guidance, and quantitative comparison) are…

Aesthetics (and minimal design),
Layout (including the visual hierarchy, flow and grouping of elements of the product)
Color Scheme (and Contrast), and
Typography.

Aesthetics

Information overload negatively impacts, hence the word ‘overload,’ the actual Desirability of a product. Any more, or supplemental, information and functionality than is needed contributes to the erosion of a pleasing and enjoyable experience.

Content, mouse-interactions, and transitional animations should be kept short and to the point. Do not explain a feature with a paragraph of information where a brief 3 word phrase would do, nor use a 3 word phrase when a clearly identifiable button can, itself, clearly convey the underlying message or functionality.

I have found that the product’s Aesthetics contribute most significantly to its overall Desirability. For this reason, unlike the other variables that make up Quick-UX, the Aesthetics variable can be assigned a value from 0 through 2 (as opposed to the typical maximum value of 1).

The value assigned to the Aesthetics variable in determining Desirability within Quick-UX is…

2 if the product presents a clean, sharp, pleasing and enjoyable product environment where interaction is a pleasure. In addition, the product consistently makes good use of mouse-overs and animated transitions.
1 if the product presents generally “OK” Aesthetics. The product may have some mouse-over states and other beneficial transitions, but these states and transitions are found to be incomplete and would benefit from a more comprehensive and consistent implementation.
0 if the product suffers from information and graphical (transitions, interactions, etc.) overload. In this case, the content and graphical aspects of the site continually get in the way of getting the desired task completed quickly, efficiently, and enjoyably.

Layout

The Layout of a page is about more than just Usability. The Layout of a page, the visual hierarchy, its flow, as well as grouping and alignment of its elements, is the environment within which the user works and interacts with the product — it sets the tone and, in turn, shapes the product’s Desirability.

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, don’t add anything.

…regarding the interface’s visual flow…

The visual flow can be described as the interface/page forces that guide the users’ eyes about the page. If a page has a negative visual flow, then it contributes to guiding the eyes away from the critical sections that need to be looked at and used to take primary actions and make decisions.

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

Furthermore, if the interfaces of the product require / recommend a specific sequence of steps be taken to accomplish a task, and the visual flow has a negative impact, guiding the user in the non-desired order, then subtract 0.15 from the Layout variable.

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

A good product has clearly defined ‘regions’ within its interface. For example, a search engine may have one region for entering the search parameters, and another region for viewing the search results.

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.

Color Scheme / Contrast

The Color Scheme of a product sets the mood and appeal. Color schemes can be simple, with only one or two colors, to very complex, with many complementary and varying levels of contrasting colors.

For example, red’s, yellow’s and orange’s are warm colors and, as a Color Scheme, could, very appropriately, be paired with products that wish to intuitively convey concepts or themes of warming or heating, like FeedBurner (as a theme derived from the name) or portable space heaters (products that keep you warm in the cold of winter).

The Color Scheme variable is assigned the value of…

1 if approximately one to three primary hues are present within the product and those selected hues accurately reflect the message and theme of the product (some examples: warm colors = energy, cool colors = respectable, etc.).
0.5 if the color palette is cluttered, there are some extraneous color selections or a mismatch of color temperature, Contrast, or saturation with respect to the messaging and tone. For example, an air conditioning website would probably want to stay away from the warm colors (red, yellow, orange), even if aesthetically pleasing.
0 if the Contrast and color selections that comprise the product’s Color Scheme make some or all of the product’s information and/or functionality difficult or impossible to read or understand.

Typography

Some people do not fully appreciate the degree of impact that Typography can have on a product’s overall User eXperience, and especially its Desirability. Different fonts, different font sizes, and how they are arranged and laid out to interact with one another and other product elements, do more than present readable, or unreadable, content, but frame many of the emotional aspects of the product.

Typography decisions control the ranges of voice from loud and shouting to gentle and whispering, from serious to comical. When products are presented with too many fonts, they increase the likelihood of conveying the information with too many, and inconsistent, voices; as opposed to a pleasing, guiding conversation about the product.

If the Typography from page to page, interface to interface, functionality type to functionality type, is clean, readable, and consistent in usage then the Typography variable is assigned a value of 1.
Otherwise, if minor to major inconsistencies are apparent, or an overloading of Typography ‘voices’ are present, but all remain readable, the Typography variable becomes 0.5.
However, if the inconsistencies are tremendous, and make understanding the content difficult or bewildering, or even if only some of the content is unreadable, the Typography variable equals 0.

So… Do I want to use it?

While this question within the Quick-UX framework provides for the rapid assessment of Desirability, it represents only one of the three ‘questions’ that, when combined with…

Can I use it? (Usability)

Should I use it? (Usefulness)

…provide for an easy, consistent, and expeditious means by which to determine a product’s overall User eXperience.

Enjoy!

Jeremy Horn
The Product Guy

The Product Guy

Discussion, advice, and reviews regarding online products, the people behind them and the trends they represent, from Modular Innovation and Product Management to User Experience and Quick-UX.

Tag Archives: desirability

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

Somewhat More Del.icio.us

Do I want to use it? Evaluating Desirability through Quick-UX.

Aesthetics

Layout

…regarding the product’s visual hierarchy…

…regarding the interface’s visual flow…

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

Color Scheme / Contrast

Typography

So… Do I want to use it?

Follow “The Product Guy”

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:

Lacking

Encourage

Add

Improve

…and…

Share this:

Like this:

Share this:

Like this:

Aesthetics

Layout

…regarding the product’s visual hierarchy…

…regarding the interface’s visual flow…

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

Color Scheme / Contrast

Typography

So… Do I want to use it?

Share this:

Like this:

Follow “The Product Guy”