Automating the Path to a Better User Experience

Posted on July 5, 2010 by Jeremy Horn

I started writing about Quick-UX in 2008. Since then, I have written many detailed articles exploring, evaluating, and identifying areas of improvement for real products — along the components that make up Quick-UX. Now, through the help of Google Docs, as I did the other week with the release of the Quick-MI Worksheet, I’m sharing the Quick-UX Worksheet to make it even easier and faster for you to apply Quick-UX to your products, track progress, and share the results with your team. The Quick-UX Worksheet automatically performs all the necessary calculations and summarizes the product’s Usability, Usefulness, and Desirability for you.

About Quick-UX

Quick-UX evaluates the degree to which a product successfully addresses the following 3 questions:

Can I use it? (Usability)
Should I use it? (Usefulness)
Do I want to use it? (Desirability)

The elements evaluated in response to each question constitute a minimal representative subset that accurately addresses the question posed while adhering to the goals of Quick-UX.

Often, a quick assessment of User eXperience is more aptly called for. A quick assessment allows for rapid compilation of simple heuristics that can be very handy in providing…

a summarized view of a product’s overall User eXperience,
directional guidance for a product’s future development, and/or
metrics for comparison with other products.

Quick-UX is a method that I have developed and refined over time and frequently utilize when quick assessments are best suited to the task. The method that I describe below is a great way to build a summary description with quantifiable and comparable metrics, representing the understanding of the overall User eXperience of a product.

Instructions

The Worksheet is broken into sections based on Category as indicated by the blue row starting each.

Beneath each Worksheet Category are the variables that make up the associated category.

To the right of the Category variable names is the Description column providing quick guidance regarding how to quantify each variable. More detailed guidance and examples can be found within article series posted on The Product Guy.

The next two columns “Select One” and “Select All that Apply” contain the variable values. When a variable has values listed within the “Select One” column, only the variable that best describes the current product’s characteristic is selected and copied, within the same row, to the Total Value column.

When a variable has values listed within the “Select All that Apply” column, each value whose Description matches the current product is mirrored into the Total Value column.

The Accessibility value is calculated differently than all the other variables. The value associated with the Accessibility variable comes from the normalized result of a 3^rd party application. To obtain this value we use a robust (and free) proxy for quickly assessing a product’s Accessibility through the use of the Functional Accessibility Evaluator (fae) link. The fae’s resultant scores are averages which, in turn, are normalized to a range from zero to one to represent the value for Quick-UX‘s Accessibility variable.

The Total Values associated with each Category will automatically update…

… as will the Quick-UX Rating at the bottom of the table.

Quick-UX Summary boils it all down into one single page, from each variable value to handy visual representations.

I also find it handy to use for tracking product progress over time, as well as instantly overlaying against products.

As an additional note, the Quick-UX Worksheet is pre-populated with sample data to make it easier to dive in and get started. As you assess your products, just replace/add/remove the variable values within the Total Value column to match your findings. (Remember, only modified the Total Value entries within the non-blue rows — everything else will update automatically for you.)

VIEW THE QUICK-UX WORKSHEET

Enjoy!

Jeremy Horn
The Product Guy

About these ads

Facebook PDQ

Posted on February 15, 2010 by Jeremy Horn

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 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: Prompt Load Time (value = 1.0)

When I recently twittered my followers asking for their opinion of a web product that best exemplified a Prompt Load Time, some of the most common responses were…

WordPress and
Basecamp.

But, the product that received the most votes was Facebook.

Facebook is not only a good example of a product with a Quick-UX Usability Page Load Time variable value of 1.0, Prompt Load Time, but also a wonderful example of improvement along the same lines.

Amazingly, as recently as January 2008, Facebook was seen as one of the slowest, most inaccessible social networking products.

Now, Facebook, is one of the promptest, fastest web products, with 350 million active users, 50% of which log on every day, with the average user spending 55 minutes interacting with the product.

Whatever part of the product with which the user chooses to interact, the end result is always and consistently the same… quick reaction and responsiveness – from visiting and interacting with one’s Inbox…

… to participating in conversations in the News Feed.

Should Do

With all the positive efforts being taken, some ‘flourishes’ of the user interface continue to inject a sluggishness into an overall snappy Page Load Time and user experience that would best be redesigned or redeveloped inline with the rest of the product’s established Page Load Time expectations. An example of such an interface event, with sluggishness caused by either the method of display, and/or of content retrieval, is the user action of adding a friend.

If a recent interview with an anonymous Facebook employee is accurate, Facebook can be viewed as being very much on the right track to further improvement of their already Prompt Load Time.

On the continued optimization of downloaded file size and its client-side performance…

"…actually found out it increased the number of page views by 77%, essentially because we were reducing 77% of the page load, and therefore it was loading faster, and thus generating more clicks. We not only reduced our bandwidth, and how much we have to pay for our Internet, but we made the site faster and increased the clicks-per-minute, which is what we’re truly interested in."

On the optimization of server responsiveness…

"…this guy right now is single-handedly rewriting, essentially, the entire site. Our site is coded, I’d say, 90% in PHP. All the front end — everything you see — is generated via a language called PHP. He is creating HPHP, Hyper-PHP, which means he’s literally rewriting the entire language.

"We’re going to reduce our CPU usage on our servers by 80%, so practically, users will just see this as a faster site. Pages will load in one fifth of the time that they used to."

Next…

Over the course of this series we explored many 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 exploration 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:

Slow Paced Conversation Pieces

Posted on February 8, 2010 by Jeremy Horn

Example: Delayed Load Time (value = 0.5)

Conversation Pieces is a web product that provides an online venue from which indie designers can sell their creations. This product has also earned a Quick-UX Page Load Time variable value of 0.5, Delayed Load Time.

According to a report that Akamai released in 2009…

40% of consumers abandon the site after 3 seconds of load time

23% of consumers stop shopping due to long page loading time

These are 2 concerns that Conversation Pieces would be well served to pay attention to.

Store, Set Up

Bandwidth utilization resulting from the speed of the product’s server(s) plays a critical role in the understanding, and consumer’s perception, of a product’s Page Load Time. However, Page Load Time, the Quick-UX variable, is a quantification of the perceived time it takes to load the page, content, or complete an action. If the product’s page downloads everything in 100ms, but does not show anything to the user for 5, 10, or more seconds, then the page has a Page Load Time problem.

As far as bandwidth utilization is concerned, going beyond the basic hardware of the servers…

unoptimized images
Resizing the used images, reducing the number of colors used, and selecting the proper compression algorithms (GIF, PNG, JPG), can have a tremendous impact on the final file size delivered to the consumer.

uncompressed files
Using products like YUI Compressor or Google Compile on files containing the likes of JavaScript and CSS can remove whitespace and restructure your underlying code to be compact and small in file size.

no HTTP compression
Compressing HTTP requests and responses are very common on many servers and typically demonstrate as much as a 70% reduction in response size, a.k.a. the files the consumer is receiving via their browser. note: depending on your server setup there may be CPU overhead

uncombined files
The more file requests that are made, the more overhead that is involved in the process, and the slower the Page Load Time. Various methods can be used to reduce the files, from using sprites to combine many images into one, to concatenating CSS and JavaScript files.

… all use up unnecessary bandwidth, resulting in superfluous seconds wasted in Page Load Time. Some more best practices to optimizing Page Load Time can be found at http://developer.yahoo.com/performance/rules.html .

Minding the Store

The Conversation Pieces product exhibits occasional, inconsistent delays, everywhere from the initial home page load to the display of various purchasable content .

These delays are most likely caused by the way the Flash and the caching of images has been coded. The resulting experience created is a very real concern in the product’s Usability, with the consumer sometimes waiting, sometimes instantly getting what was requested, with no apparent pattern to the behavior.

Such inconsistency of Page Load Time does more than wreak havoc within the online shopping experience. Beyond the impact on the product’s Usability, there is enough inconsistency present to assuredly have an impact on the actual pocketbook of the company; resulting from consumers leaving to go elsewhere, to a more stable, more consistently usable website.

Should Do

Perceived page load time is the ‘real’ Page Load Time as far as the consumer is concerned. With that in mind, specific steps can be taken to improve the Page Load Time of the Conversation Pieces product.

Focus the product on providing content in manners empowering the rapid actions and decisions of its consumers.
Whether sticking with a full Flash web product, or not, further optimize the dynamically loaded images and perform smarter caching and, especially, preloading of content with better user feedback as to what is actually going on, e.g. image X of Y loaded, W% loaded, Q time remaining.
A good deal of what can be accomplished in Flash can be done in a much more lightweight and prompt fashion via the latest techniques of HTML and JavaScript. With the availability of very powerful JavaScript libraries (MooTools, YUI, jQuery, …) companies are hard pressed nowadays to justify the absolute requirement of Flash over that of HTML.

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:

Twine Tied Up in Load Time

Posted on January 25, 2010 by Jeremy Horn

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.

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…

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

10+ seconds later

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

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.

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]

Enjoy, Discuss & Tweet!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Twitter’s Crawl

Posted on January 17, 2010 by Jeremy Horn

Example: Poor Load Time (value = 0.0)

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

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.

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)

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]

Enjoy, Discuss & Tweet!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

On the Page Load Time of Quick-UX

Posted on January 11, 2010 by Jeremy Horn

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.

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]

Enjoy, Discuss & Tweet!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Google: True Colors Shine Through

Posted on September 21, 2009 by Jeremy Horn

Colors, 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: Google (Search Results)

Google Search is a great example of a product that performs perfectly, not just by providing colors very much inline with the target mood of trustworthiness and reliability, but also in how it all impacts the broader readability and accessibility of the products as evaluated from the perspective of color, thereby achieving a 1.0 value for the Color Scheme variable within the category of Desirability within Quick-UX.

A Standard Look

Internet standard colors are high contrast, highly readable, and bring with them the universal understanding of expected behavior, from new blue link and the purple visited link to the black body text on a white background. Standard color usage helps new and repeat users be more productive — when a link is purple a user doesn’t have to struggle to remember what they previous did; they already know that those purple links in a sea of blue links are those already visited on prior trips to the product.

Some standard expectations of color usage seen throughout the Google Search product are…

consistent link colors
visited and unvisited links are different colors
unvisited links are blue
visited links are purple
content / descriptions are black

Blue and Black

The strongly colored blue links dominate the search results, catching the user’s eyes and guiding the user from the top listing to each successive hot spot (blue link) on the page.

The black text, rightly subordinate to the blue links, is both easy to read against the white background, and does not interfere with the visual flow of the product.

With this much content on a page, it is easy for a poorly executed color scheme to result in a lack of direction and a confusion of choice. But, here, the weighted use of blue title / links, coupled with other highly contrasting content of lesser attention grabbing strength, provides a perfect use of color, contrast and visual momentum throughout the search results.

Google strictly adheres to these standards and extends these and other web safe color standards and expectations throughout their Search as well as various other Google products. This is a color scheme and structural color approach used throughout the majority of Google’s more refined suite of products (e.g. Google Voice, Gmail, Google Reader, …).

The strength of this product’s Color Scheme and an assessment of its color-based readability and accessibility can be more rigorously and scientifically evaluated by running the product through a serious of color and contrast accessibility tests. The CheckMyColours product runs numerous tests to evaluate a given URL’s adherence to WAI, WCAG 1.0 and WCAG 2.0 standards.

A Standard Feel

This adherence to the most basic of color standards of the web not only ensures great readability and usability of the product, but also reinforces the more ‘emotional’ human responses to this product as the ‘standard,’ the ‘authority’ on information online.

Google Search’s color choices, from logo to page content, can be characterized as consisting of …

primary colors(except for the occasional green),
structure, and
order.

These characteristics:

the minimal color complexity,
adherence to (mostly) primary colors and web color standards,

…result in the simultaneous coexistence of being a definer and follower of the color standards of the Internet, from blue links to black text on white.

Such adherence to web standards and simplicity, the colors, of blue, white, black, purple, yellow, red, and green (within the product, as well as the product’s logo) evoke feelings of …

honesty,
objectivity,
integrity,

… and, in turn, an overall trustworthiness.

Google Search, as the standard bearer for finding information, is reinforced by the ‘theme of standards’ established initially with their consistent and standardized choice of colors. By sticking with the most basic, most standard of colors for a web page, Google Search reinforces the emotional connection of standard bearer, the authoritative voice on online information; demonstrating, through its lack of gaudier colors, a more scientific, more standard, more matter of fact, factual presentation, a cooler presentation of ‘just the facts.’

Think Green

The use of green, a color blend, the most prominent, action agnostic, non-primary color of this product, both in the logo and search results presents a slight break in the rigor of standards. One such interpretation of the emotional impact of green within this product, is that with all the order and structure Google Search seeks to bring to its users, there is also a strand of non-primary, non-structure woven into the product, a sense of being and thinking a bit differently. Further reinforcement of this interpretation, can be seen in the mood effects often associated with the color green, of…

vitality,
creativity, and
sharing.

All emotions and concepts instrumental to both the Google Search product, as well as a primary theme throughout Google’s products and strategies.

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:

Clean and Air Cooler

Posted on September 14, 2009 by Jeremy Horn

For Example: Air Cooler PLUS

A good example of a 1.0 value for the Color Scheme variable within the Quick-UX framework is Air Cooler PLUS.

Q: Do the colors match the products messaging?
A: Yes.

Air Cooler Plus is a very good example of a product with a Color Scheme very much inline with the goals and sensations that they seek to convey to its users.

Sometimes being blue can produce a very happy result. The blue end of the spectrum is not only associated with feelings of sadness and melancholy, but also the more physical sensations of cool and frigid temperatures.

A visitor to this product can instantly picture the cool blues of ice, and even the purpling of chilled lips. And, with this product, the theme conveyed by shades of blue ranging to the deep purple are perfectly in tune with the purpose of the item this product is selling, a cooling, chill inducing, warmly embraced, air conditioner.

Q: Do the colors negatively impact the user’s ability to read the content?
A: No.

All of the messaging of this product is presented with the text color in clear and high contrast to the background upon which it has been placed. Furthermore, the contrasting nature of the text color with the text background color, whether it is black text on a white background, or (icy) white text on an indigo background, is always done with a color from the simple product color palette being paired with a contrasting neutral color. Throughout this product the presentation of these high-contrast, color pairings result in a non-negative impact on the readability within.

Q: Is this product suffering from color overload?
A: No.

The color palette of this product is very simple.

The Color Scheme primarily consists of a range of blues, your normal web product neutrals of black and white. Only to draw the consumer’s attention, to key locations and information within the various views of this product, will you find the appropriate use of higher contrasting, attention grabbing colors.

Should Do

Specifically surrounding this product’s use of the more attention grabbing colors, reds, yellows, etc., there are some basic steps that can be taken in further refining its use of color…

All would benefit from bringing more attention to the call-to-action buttons.

For example, while the ‘Buy Online Now’ button is set apart from its surroundings by way of its 3-dimensional distinction, versus the general flatness of all other product elements, it can easily blend in with the rest of the blues and cool colors of the page. Here, the use of reds, or colors outside of the blue-purple color range would help further distinguish this important user action.

On the product pages, this emphasis issue, with respect to the call-to-action buttons, in this case ‘add to cart,’ can also be seen.

Clearly the product is emphasizing availability and price, over the purchase action.

To rectify this situation, something as simple as swapping the colors used within the two regions in question, or having the only red on the page being the ‘add to cart’ button, may prove sufficient.

Another minor point is that while it is good manners (and Usability) to clearly label a link that points to a PDF file, this could be done in a more focused manner.

With this appropriately chosen color scheme, the red colors of the PDF logo bring a bit more emphasis to this informational region that the situation appears to call for; needlessly deemphasizing the purchase events. In these cases, instead of warning the visiting clicker by displaying the PDF logo, a simpler approach, such as using a text label ‘(pdf)’ at the end of the appropriate links, is better suited.

Quick & Useful

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

Higgledy Haven

Posted on September 7, 2009 by Jeremy Horn

For Example: HavenWorks

Some havens present many distractions to the mere mortal, and this one, HavenWorks, presents no shortage of User Experience problems that can be explored. But, for today’s conversation, we will focus on this product’s ability to be a strong example possessed by a cluttered pallet and Fair Color Scheme, and achieving a Quick-UX Color Scheme variable value of 0.5.

This product’s consumers are instantly overcome with very strong, bright, highly contrasting primary colors all competing for their attention.

Sin of Overstimulation

Instead of presenting a simple, harmonious, color scheme, this product assaults the eyes with a combination of both intra- and inter-element color and contrast discord and overstimulation.

While readable, altogether, the colors of this product create a persistent state of disharmony and conflict, perhaps inline with the state of politics that this product covers, but too overt in their presentation and welcomed by no one desiring the information that this color scheme masks; an orgy of colored hot spots seeking to draw the user’s attention, pulling the user from red to blue, green to white, etc. and back around again and again.

Should Do

A bit more work than last week’s example may be required to improve this product’s Color Scheme. A good place to start in sheltering this product’s visitors from color overload (and "contrast abuse") can be achieved by reducing the level and frequency of contrast through…

Minimizing the number of primary colors on the page, and
Reducing the number of elements and points of contrast.
- Leverage the colors to group common elements, use hues to transition or sharper contrasts to emphasize (occasionally — this should be the exception, unlike the current color implementation).

Quick & Useful

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

A Dentist of a Different Color

Posted on August 31, 2009 by Jeremy Horn

For Example: KAB Dental Supplies

A visit to the dentist is not often one of those most sought after experiences in life. Here, KAB Dental Supplies is a great example of a Fair Color Scheme by way of color mismatch (and Quick-UX Color Scheme value of 0.5).

A chosen Color Scheme can have a profound impact on the psychology and behavior of a product’s consumers.

Unlike other examples <link to Sea Unfathomably>, the color choices have not rendered the content unreadable, but have most definitely rendered them increasingly undesirable by neglecting the Cool and Calming end of the spectrum. The Color Scheme of this product is not constituted of welcoming, calming, clinical colors; but, rather ones more so associated with pain, suffering, and alarm (thoughts most, I would hope, dentists do not want associated with them or the tools they use).

As a matter of fact the Color Scheme of KAB Dental Supplies is not too dissimilar from that of the following examples (note their very descriptive names)…

Dental websites and those that supply them with the tools of their craft would be well served to extract themselves from the likes of dentist paranoia, dentist trauma, dentist… again, etc.

Should Do

Whether it is the dentist, him or herself, or those that they cater to, the entire field should strive to scrape away all forms of decay of Desirability by way of Color Scheme. Companies that work within the medical field are smart to seek out the creation of a calm and logical environment. For this product, a good example for a better color scheme, reinforcing the positive, de-emphasizing the negative, can be found in the so aptly named Color Scheme, Doctor Smile…

… which presents a Color Scheme that is …

Calming (through the use of cooling colors), and
Trustworthy (a sentiment associated with the blue family of colors).

Quick & Useful

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)

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

About Quick-UX

Instructions

Share this:

Like this:

Example: Prompt Load Time (value = 1.0)

Should Do

Next…

Share this:

Like this:

Example: Delayed Load Time (value = 0.5)

Store, Set Up

Minding the Store

Should Do

Next…

Share this:

Like this:

Example: Poor Load Time (value = 0.0)

Should Do

Next…

Share this:

Like this:

Example: Poor Load Time (value = 0.0)

A Quick Study

Should Do & A Clear Flight Path

Next…

Share this:

Like this:

Share this:

Like this:

For Example: Google (Search Results)

Quick & Useful

Share this:

Like this:

For Example: Air Cooler PLUS

Should Do

Quick & Useful

Share this:

Like this:

For Example: HavenWorks

Sin of Overstimulation

Should Do

Quick & Useful

Share this:

Like this:

For Example: KAB Dental Supplies

Should Do

Quick & Useful

Share this:

Like this:

Follow “The Product Guy”