Less than Grand GoodReads

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at 2 examples of products with Poor Accessibility, with a Quick-UX Accessibility value below 0.2.

Poor Accessibility

Accessibility standards exist to provide people with disabilities a means of using products, from reading and interacting with those on the web, as well as many very positive benefits beyond this group of individuals. For these reasons, for this article, I made the ironic selection of the following 2 products, whose missions are to get and keep people reading and interacting online.

Example: GoodReads

GoodReads is a very cool product that brings all types of book fans together, sharing recommendations, tracking read and wanted books, and doing other fun book club-y things.

00_goodreads_homepage

GoodReads received the following results from FAE…

01_goodreads_results

…resulting in an Accessibility variable value of 0.176 and Poor Accessibility.

Should Do

Beyond making sure that all images have ALT text specified, this product would do well to address its use and identification of “decorative images.”

Text Equivalents

  • Images with empty ALT text are assumed to either be informational, whereby the ALT attribute should have been populated with contextually relevant information, or was left empty – a decorative image. Such decorative images should typically be removed and implemented via CSS.
  • In this product, the NULL specification for the ALT text is generally accepted – informing assistive tools to skip the images with alt=””.

02_goodreads_null

However, the implementation of tracking pixels throughout the product is inconsistent. Another example of a tracking pixel within this product provides attention getting ALT text on an image 1×1 pixel, that is also not intended for consumer consumption.

03_goodreads_quantcast

Example: Barnes and Noble

Barnes and Noble, famous brick-and-mortar bookstore chain, provides a web product that goes beyond just selling of books.

00_bn_homepage

The tattered results delivered by FAE for this product were…

01_bn_results

…resulting in an Accessibility variable value of 0.072 and Poor Accessibility.

Should Do

Throughout this series many examples of areas for improvement have been stated and explored for other products. And, for this product, these ‘should do’ items, for the most part, apply here, too. Most significant amongst these areas for improvement for Barnes and Noble are…

Text Equivalents

  • Always provide Alternate text for images.
  • Remove images with no Alternate text specified.
  • Make sure Area elements also have Alternate text specified.

HTML Standards

  • Include a valid DOCTYPE declaration at the top of each page to facilitate rendering and validation.
  • Make the pages’ character encoding clear. For example, by including…

02_bn_encoding

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components 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

Twine Tied Up in Load Time

image_thumb25A company can have the best product around, but if the pages are too sluggish, if the product suffers recurring outages, if the user-product interaction is varied and inconsistent, the product’s overall Usability can, and does, suffer.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). Among the various components that define a product’s Usability, as well as Quick-UX‘s, are Accessibility, Consistency, Recognition, Navigation, and Page Load Time.

In answering the question of Usability, "Can I use it?" the sub-category of Page Load plays an instrumental role. Page Load, often obfuscated or connected with other perceived causes of a product’s dissatisfaction, ultimately, either positively or negatively, presents an unquestionable influence on a product’s overall Usability.

Example: Poor Load Time (value = 0.0)

Based on a recent study commissioned by Akamai…

2 seconds = Page Load Time when customers become impatient

Twine is a web product that goes beyond the basic user contributed content model of more familiar sites, like Digg and Mixx, and performs semantic analysis on your contributed content and interests to help identify both related content, as well as additional information of potential interest to each active user.

00_twine-homepage

I have been a user of Twine since being accepted into the early Beta. Beginning with my initial interaction with the product, and despite the evolutions of the user interface, it is apparent that the product’s Usability has been degrading over time — most notably in the department of Page Load Time, earning Twine a Page Load Time variable value of 0.

From the inability to login due to page timeouts…

01_bad-login

… to the incredible unresponsive (or barely responsive) interfaces…

02_twine-slow-loading

10+ seconds later

03_twine-slow-loading-10sec

… Page Load Time is a present and seemingly growing issue of Usability with this product.

One set of interactions, experienced in December 2009, best exemplify the negative impact on Usability of this product experienced due to Poor Load Time. In addition to sluggish interface interactions, for example when expanding the ‘related people,’ that would leave all but the most patient of patient people to conclude the product was merely unusable/broken, was the common and (hopefully) trivial task of accepting a friend request.

04_twine-friends

From the time starting with clicking the link within the email to accept or check out the friend request, to finally accepting, many minutes of delays and frustration transpired. For every click on the inbox, every time, every action involved in the process, 3-5 seconds was spent waiting, locked in a frozen state, unable to use the product in another way, locked into the current glacial path, of click, wait, click, wait, click, wait…etc.

dali-clock-500x500

While the Twine product does have its good moments and days, performing lickety split, the Page Load Time experience is one of (increasingly) frequent and long delays as well as the inability to access and load content.

Should Do

In addition to a basic focus on reliability and duration of Page Load Time, there are other improvements that a product, such as Twine, would benefit…

  • For the times where delay is unavoidable…
    • provide better user feedback to better align the user expectations of time remaining — e.g. progress bars instead of endlessly spinning wheels, clear messaging of server timeouts and delays instead of generic ‘unable to login’ messages
    • allow for the asynchronous performing of actions within the product, so that while one action processes, other actions, by the user, can be taken and content explored

Next…

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

Poor Load Time (value 0) [Twitter, Twine]
Delayed Load Time (value 0.5) [Conversation Pieces]
Prompt Load Time (value 1) [Facebook]

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usability and Page Load Time 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, Discuss & Tweet!

Jeremy Horn
The Product Guy

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

Twitter’s Crawl

image_thumb2A company can have the best product around, but if the pages are too sluggish, if the product suffers recurring outages, if the user-product interaction is varied and inconsistent, the product’s overall Usability can, and does, suffer.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). Among the various components that define a product’s Usability, as well as Quick-UX‘s, are Accessibility, Consistency, Recognition, Navigation, and Page Load Time.

In answering the question of Usability, "Can I use it?" the sub-category of Page Load plays an instrumental role. Page Load, often obfuscated or connected with other perceived causes of a product’s dissatisfaction, ultimately, either positively or negatively, presents an unquestionable influence on a product’s overall Usability.

Example: Poor Load Time (value = 0.0)

Twitter is fast becoming, and for some already is, an essential communication tool.

00_homepage-twitter

Yet, Twitter earns a Page Load Time variable value of 0, due to its intermittent slow performance, but more so contributing to this value are the constant outages felt through the year, month after month.

If the page doesn’t load, if requested action takes an interminable amount of time, if the likelihood of the next user action failing is constantly looming, the overall Usability of a product takes a terrible toll.

In 2009, according to Pingdom, Twitter experienced a total of 20.82 hours of downtime.

01_twitter-pingdom

Outages of Twitter were not isolated to merely the entire site being unavailable, but also consisted of sub-sections, or sub-features not working or resulting undesirable or unexpected behavior. Contributing to the pervasive problem of Page Load Time is both the inaccessibility of the product as well as the inability of the users to obtain key information (missing updates, etc) and other bugs leading to incomplete or otherwise incorrect Page Loads.

A Quick Study

I quickly examined and compiled a list of incidents that affected the Page Load Time of the Twitter product, distinguishing between total downtime, and partial downtime and information inaccessibility, based upon the public posts on Twitters blog.

http://status.twitter.com/archive

I did my best to not double count any problems, but it was difficult since many of the problems occur so frequently, and it is often difficult to distinguish, from these status blog posts alone, between a persisting problem being experienced or fixed, from that of a new emergence of a similar or same problem. Furthermore, I also excluded the impact on Page Load Time arising from scheduled maintenance/downtime – periods of time over which the user expectation would be most aligned with the product’s promise of Page Load Time.

Some of my notes regarding my review of Twitter’s 2009 product Page Load Issues…

 

Dec 17

Site Outage

DNS records compromised

http://status.twitter.com/post/288586541/working-on-site-outage

Dec 14

sms service unavailable

 

http://status.twitter.com/post/283934158/sms-service-temporarily-unavailable-we-are-working-on

Dec 8

unplanned downtime

 

http://status.twitter.com/post/275824585/responding-to-unscheduled-downtime

Dec 7

unplanned downtime

 

http://status.twitter.com/post/273515629/brief-downtime

Dec 6

high rate of failwhales

 

http://status.twitter.com/post/272315876/responding-to-whales

 

Nov 30

Unplanned downtime

high error rate; tmp disabled list feature

http://status.twitter.com/post/263867698/responding-to-high-error-rate-lists-feature

Nov 23

elevated error rate

 

http://status.twitter.com/post/254725789/fixing-elevated-error-rate-on-twitter-com

Nov 11

high number of errors

 

http://status.twitter.com/post/240542434/working-on-high-number-of-errors

Nov 6

elevated errors

 

http://status.twitter.com/post/235296654/were-looking-into-the-cause-of-elevated-errors-on-the

 

Oct 21

elevated error rate

 

http://status.twitter.com/post/219264090/elevated-error-rate-being-worked-on

Oct 18

network connectivity problems

 

http://status.twitter.com/post/216351172/responding-to-network-connectivity-problems

Oct 13

account lockouts after username/pw change

 

http://status.twitter.com/post/212318608/researching-username-password-change-problems

Oct 12

errors and inability to tweet

 

http://status.twitter.com/post/211258987/responding-to-increased-errors-inability-to-tweet

Oct 7

Unplanned downtime

 

http://status.twitter.com/post/207018761/recovering-from-unplanned-downtime

 

Sept 10

site slowness

 

http://status.twitter.com/post/185079863/working-through-site-slowness

Sept 9

secure connection failed issues

 

http://status.twitter.com/post/183975122/secure-connection-failed-issues

 

August 24

unexpected service interruption

 

http://status.twitter.com/post/170695014/we-are-responding-to-an-unexpected-service-interruption

August 16

Oauth and API problems

 

http://status.twitter.com/post/164410057/trouble-with-oauth-and-api-clients

August 15

unexpected downtime

 

http://status.twitter.com/post/163603406/working-on-unexpected-downtime

August 11

Site outage

 

http://status.twitter.com/post/160693237/responding-to-site-downtime

August 6

Site is down

DOS attack

http://status.twitter.com/post/157160617/site-is-down

http://status.twitter.com/post/157191978/ongoing-denial-of-service-attackhttp://status.twitter.com/post/157191978/ongoing-denial-of-service-attack

August 2

Search Down

problem coming from migrating data centers

http://status.twitter.com/post/44516325/twitter-search-temporarily-down

 

July 10

site latency

widespread

http://status.twitter.com/post/139238308/working-on-site-latency

July 5

restoring accidentially suspended accounts

 

http://status.twitter.com/post/136164828/restoring-accidentally-suspended-accounts

 

June 15

Outage

problem w/ maintenance by provider

http://status.twitter.com/post/124145031/maintenance-window-tonight-9-45p-pacific

 

May 30

unscheduled downtime

fatal software error

http://status.twitter.com/post/115523264/unscheduled-downtime

May 28

unable to create new accounts

captcha problem

http://status.twitter.com/post/114566780/unable-to-create-new-accounts

May 27

site latency

 

http://status.twitter.com/post/113959453/working-through-site-latency

May 27

Unplanned downtime

 

http://status.twitter.com/post/113891094/recovering-from-unplanned-downtime

May 22

search down

 

http://status.twitter.com/post/111769727/search-temporarily-down

May 21

robot errors

 

http://status.twitter.com/post/111054487/fixing-robot-errors

May 20

user search unavailable

 

http://status.twitter.com/post/110639419/user-search-temporarily-unavailable

May 14

unplanned downtime

 

http://status.twitter.com/post/107824532/unplanned-downtime

May 8

latency issues

resulting from a scheduled site maintenance

http://status.twitter.com/post/105202075/back-from-site-maintenance-working-on-site-latency

 

Apr 28

elevated error rate

fail whales

http://status.twitter.com/post/101237008/fixing-the-elevated-error-rate

Apr 13

slow load times and high error rates

 

http://status.twitter.com/post/95787359/responding-to-slow-load-times-and-high-error-rates

Apr 9

high latency

also fb not updating

http://status.twitter.com/post/94536362/twitter-com-is-experiencing-high-latency-were-also

Apr 7

high site errors; downtime/load issues

 

http://status.twitter.com/post/93850673/update-on-delivery-delays-errors

Apr 6

maintenance (no advance warning); downtime

 

http://status.twitter.com/post/93641925/one-hour-maintenance-starting-at-5-45p-pacific

Apr 6

errors; downtime

fail whales, robot pages; missing tweets

http://status.twitter.com/post/93501130/working-through-some-errors-this-morning

Apr 3

errors; downtime

fail whales, robot pages

http://status.twitter.com/post/92659539/recovering-from-errors-this-morning

 

Mar 16

unplanned maintenance

widespread slowness

http://status.twitter.com/post/87009894/unplanned-maintenance

Mar 4

problems logging in

 

http://status.twitter.com/post/83602310/problems-logging-in

Mar 2

power failure

degraded performance

http://status.twitter.com/post/82874378/power-failure-this-morning

 

Feb 18

latency issues

very long load times

http://status.twitter.com/post/79456053/working-on-site-latency-issues

Feb 14

downtime

db problem

http://status.twitter.com/post/78228774/back-from-maintenance-mode

Feb 11

Site down

db problem

http://status.twitter.com/post/77438630/site-back-up

 

Jan 20

site slow

slow load times

http://status.twitter.com/post/71824634/slowness

Jan 16

downtime

notified user of potential for more downtime

http://status.twitter.com/post/70991844/twitter-downtime

 

Dec 17

timeline delays and missing tweets

 

http://status.twitter.com/post/287676075/known-issues-timeline-delays-and-missing-tweets

Dec 10

problem posting tweets to FB

problem resulting from FB latency issues

http://status.twitter.com/post/277958642/not-all-tweets-from-facebook-app-being-posted-to

 

Nov 5

missing mentions

 

http://status.twitter.com/post/234412987/missing-some-mentions

 

Oct 28

no dmsg emails

 

http://status.twitter.com/post/226186595/not-receiving-emails-for-direct-messages

Oct 15

timelines 0.5h behind

 

http://status.twitter.com/post/214053142/timelines-currently-30-minutes-behind

Oct 8

timeline delays

bug

http://status.twitter.com/post/207632462/timeline-delays-this-morning

 

Sept 16

missing tweets

bug

http://status.twitter.com/post/189862465/tweets-from-users-you-follow-may-be-missing-from-your

Sept 14

missing tweets for some

 

http://status.twitter.com/post/187786359/missing-tweets-from-some-users

Sept 4

short delivery delays

 

http://status.twitter.com/post/179752377/working-on-short-delivery-delays

Sept 2

some tweets & followings delayed

small subset?

http://status.twitter.com/post/178076369/some-tweets-and-followings-delayed

 

August 12

timeline delays

 

http://status.twitter.com/post/161638570/working-on-timeline-delays

 

July 28

missing followers for new users

 

http://status.twitter.com/post/151217980/working-on-missing-followers-for-recently-joined-users

 

June 29

viewing other people followers/following disabled

bug

http://status.twitter.com/post/132761078/viewing-other-peoples-followers-and-followings

June 16

unable to find new users

 

http://status.twitter.com/post/124832153/working-to-get-new-users-into-find-people

June 12

search delay

new tweets not being picked up by search

http://status.twitter.com/post/122606485/search-delay

June 3

delayed followings

resulting from spam attack

http://status.twitter.com/post/117482837/delayed-followings

 

May 13

timeline delays

hardware failure

http://status.twitter.com/post/107561169/temporary-timeline-delays

May 4

search running behind

search not processing real-time

http://status.twitter.com/post/103533181/search-running-behind

 

Apr 22

data inconsistencies

bug

[still being fixed on the 27th]

http://status.twitter.com/post/99180872/tracking-down-data-inconsistencies

Apr 22

missing user images

 

http://status.twitter.com/post/98960090/missing-user-images

Apr 14

delayed search results

 

http://status.twitter.com/post/96196695/search-results-are-delayed-about-20-minutes

Apr 10

missing updates

 

http://status.twitter.com/post/94970050/were-working-to-resolve-an-issue-with-some-missing

Apr 6

missing avatars and dmsgs

 

http://status.twitter.com/post/93589702/missing-user-icons-avatars-and-direct-messages

Apr 2

not finding self in people search

bug

http://status.twitter.com/post/92334992/not-finding-yourself-in-people-search

 

Mar 18

missing tweets

db inconsistency, etc.

http://status.twitter.com/post/87625680/some-users-experiencing-missing-tweets

Mar 16

Delays on following and dmsgs

 

http://status.twitter.com/post/86986973/some-delays-on-followings-direct-messages

Mar 12

missing updates & actions

 

http://status.twitter.com/post/86067236/some-missing-updates-actions

Mar 11

inconsistencies

data inconsistencies (msg, counts, other data)

http://status.twitter.com/post/85644965/update-on-inconsistencies

Mar 9

inbound sms delay

 

http://status.twitter.com/post/84921942/inbound-sms-delay

 

Feb 6

inconsistent follower/following counts

 

http://status.twitter.com/post/76219963/delays-in-posting-text-messages

Feb 6

txt msg posting delays

problem w/ provider

http://status.twitter.com/post/76219963/delays-in-posting-text-messages

Feb 2

Missing updates

 

http://status.twitter.com/post/75182201/missing-updates-were-bringing-them-back

Feb 2

missing self

new users missing from search

http://status.twitter.com/post/75102341/unable-to-find-yourself

 

Jan 30

follower/following counts wrong

due to replication lag

http://status.twitter.com/post/74360199/were-looking-into-inconsistencies-with

Jan 19

slow search

search fell behind realtime due to maintenance

http://status.twitter.com/post/71697063/search-behind-realtime

Jan 8

Delivery delays

tweets slow to appear in the timeline

http://status.twitter.com/post/69184677/catching-back-up

Jan 6

Delivery delays

tweets slow to appear in the timeline

http://status.twitter.com/post/68751921/delivery-delays

 

That said, a clear picture of the Page Load Time experience felt by the Twitter product’s user base quickly emerged.

Approximately 14% of all days in the year experienced delays and disruptions, directly altering the Page Load Time of the product. And, another ~10% of the year’s days experience pages loading with missing information, resulting in a total number of days experiencing disruption at around 24% of the year or 86 days! (note: there may be some day overlap that is not taken into account in these numbers)

02_twitter-bad-days

Note: Data for December is complete (only goes through December 21, 2009)

Should Do & A Clear Flight Path

When using Twitter, tweets, responses, searches can and sometimes do occur quickly and without incident. However, with such consistency of problematic service, fail whales, site latency, etc. Twitter earns no more than a value of 0 for Page Load Time; but with a clear path to improvement…

  • first, focus on the reliability of the Page Load, drastically reducing downtime,
  • then, focus on the missing data and other inconveniences, some of which are touched upon in my table of notes above.

Next…

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

Poor Load Time (value 0) [Twitter, Twine]
Delayed Load Time (value 0.5) [Conversation Pieces]
Prompt Load Time (value 1) [Facebook]

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usability and Page Load Time 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, Discuss & Tweet!

Jeremy Horn
The Product Guy

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

On the Page Load Time of Quick-UX

image There are some products out there (Twitter comes to mind) that could not possibly have an easier to use interface coupled with a simpler purpose (to say "what’s happening"). However, simple purpose and simple interface are not all that constitute a product’s Usability.

A company can have the best product around, but if the pages are too sluggish, if the product suffers recurring outages, if the user-product interaction is varied and inconsistent, the product’s overall Usability can, and does, suffer.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). Among the various components that define a product’s Usability, as well as Quick-UX‘s, are…

Accessibility,
Consistency,
Recognition,
Navigation, and
Page Load Time.

In answering the question of Usability, "Can I use it?" the sub-category of Page Load plays an instrumental part. Page Load, often obfuscated or connected with other perceived causes of a product’s dissatisfaction, ultimately, either positively or negatively, presents an unquestionable influence on a product’s Usability.

The more engaged a user is with a website, the more they are able to interact, the more they can interact. The slower the website, the slower the rate and capability to engage.

Think of the last time you were shopping online when you made a purchase. Where you able to rapidly get to and purchase the product you sought? The answer most likely is yes. Now, think of the last time you visited a shopping website, where the pages were slow to load. Did you make a purchase? Most likely, the resounding takeaway characteristic you can recall today is one of frustration, in navigating, in seeking, that drove you to other websites — that facilitated your decision process through their greater Usability, and responsiveness.

If the user can forget what they were doing, due to sluggish responsiveness for actions taken in a textfield, the Page Load Time is too slow. The slower a page, the more opportunity a user has to be distracted by other websites, tabs, in-office activities, that can easily pull them from the initial web product.

The perceptions of acceptable Page Load Time are always changing. As the Internet and web continually accelerate, so too do people’s expectations regarding what they consider, ‘instant’ or ‘slow.’ At one point, over dial-up, ‘instant’ was many seconds, or even a minute, but today, a second is nearly ‘instant’, and many seconds is mostly unusable.

Assessing the Page Load Time variable requires very little of your time. ;-) However, I do recommend that you average at least a few data points over the course of a day or days to make sure you have an accurate sense of the normal product responsiveness.

  • If the product typically loads the information promptly (within acceptable expectations) then the Page Load Time variable is assigned the value of 1.
  • If the product exhibits the occasional, inconsistent delays, use 0.5.
  • And, if the product (like Twitter) has frequent and long delays (including outages) the value for Page Load Time variable is 0.

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

Poor Load Time (value 0) [Twitter, Twine]
Delayed Load Time (value 0.5) [Conversation Pieces]
Prompt Load Time (value 1) [Facebook]

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usability and Page Load Time 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, Discuss & Tweet!

Jeremy Horn
The Product Guy

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

Sea Unfathomably

desirabilityColors, their schemes, and contrasting arrangements play an important role in increasing, or depressing, the Desirability of a product. Colors play an important role in invoking emotions, conveying themes, and guiding messaging.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Do I want it?" the sub-category of Color Scheme plays an important role.

For Example: Midwest SCUBA

Midwest SCUBA Center presents both an interesting first impression and simultaneously great example of a Poor Color Scheme.

00_mscsuba_homepage

The most prominent colors on this page are blue, white, and red.

01_mscsuba_colors

This product starts off well enough with its selection of colors in the header, with a high contrasting, easy to read, blue on white, Color Scheme to present the center’s name, explanation, and some contact information.

02_mscsuba_header

But, then the product’s Color Scheme goes off the deep end. The colors of red, white, and blue, in the manner fashioned, do not, pluck the heartstrings of patriotism, but may cause one to be concerned with other matters of that organ.

Not only does the secondary color of the page, red, not mesh with the theme of swimming, and not only is it often used in association with alerts and warnings, but when a user is presented with the overt imagery of red in water, that user may be first inclined to think of Jaws. Learning SCUBA may be sufficiently nerve wracking without this unnecessary association.

03_mscsuba_red-in-water

Associating the instructor and their lessons with the red in the water is not the messaging a SCUBA school wants to convey.

The blinding color scheme is so bad and distracting that it actually hides other somewhat more legible sections of the product. A grey button, that somewhat more legible component towards the bottom of the view, presents the bold option to ‘Continue’ for those daring enough to dip more than a toe in these waters. And, for those adventurous souls, they will discover another set of pages and menus.

04_msscuba_secondary-view

Unfortunately, the bulk of the content on this page, with yellow on blues , is also very difficult to make out.

Should Do

For all of the colorful problems that this product presents its users, the solutions can be simple to implement.

  • Overall, the high water graphic that is being used as the background will cause color matching problems with many color schemes. Replacing this image with a single color or making sure that no text is ever presented directly on top of the water image, but always has a high-contrasting, simple background to play off of would be a good start.
  • On the initial view, the user would be better served through the elimination of the strong, attention grabbing red, and implementation of high contrast color pairs like white on blue or black on white.
  • On the secondary view, as red did not play well with blue, neither does yellow. Here too, the user will benefit from experiencing higher contrasting text; but, my preference remains eliminating or masking the water imagery and shifting to a more eye friendly font color, black or white or blue (of course paired with a contrasting background).

Quick & Useful

The variables Aesthetics, Layout, Color Scheme, and Typography represent the Usefulness category of Quick-UX for the evaluated product. When looking at an entire product, the question “Do I want to use it?” represents only 1 of the 3 core components (Usability, Usefulness, Desirability) of a Quick-UX evaluation – a rapid way to obtain concrete and comparable means by which to assess a single product or compare its strengths and weaknesses to other products.

Over the next few weeks I will be various good, as well as bad, real-world examples of use of Color and Contrast in online products and websites …

Poor Color Scheme
Fair Color Scheme (Cluttered)
Fair Color Scheme (Mismatched Color)
Good Color Scheme (First Example)
Good Color Scheme (Second Example)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Color Scheme components 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 Google Add to Mixx!

The State of Massachusetts SSAA Grouping

desirabilityQuick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Should I use it?" the sub-category of Layout is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.

The relationships between and among various page elements, how they play off of one another, constructively guiding a process, or organizationally segmenting a concept, can influence how accepted, by the user, the product is, and how Desirable, how much they (the users) will actually want to use it.

Today, we will look at an example of an Internet product with Poor Grouping, representing a Layout value of 0.

Example: Poor Grouping (value = +0)

Massachusetts Secondary School Administrators’ Association’s web product, primarily informational, is one that presents a Layout and Grouping of elements detrimental to the overall User Experience, and, in this case, its Desirability, earning it the distinction of being today’s excellent example of a web product with Poor Grouping.

00_mssaa_homepage

Many elements appear to be grouped, but with none, other than the java-based menu, actually presenting any logical grouping or separation of similar or dissimilar elements. At first glance, many parts appear to be grouped.

01_mssaa_groups

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

02_mssaa_chaos

The content of this product is organized into columns. Within these columns some elements appear to form groups and sections. Upon further inspection, it is obvious that any perceived visual cues have occurred merely by chance, rather than through any human expression of intent to assist the user in isolating and identifying the content of interest.

03_mssaa_faux-groups

Beyond the product navigation and the general content, there is no organization. The content is scattered throughout the main body of the product, with no true associations or relevance between any group, column, or mini-group.

04_mssaa_stuff

The Layout and Grouping of Massachusetts Secondary School Administrators’ Association‘s web product provides a scattered, chaotic, random experience that does not contribute to the Desirability of the product — a great example of a product with Poor Grouping.

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

Clear Visual Hierarchy (value +0.4)

Fair Visual Hierarchy (value +0.2)

Poor Visual Hierarchy (value +0)

 

Non-negative Visual Flow (value +0.3)

Negative Visual Flow (value +0)

Poor Sequential Flow (value -0.15)

 

Clean Grouping (value +0.3)

Inconsistent Grouping (value +0.15)

Poor Grouping (value +0)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Layout of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

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

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!

Confusing Domain of GoDaddy

desirabilityQuick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Should I use it?" the sub-category of Layout is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.

The relationships between and among various page elements, how they play off of one another, constructively guiding a process, or organizationally segmenting a concept, can influence how accepted, by the user, the product is, and how Desirable, how much they (the users) will actually want to use it.

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

Example: Poor Visual Hierarchy (value = +0.0)

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

00_godaddy_homepage

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

01_godaddy_redundant_domain

…and…

02_godaddy_redundant_accoun

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

03_godaddy_hotpoints

Is the most important information on this page,

My Products,

04_godaddy_myproducts

or Logging in,

05_godaddy_logging_in

or Email offers,

06_godaddy_email_offers

or Buying $1.99 domains,

07_godaddy_199_domains

or Starting a domain name search,

08_godaddy_domain_search

09_godaddy_domain_search

or Buying web hosting,

10_godaddy_web_hosting

or Expressing myself through .me domains,

11_godaddy_me_domains

or Getting a .tv domain

12_godaddy_tv_domains

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

13_godaddy_logo

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

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

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

Product Advisor

Express Yourself

Web Hosting

.TV Domains

14_godaddy_more_marketing_s

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

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

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

Clear Visual Hierarchy (value +0.4)

Fair Visual Hierarchy (value +0.2)

Poor Visual Hierarchy (value +0)

 

Non-negative Visual Flow (value +0.3)

Negative Visual Flow (value +0)

Poor Sequential Flow (value -0.15)

 

Clean Grouping (value +0.3)

Inconsistent Grouping (value +0.15)

Poor Grouping (value +0)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Layout of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy­­

Mystical Presdo

user-useitIntra-product-type consistency, the Recognition and intuitiveness present within a product, is a key component in determining the overall Usability of a product. For an air travel website to be usable, it should have some basic, recognizable, consistency with other airline products. For example, on the top-left region of most every air travel website you will find a form to enter starting and destination locations, departure and return dates, as well as the number of passengers traveling on the given trip.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Can I use it?" the sub-category of Recognition is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.

Today, we will look at 2 examples of Internet products with Poor Recognition, representing a Recognition value of 0.

Example 1: Poor Recognition (value = 0)

Presdo is a beautifully simple and unique event planner. Unlike all other event planners, there is neither a ‘create event’ nor ‘create’ button on the homepage. There is, however, a single text field prompting for an event description alongside a ‘do’ button.

00_presdo_homepage

It is not until the initial stage is grasped and acted upon, by the user, that any Recognizable elements, from ‘create event’ to ‘when’ and ‘where’ become evident.

01_do_pressed

Presdo is a wonderful example of product with Poor Recognition. A product does not have to be an ugly website or present a horrible idea to get a poor rating. Sometimes the most unique concepts are least easy to recognize. And, Presdo is just such a product.

Example 2: Poor Recognition (value = 0)

Perhaps the easiest example that exemplifies Poor Recognition is Ai Interactive Media’s website – with confusion all around.

00_aiinteractivemedia_homepage

While this product is clearly aiming to present a unique and fun experience, it should be obvious to all that the method of using and interacting with the product, as well as merely understanding what the product is trying to communicate, is difficult, and only achievable after spending a good deal of time with it. There are no recognizable elements, links, buttons, instructions, etc., that guide the user into making any decision.

Some recognizable clues become obvious after guessing to click on the moving, spiraling, zooming discs (perhaps CDs?). After clicking on one of these discs, another, uniquely distinct, interface is presented. On this screen, incomparable to any industry norms and unrecognizable to the average user, the user is presented with many more new concepts with very few being Recognizable actions (seemingly clickable), e.g. ‘Launch Work.’

01_aiinteractivemedia_clicked_thing

To help everyone gain a deeper understanding of Quick-UX and how to benefit from performing quick, quantitative analyses of User Experience, I am, over the course of this series providing real-world examples of Recognition values…

Broad Recognition (value 1)

Fair Recognition (value 0.5)

Poor Recognition (value 0)

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usability and Recognition 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!