From Driven Health to Untouchable Design

Every week I read thousands of blog posts. For your weekend enjoyment, here are some of those highlights. What are you reading this weekend?


On Product Management…
Become a spectacle of direction.


On Starting Up…
Drive your health.


On Modular Innovation…
Relate to those in the know.


On Design & Product Experience…
Look, but don’t touch.


Have a great weekend!

Jeremy Horn
The Product Guy


From Seeing that Customer Experience to Scaling Twitter

Every week I read thousands of blog posts. For your weekend enjoyment, here are some of those highlights.  What are you reading this weekend?


On Starting Up…
Optimize down your messaging by asking the right essential questions.


On Design & Product Experience…
Learn how to see that customer experience.


On Modular Innovation…
Twitter still testing the challenges of scaling Modular Innovation.


Have a great weekend!

Jeremy Horn
The Product Guy

jQuery Plugin: Give Your Characters a NobleCount

jquerylogo256_thumb[1] NobleCount… for a more ‘proper’ count of the characters remaining.


A very common requirement with many of the more social products of the various companies I work with is the dynamic display of the number of characters remaining in a textarea, Twitter-style. When implemented, every one of these companies either developed a simple solution in-house or found a re-usable front-end plugin online. Most common, implemented within these products, and of all I could find open-sourced online, were sources lacking customization and/or, almost universally, lacking the desired user experience – updating the character count AFTER all or most of the user’s typing had ceased.

As a result, and also in my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to …

  • provide non-delayed, real-time character counts,
  • enable easy to customize visual behaviors, and
  • permit event and DOM hooks for the savvy with more advanced character counting needs.

While there are other similar tools out there, none adequately met my goals. Therefore, I created the jQuery NobleCount plugin.


NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

$('#textfield2').NobleCount('#characters_remaining2', { / * OPTIONS * / });

As text is entered into the target text area, an object for the purpose of tracking the total number of characters remaining, defined as the maximum number of characters minus the current total number of characters within the text entry object, is updated – storing that information visually and/or within the DOM as an HTML 5 compliant data-* attribute.

Events and CSS class alterations, if defined, are triggered based on current user interaction with the target text entry object as well as the current state (positive or negative) of the character remaining value.


	<textarea id='test1'></textarea>
	<span id='count1'></span> characters remaining remaining


To properly initialize, both the text entry object and the object that will store the total number of characters remaining must exist and be passed to NobleCount.


Both TEXT_ENTRY_OBJECT and CHARACTERS_REMAINING_OBJECT must be specified and valid.

Upon successful initialization, all appropriate events and classes are applied to the CHARACTERS_REMAINING_OBJECT, including the storage visually (if not disabled) or only in the DOM (if enabled) of the integer value representing the number of characters remaining.

The target maximum number of characters (max_chars) are determined by the following

precedence rules….

If max_chars passed via constructor
max_chars = max_chars passed
else if number exists within characters_remaining object and number > 0
max_chars = number within the text() of CHARACTERS_REMAINING_OBJECT
else use NobleCount’s default max_chars

Also note that within the NobleCount context…

NEGATIVE is defined as Integers < 0
POSITIVE is defined as Integers >= 0 [on_positive will fire when char_rem == 0]


By default, the maximum number of characters is set to 140 (à la Twitter), a negative number of characters remaining is permitted, and no events, classes, or DOM attribute modifiers are enabled.

To change these settings, they can either be accessed directly…

$.fn.NobleCount.settings.max_chars = 40;

… or at the time of initialization…

$(t_obj).NobleCount(c_obj, {max_chars:100});

The default settings data structure is…

$.fn.NobleCount.settings = {

on_negative: null,
on_positive: null,
on_update: null,
max_chars: 140,
block_negative: false,
cloak: false,
in_dom: false


The parameters are defined (and all can be overridden) thus…


  • class (STRING) or FUNCTION that is applied/called when characters remaining is negative IF DEFINED
  • on_postitive class, if defined, is removed when on_negative event triggers


  • class (STRING) or FUNCTION that is applied/called when characters remaining is positive IF DEFINED
  • on_negative class, if defined, is removed when on_positive event triggers


  • FUNCTION that is called when characters remaining changes


  • target maximum number of characters


  • if TRUE, then all attempts are made to block entering more than max_characters
  • if FALSE [default], text area will let individual entering the text to exceed max_chars limit (characters remaining can become negative)
  • not effective against user pasting in blocks of text that exceed the max_chars value


  • if TRUE, then no visual updates of characters remaining object (c_obj) will occur
  • if FALSE [default], then the text within c_obj is constantly updated to represent the total number of characters remaining until the max_chars limit has been reached
  • note, this does not have any effect on the char_rem value returned via any event callbacks


  • if TRUE and cloak is ALSO TRUE, then the number of characters remaining are stored as the attribute of c_obj named ‘data-noblecount’
  • NOTE: if enabled, due to constant updating of a DOM element attribute, user experience can appear sluggish while the individual is modifying the text entry object (t_obj)

Settings example:

settings =
		on_negative: 'go_red',
		on_positive: 'go_green',
		max_chars: 25,
		on_update: function(t_obj, char_area, c_settings, char_rem){
			if ((char_rem % 10) == 0) {
				char_area.css('font-weight', 'bold');
				char_area.css('font-size', '300%');
			} else {
				char_area.css('font-weight', 'normal');
				char_area.css('font-size', '100%');

Any callback functions assigned to any of the available events are passed the following parameters: (t_obj, char_area, c_settings, char_rem)


  • text entry object


  • characters remaining object


  • result of the options passed into NobleCount at the time of initialization merged with the default options

Having custom function append their own data to c_settings is also a great way to pass in and remember other state information that will be needed upon the triggering of NobleCount events.


  • integer representation of the total number of characters remaining resulting from the calculated difference between the target maximum number of characters and the current number of characters currently within t_obj

Get It

You can download NobleCount, dual licensed under GPL and MIT, from…

jQuery Repository

Public Clone URL: git://



Status updates can be found here, jQuery NobleCount.
If you find this useful, or have any questions, ideas, or issues, leave a comment.


Jeremy Horn
The Product Guy

From Debating Stack Overflow to Re-designing Janko

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


On Starting Up…
Questioning the value-add of venture capital, from 37Signals to Stack Overflow.


On Design & Product Experience…
The agile processes behind the re-design of Janko.


On Modular Innovation…
Twitter… Is it the glue of Modular Innovation?


What are you reading this weekend?

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Furl Reddit Google Add to Mixx!

From the Dissipation of the Tag Cloud to Twitter Ad MI

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


On Starting Up…
Learn from the warped mind of the dysfunctional leader.


On Design & Product Experience…
On the imminent demise of the tag cloud experience.


On Modular Innovation…
Modular Innovation in Twitter advertising.


Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon 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.


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.

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

Dec 14

sms service unavailable

Dec 8

unplanned downtime

Dec 7

unplanned downtime

Dec 6

high rate of failwhales


Nov 30

Unplanned downtime

high error rate; tmp disabled list feature

Nov 23

elevated error rate

Nov 11

high number of errors

Nov 6

elevated errors


Oct 21

elevated error rate

Oct 18

network connectivity problems

Oct 13

account lockouts after username/pw change

Oct 12

errors and inability to tweet

Oct 7

Unplanned downtime


Sept 10

site slowness

Sept 9

secure connection failed issues


August 24

unexpected service interruption

August 16

Oauth and API problems

August 15

unexpected downtime

August 11

Site outage

August 6

Site is down

DOS attack

August 2

Search Down

problem coming from migrating data centers


July 10

site latency


July 5

restoring accidentially suspended accounts


June 15


problem w/ maintenance by provider


May 30

unscheduled downtime

fatal software error

May 28

unable to create new accounts

captcha problem

May 27

site latency

May 27

Unplanned downtime

May 22

search down

May 21

robot errors

May 20

user search unavailable

May 14

unplanned downtime

May 8

latency issues

resulting from a scheduled site maintenance


Apr 28

elevated error rate

fail whales

Apr 13

slow load times and high error rates

Apr 9

high latency

also fb not updating

Apr 7

high site errors; downtime/load issues

Apr 6

maintenance (no advance warning); downtime

Apr 6

errors; downtime

fail whales, robot pages; missing tweets

Apr 3

errors; downtime

fail whales, robot pages


Mar 16

unplanned maintenance

widespread slowness

Mar 4

problems logging in

Mar 2

power failure

degraded performance


Feb 18

latency issues

very long load times

Feb 14


db problem

Feb 11

Site down

db problem


Jan 20

site slow

slow load times

Jan 16


notified user of potential for more downtime


Dec 17

timeline delays and missing tweets

Dec 10

problem posting tweets to FB

problem resulting from FB latency issues


Nov 5

missing mentions


Oct 28

no dmsg emails

Oct 15

timelines 0.5h behind

Oct 8

timeline delays



Sept 16

missing tweets


Sept 14

missing tweets for some

Sept 4

short delivery delays

Sept 2

some tweets & followings delayed

small subset?


August 12

timeline delays


July 28

missing followers for new users


June 29

viewing other people followers/following disabled


June 16

unable to find new users

June 12

search delay

new tweets not being picked up by search

June 3

delayed followings

resulting from spam attack


May 13

timeline delays

hardware failure

May 4

search running behind

search not processing real-time


Apr 22

data inconsistencies


[still being fixed on the 27th]

Apr 22

missing user images

Apr 14

delayed search results

Apr 10

missing updates

Apr 6

missing avatars and dmsgs

Apr 2

not finding self in people search



Mar 18

missing tweets

db inconsistency, etc.

Mar 16

Delays on following and dmsgs

Mar 12

missing updates & actions

Mar 11


data inconsistencies (msg, counts, other data)

Mar 9

inbound sms delay


Feb 6

inconsistent follower/following counts

Feb 6

txt msg posting delays

problem w/ provider

Feb 2

Missing updates

Feb 2

missing self

new users missing from search


Jan 30

follower/following counts wrong

due to replication lag

Jan 19

slow search

search fell behind realtime due to maintenance

Jan 8

Delivery delays

tweets slow to appear in the timeline

Jan 6

Delivery delays

tweets slow to appear in the timeline


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.


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 Furl Reddit Google Add to Mixx!

The Product Guy’s Weekend Reading (April 24, 2009)

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


On Starting Up…
Advice on starting a new business in tough economic times.


On Design & Product Experience…
Learn about the art of seduction through product user experience.


On Modular Innovation…
A look at how the many tiny blocks that make up such Modular Innovations as Twitter are spurring further Modular Innovation.


Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Furl Reddit Magnolia Google Add to Mixx!

Facebook says Focus

facebook logo (Part 1 of 2) The new Facebook is coming. Facebook, the product that brought a whole new meaning to information and application overload, is about to release their new Facebook vision, one with focus.

After adjusting to (and it took a few days of frequent interaction) the re-worked and refined Facebook experience, 2 themes stood out above all others, namely..

  • Encouraging greater communications and sharing
  • Discouraging “excessive” application installation and usage

In Part 1 let’s…

Focus on Communicating

The new user experience is evident from the very moment of logging-in. Perhaps the very first thing that all users will now notice, and are driven to notice, is the new action area on their homepage.


Whenever a user returns to Facebook, they are brought to the homepage and, immediately presented with quick actions for communicating and sharing. This is a concept that is altogether absent from today’s currently available experience.


Clicking on any of the options within this new action region jumps the user directly to their Profile page, with the prompt for the desired content automatically displayed. This is direct, quick & easy.


The Profile page, like the Home page, has also been revamped to encourage and facilitate communications and sharing of user generated content (UGC) – from status to links and photos, and more.


The user’s attention is focused on the main component of the page, the Wall; which has been improved with rapidly applicable filters (all posts, my posts, other people’s posts) and easy to use settings.



Facebook‘s next generation presents a revived and clear focus on communications. Much of this new functionality reverberates considerably with the capabilities inherent to newer services, most apparently, Twitter and Friendfeed. The new communications emphases will assuredly drive more people to the micro-exchanges of status and the like.

Interestingly, if this implementation had been Facebook‘s original implementation, maybe there would be no Twitter or Friendfeed. But this is not the case. This newer implementation, not yet the default for Facebook, did not come first. Twitter and Facebook (and other similar online products) fulfilled the need, filling the micro-communication and micro-sharing void that was present.

While the improvement in Facebook represents a very positive step forward, a very nice addition, Facebook is now following some well established alternatives. For these improved communications to maximize along the path of user experience, they will need to employ Modular Innovation. It will be a mistake if they choose to take the path of challenging the Twitters and Friendfeeds, instead of embracing them. Everyone will benefit from improved integration and 3rd-party data exchange capabilities. For example, allowing users and products 2-way integration and interaction, permitting the use of either Twitter (or Friendfeed) or Facebook to not just be able to import data, but also export and share data between the products, would provide a seamless online experience for the user, allowing the user to check for updates and post updates from either platform — benefiting both the fans and companies of Facebook and Twitter (and other products) while simultaneously strengthening the product-product and product-user relationships.

In Focus

More and more people, every day, are trying out the new Facebook, especially the new communications experience. Will the new product, the new Facebook, succeed in increasing user communication and interaction or will the result prove to be a blurry jumble of ideas?

Check back next week as we look further into the new Facebook, in the second part of this 2 part series about the new Facebook experience, and explore what these changes mean for the users, as well as everyone else, who use, experience and benefit from Facebook.


Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Furl Reddit Magnolia Google Add to Mixx!

The Product Guy’s Weekend Reading (July 4, 2008)

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

On Starting Up…
A look into the financing decision between venture capital, angels and bootstrapping.

On Design & Product Experience…
A peek into the minds of the experience designers of some of the most popular web sites. See what the precursor, paper sketches of mySociety, twitter, and more.

On Modular Innovation…
An in depth look at the characteristics of Modular Innovation and how they are complementing the solid foundation of the next generation of successful online products.

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Furl Reddit Magnolia Google Add to Mixx!

The Product Guy’s Weekend Reading (May 30, 2008)

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

On Starting Up…
Article exploring which is better: (a) large user base or (b) solid business.

On Design & Product Experience…
For a solid User eXperience to exist there must be trust; you must demonstrate credibility. Joshua explores one of those credibility bolstering areas: showing signs of life.

On Modular Innovation…
A cornerstone of Modular Innovation is Interoperability (e.g. via API’s). Without Interoperability, today’s new product, or start-up, faces increasing challenges to consumer acceptance, adoption, and retention.

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Furl Reddit Magnolia Google Add to Mixx!