Complex Diagrams

Electoral-Vote.com is an excellent and popular site for tracking polls for president on a state by state basis. One of the nice features is a historical graph that shows the changing number of electoral votes for each candidate over the election season.

Currently it looks something like this:

(click to see the original on electoral-vote.com)

Just for fun, I decided to see what it would look like showing the candidate totals as a single shared line. (This is similar to the epic graph representing the Senate History Timeline.)

In the revised version, the vertical axis counts votes for Obama going upward, as in the original, and votes for McCain going downward. The axis labels are color coded to reflect the candidate they represent. The color of the line reflects the candidate with more votes for that time period.

Theoretically, when the votes total line is above the 271 line, Obama is ahead; when it’s below the 271 line, McCain is ahead. However, the revision isn’t perfect, and accuracy suffers relative to the original in a few ways.

• In situations where a state (such as Florida) is tied, neither candidate is credited with the votes, so the total number fluctuates. This is not handled well in the revision.

• It’s a little trickier to represent the situation when the count is very near 270 (see late April and early May in the original).
• Because the total number of electoral votes is 538, it’s impossible to use round numbers at both ends of the shared grid lines.

While not a superior solution overall, the revised version does have some merit. As a rough tool for observing trends, I think a single line is cleaner, easier to follow, and the changing colors are a little easier to tell a story with.

Should you be required to work in Visio, you may well find yourself, as I did, wishing to measure your drawing in pixels. I couldn’t figure out how do do it, though Visio does support such diverse measurements as Ciceros and Didots.

I finally found the definitive answer from Microsoft: For some types of drawings, you may want to change the measurement units to pixels. However, a pixel isn’t a unit of measurement. A pixel is just a dot on a screen and the size of the dot varies for different screens. To simulate pixels, set the measurement units to points.

Needless to say, this is not satisfying. It’s true a pixel is only an on-screen measure, and is clearly only useful for a few, obscure situations, such as when creating interface mockups, wireframes, or prototypes for software, the web, or any other sort of images meant to be viewed on a screen.

Luckily, Visio provides a set of features that allow a fairly simple, two step work-around. Warning: doing this on existing Visio documents may severely distort your existing drawings. I suggest working on duplicate files, not originals.

Step One Open the File > Page Setup menu and select the Page Properties tab. In the Measurement units field select Picas.

Step Two In the same dialog box, select the Drawing Scale tab. Select the Custom Scale radio button and set the ratio to 1 p = 16 p.

That’s it. Click OK and you’re all set to go.

Why it works Picas are 6 to the inch. By setting the ratio at 1:16, Visio presents a diagram at 96 picas per inch, the same as the Windows standard of 96 pixels per inch. You could set an appropriate ratio with any of the available units, but it works well with picas, and I find it useful that all units are labeled as p.

Here is a Visio file template with the units set properly.

The Harvard Business Review has published an article by researchers from IBM’s Many Eyes project, discussing the benefits of good information visualization.

A choice quote:
Our research has found that the compelling presentation of data through visualization’s advanced techniques generates a surprising volume of impassioned conversations… That level of engagement could foster the kind of grassroots innovation CEOs dream of.

Hopefully this will help increase corporate interest in information visualization.

(via Information Design Watch)

This is the talk I gave at Ignite Seattle 5, February 19, 2008. Note that the Ignite format requires presenting 20 slides in 5 minutes, with the slides advancing every 15 seconds whether the presenter is ready or not. The original name for this format was “Ask Later.”

Zillow has posted a series of excellent diagrams which show relative changes in assorted housing markets, broken down by segment. Their diagrams are very clear and allow fairly quick access to a lot of good information. Please go explore there, and then come back here for my commentary.

By my count, there are eight different axes of information represented for each city or market:

1. lower bound of each market
2. upper bound of each market
3. overall span of each market
4. lower bound of each segment
5. upper bound of each segment
6. overall span of each segment
7. direction of change for each segment
8. magnitude of change for each segment

The first six of these axes are a natural byproduct of using the (horizontal) stacked bar chart format that they’ve chosen. Given how bad bar charts typically are (N.B. Excel), they did a great job with the shapes, colors, and generally minimalist approach. They’re really quite good.

To fully optimize the diagrams, I’d make a few minor changes.

Sorting the markets alphabetically makes it easy to find specific markets by name, but difficult to compare them. Regional groupings might be more useful. In an ideal world, the user could select a few markets by name and compare just those selected few.

The weakest point, in my opinion, is the ambiguity introduced by the arrows. I understand that they are meant to represent trends, not specific quantities. However, they can easily be made a little more clear.

Judging from the legend, the length of the shaft of the arrow represents the actual quantity, while the head encodes direction (redundantly with position and color). In some cases, such as our hometown of Seattle, the heads are ponderously large compared to the length of the shaft, making anything more than a cursory comparison impossible.

Removing the heads and using rectangular bars would make it easier to compare values at a glance. If we wanted to get more specific, the percent change per segment could be displayed within the segment oval, in red or green text.

While not quite as dramatic, I think these changes make the diagram more useful, without reducing their accessibility.

Finally, and this is a minor point, the legend states that “the top and bottom groups have been cut for better visualization.” This is entirely reasonable, but it made me curious about where they chose to trim those groupings. It would be nice to know what fraction of the actual number of homes are represented in the high- and low-end bars.

I was just introduced to the Song Chart group group on Flickr. It’s full of visualizations of song lyrics. Many are clever, many are hilarious. This is my contribution.

Jeff Parks led a discussion about the conference and visual thinking in industry among a few of us at VizThink in January.

It’s now posted at Boxes and Arrows. He notes that the iTunes version lets you jump among the chapters using the Chapters menu.

Here’s a podcast/webinar of me being interviewed by Tom Crawford, who runs the VizThink conference. He asked some good questions. It was a lot of fun.

There’s a video version showing the example diagrams, as well as an audio-only version.

This Tuesday, February 19th, I’ll be one of several presenters at Ignite Seattle. Come if you can; it will be a good time.

The introduction of the iPhone heralded the mainstreaming of a new interface paradigm. Features and form factor aside, the multi-touch interface represents the first major interface change since the introduction of the Macintosh GUI in 1984, and a notable shift in the right direction.

Twenty years ago, Donald Norman described the relationship between a control and its effect as mapping. “Natural mapping, by which I mean taking advantage of physical analogies and cultural standards, leads to immediate understanding.” (Norman, D. 1990. The Design of Everyday Things. Doubleday/Currency. P23.) Unfortunately, when there is not a “natural mapping,” understanding is anything but immediate.

Technology interfaces are difficult to design and learn because interfaces have moved further and further away from natural mappings. When the tool in question is an axe or a spoon, the relationship between the control and its effect is clear and direct. Similarly, for simple mechanical tools such as food grinders, adjustable wrenches, latches, and the like, it’s not too difficult to divine the function with no documentation. The interface is inseparable from the tool or device, and the mapping is strong.

Electrical devices are a little trickier. The function of simple electric tools with very few controls, such as power drills, can get be figured out, even with no labels. Anything more complex, say, a multi-speed blender, benefits from having a clear label on each button. The reason is that when the interface for a device reaches that level of removal from the function, there is no longer a truly natural mapping between the control and effect.

When we move from electrical devices to electronic, labels and documentation are necessary to make the interface understandable. A microwave or VCR with no labels on the buttons would be totally unusable. There are simply no “natural” mapping conventions for users to draw on, and it becomes more important than ever for the interface designer to do a good job at creating and conveying the interface metaphor.

Finally, at the level of virtual or information-based interfaces, the interface is completely removed from any effect it may have. This is most evident in text-based interfaces; contemporary GUIs are a fancier presentation layer but retain the same underlying problems. Playing a game, shopping, and everything else onscreen is accomplished with the same clicks. It is only by virtue of the provided context that we are able to understand what we’re doing. Consequently, when interaction designers don’t do a good job of creating metaphor, the provided context is insufficient and users get confused.

The Windows-Mouse-Pointer-based GUI, first commercialized by the Macintosh in 1984, gave us a very limited physical metaphor. The mouse allowed us to indicate the noun we wanted to do something to, and then do a verb to it. Most verbs were menu based, and a few (selecting, dragging, clicking) could be executed directly. That amounted to poking our simplistic virtual worlds with a stick through a narrow window. This limited ability to affect the virtual environment is often frustrating.

The iPhone is special and noteworthy because it takes us a step back down the path back towards the physical. Steve Jobs notes “there are no ‘verbs’” in the iPhone interface. Instead of selecting nouns and then indicating a verb, we can simply do the physical action to the virtual thing as though it were a physical thing. Gestures for scrolling, dragging, and pinch-resizing work as we’d expect. The result is an interface that toddlers learn in seconds, and experienced users are delighted by.

It’s not perfect, there are still many places where buttons and lists of options must be used, but it’s the most interesting, different, relevant change to interfaces in decades. It’s also just the first drop in a big, big bucket, evidenced by the recent introduction of the MacBook Air, which supports multi-touch and gestures on its trackpad. Gesture based interface will spread to more devices, and devices that don’t support gestures will eventually seem antiquated.

Apple made a great choice by commercially introducing a radical new interface paradigm on a finite, portable, accessible platform, and building on it from there. As a herald of the next wave of interface technology, the iPhone represents much more than the sum of its pretty parts.