Mimicking the physical

Many a software app has gone down the dead-end of attempting to recreate physical controls and affordances. (See the rich sub-genre of notebook apps with spiral binding and turned-up corners.) But sometimes the clarity and familiarity of a physical analog is just the thing. The key is to use it as a starting point, not to slavishly recreate the physical experience in its entirety.

A good example of this is the new audio capture app, TapeDeck. Modeled after an 80's-era cassette recorder and its collection of tapes, TapeDeck addresses a key issue in audio recording — the difficulty of distinguishing audio tracks in a visual world. Each recording is represented by a separate cassette tape, organized by date in a slide-out drawer called the Tape Box. It also gives a clear indication of state, running the tape spools in sync with the big push-button controls. Plus, it's just fun to use.

Continue reading...

Algorithm Ink: Learning by doing

Aza Raskin has released a wonderful new toy, Algorithm Ink. As he states in his introduction, it really lowers the bar to exploring the creative mathematical beauty of fractals. Aside from the images themselves, there are two things I love about this site.

First, the less-is-more UI design really lets the canvas be the focus of attention by keeping tools out of your way until you need them. Second, and more fundamentally, is the “view source” ethos and the direct manipulation of the visualization-generating code that really makes the experience compelling (if not addictive).

Here’s what happens to me: select an interesting image and watch it play out. Click open the “edit” panel to expose the surprisingly few lines of code that make it tick. See all the pretty numbers. Change one. Click “draw” and see the effects of your change. Repeat about a thousand times.

Before I realize it, I’m copy-pasting functions from other drawings, following the logic in code to reverse-engineer how an effect is generated, musing on the power of weighting the randomness of my results. Like writing HTML on the Web 1.0, I’m learning by example and trial-and-error. Sure, there’s a manual for the syntax somewhere, but the experience of seeing and affecting the code in action is so much more fun.

Seeing patterns in research findings

We’re always on the lookout for engaging ways to communicate the patterns we uncover in our research. What factors cluster into significant groups? What are relevant attributes and relationships? What trends do we see?

Shan Carter and Amanda Cox at the New York Times recently produced a fantastic interactive chart highlighting the voting patterns along several demographic factors in the Democratic primaries. (You can read more about this graphic from Shan Carter here.)

I love the idea of starting with this approach and overlaying additional factors to draw out relationships and relative importance. In the Times example, imagine the squares drawn in relative proportion to the number of delegates in play; color and saturation representing the percentage of Democratic votes in the 2004 presidential election. Combining multiple factors does complicate the visual, so care must be taken to preserve the clarity that makes it so effective.

At Cooper, we often do something similar, with behavioral variables of interview subjects plotted along major axes, combined with demographics like age, organization type and role, to paint a picture of the interrelated web that helps us make meaning of a diverse human population. We always try to walk through these visualizations with a story that ascribes meaning to the observations, but providing clients (and ourselves) with an opportunity to interact with the data in a well-curated way really emphasizes the relevant factors and helps everyone understand the patterns we use to drive decisions and take action.