Just another WordPress.com site

Labeling Hodgepodges in the Static and Interactive Environments


Static Labeling

Cover and excerpt from Visual Explanations, by Edward R. Tufte
My interests as they are, you could probably easily guess that I am a big fan of Edward Tufte.  "Good design is clear thinking made visible." -a mantra here at IDV Solutions.
The image on the left (a gathering of the American Astronomical Society in 1950), from Tufte’s Visual Explanations, cleverly uses hand drawn and numbered heads as an intermediary code that links individuals in the image with their typed names.
Some other quotable person once said, "Talent imitates, but genius steals" so when the staff of IDV Solutions assembled for a frigid impromptu photo last February, I thought it would be fitting to annotate it in the spirit of Tufte.

Here is my rendition of the IDV Solutions staff picture complete with trace outlines of folks’ profiles.  I will tell you, I did look at my coworkers a little differently for a while after tracing the various subtle contours of their craniums (and does my hairline really go back that far??).

This sort of labeling offset works in situations like this because the hodgepodge randomness of the content does not lend itself well to our matrix-y sensibilities of reading lists.

Interactive Labeling

In the interactive version of this staff photo, navigational prompting by the user can correlate the visual and the textual.  For example, when the user rolls over the text name, that employee will be highlighted in the photo (in this IDV’s Product Manager, Scott Caulk).  Likewise, rolling over folks in the image will highlight their names.  I suppose there could be a hovering tooltip near Scott’s head on rollover -so many options.  Interaction in this case replaces the intermediary code (my hand-drawn numbered heads).  Less time is spent "decoding" and more time is spent understanding.  Also, the real estate that would have been occupied by the intermediary code can be allocated to more juicy things (like a bigger map!).

Labeling in Composite Applications

Often, perhaps more often than not, the features to be labeled in a composite application are many, and barring complex placement and orientation algorithms, the result will typically look like a thicket.  A great solution is the use of a responsive, user-driven, tooltip that initiates on rollover (not click) and provides the would-have-been-a-label content on demand rather than in an all-at-once fire hose style.  There is an opportunity cost to blanketly filling the interface with labeling; a benefit of the interactive tooltip is it recoups that cost and can afford to show a little more information than just, say, name.

Users navigate data by scent.  That is, they behave like predators actively scanning for information.  In the image below, left, the all at once nature of the labeling results in an interface that is largely indecipherable; the metaphor’s equivalent of a disorienting herd of zebras.  On the right, the user can be certain which label is associated with which feature.  The rollover tooltip drives, via an invited preview, the action of clicking a feature for additional details and provides a smoother more intuitive path for deeper data diving.


Then again, sometimes it is nice just to show feature labels right on the map without needing to tooltip over them -but it depends on how many.  Ours is a world of variables.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com


2 responses

  1. Ben

    With regard to Tufte and maps, you might appreciate this article.

    September 12, 2007 at 2:25 pm

  2. Unknown

    asus a32-a8 battery
    asus a8 battery

    asus z99 battery
    asus m3000 battery
    asus m3n battery
    asus m3000n battery
    asus m3 battery
    asus a42-m6 battery
    asus m6n battery
    asus m67 battery
    asus m67n battery

    asus m68 battery
    asus m68n battery
    asus m6000 battery
    asus a42-w1 battery
    asus w1 battery
    asus w1g battery
    asus w1v battery
    asus w1000 battery
    asus w1000n battery

    asus w1000g battery
    asus a42-w3 battery
    asus w3a battery
    asus w3n battery
    asus w3v battery
    asus w3000a battery
    asus w3000 battery
    asus w3000v battery
    asus a31-s5 battery

    asus a32-s5 battery
    asus s52n battery
    asus s5000 battery
    asus s5200n battery
    asus s5n battery
    asus 90-naa1b1000 battery
    asus s2691061 battery
    asus a42-v6 battery
    asus a32-u5 battery

    asus u5f

    October 13, 2008 at 4:32 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s