Labeling Hodgepodges in the Static and Interactive Environments
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.
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.