Interaction Without Interactivity

Last week I sat in on a guest lecture by Xaquín G.V., a visual editor at the New York Times. He showed a variety of interactive projects rich in hooks. One article from his time at the Guardian asked readers to create a stable coalition government by dragging and dropping political parties. Another interactive was a surprise at the end of an article about the gender pay gap, showing how much more money a man would have made than a woman in the time since the page was opened.

Screen Shot 2018-10-15 at 11.12.27 PM

Hook is an accurate term: as a reader, I immediately wanted to play with these visualizations. As a designer, I immediately wanted to make interactives like them. Unfortunately, I haven’t learned how to build interactive visualizations yet. So I started to wonder: how can I achieve a similar effect in static visualizations?

Like any good question, this one has a lot of answers. Interactivity isn’t just one thing: it accomplishes different goals in different contexts. Fortunately, Tamara Munzner’s Visualization Analysis & Design offers a framework for this problem. According to Munzner, every visualization is the product of three interlocking questions: what data is being shown, why the task is being performed, and how the information is encoded. The what depends on the specific project, but the why and how are relevant here. I addressed them by asking first why interactivity might be used, and then examining how a designer might create a static graphic to achieve the same goal.

Why: The hook

In a piece designed for communication or entertainment, interactivity is a way to get and keep the audience’s attention.

How: Personalization

One common and effective way to hook a reader is to allow the audience to personalize the graphic by finding themselves in the bigger picture. One of Xaquín’s graphics allowed readers to enter in their yearly salary to see where in Britain they could afford a house, and how far back in time they might have to go in order to do so.. Another example is this immensely popular graphic about solar eclipses, which showed how many eclipses a reader might see in their lifetime based on their birth year.

In a static graphic, speaking straight to the audience means painting in very broad strokes or embracing a very small niche. A designer can use color to pop out the data for a time or place that may be relevant to their audience. Admittedly, the personalization of living in the USA doesn’t have quite the same punch as eclipse paths based on my birth year (51 more to go!), but a sense of identity and investment with some part of a graphic can help to draw people in.

Alternately, a designer can aim for a niche audience, as Sam Potts does in “Exposed to D.&D. Early In Life”:

Screen Shot 2018-10-16 at 12.04.17 AM.png

I am not quite the target audience for this piece, since I was exposed to Dungeons & Dragons late in life, and D&D brought my closer to my now-girlfriend instead of exiling me from the Red Circle of Girls. However, I caught enough of the references to spend some time searching out my own life in the winding paths of the graphic. These references hook in readers who aren’t a perfect match for the target audience: they also draw in people who recognize a piece of it, and wonder where they might fit in a slightly foreign ecosystem.

How: A sense of movement

“Exposed to D.&D. Early in Life” encourages interaction, even if it doesn’t interact back. Actual interactives are also great at choose-your-own-adventures, with the advantage of preserving a sense of mystery for the paths not taken. On the other hand, the lack of mystery keeps me engaged  with this graphic: how do I get to “short-fiction writer” or “blogging about diagrams”? Can I do so without being called out by a flow chart from 2008?Screen Shot 2018-10-15 at 8.38.56 PM.png

A sense of movement also generates a sense of momentum: it’s difficult to look away from an object in motion before the end of its journey. I found it almost impossible not to trace my fingers over the slingshots and orbital paths of NASA’s deep space missions in this TIME graphic:

Screen Shot 2018-10-16 at 12.11.53 AM.png

(That’s just a section: the whole thing is glorious.)

How: A mystery

A striking pattern or dramatic change in data can also hook a reader. Of course, data can’t be relied upon to produce visual drama, but when it’s available, “what’s happening over there?” can be just as irresistible as “how do I fit in here?” For instance, I couldn’t look away from this graphic until I knew what caused that pervasive zig-zag in a History Flow diagram by Fernanda Viegas and Martin Wattenberg:

IMG_6051

Published in Information Graphics.

I was rewarded for my patience: the zig-zag was caused by a Wikipedia edit war about Surrealist chocolate sculptures. From an accuracy perspective, I’m not sure one editing war should have dictated the entire shape of the visualization, but it’s a hell of an attention-getter.

Why: Comprehension

How: One thing at a time

Xaquín also showed an early interactive graphic that illustrated the mechanism behind a common medication. The reader clicked through a series of short annotated animations, showing each step of the medication in action. In my experience, setting my own pace and having a chance to absorb one piece of information before moving on really helps to understand a new idea or process.

I first saw Nigel Holmes’ illustrations about the Higgs-Boson field as a series of still images with captions beneath them, laid out like a series of single-panel cartoons:

IMG_6063

Printed in Visual Journalism. Distortion comes from taking a picture of a book, not the graphic itself.

As it turns out, the graphic is actually animated (and interactive–Xaquín was involved in the project as well). However, that print version provided much of the same experience. It was half illustration, half explainer. The depictions of bare fields and falling snowflakes were incredibly striking to me: they didn’t deliver additional information, but they did give me a visual landing space so that I had time to absorb unfamiliar ideas instead of racing through the text.

Physical space and structure in still graphics may be a way to pace consumption of information and make unfamiliar ideas approachable, in much the same way that an animated interactive tour of a cell can make the abstract tangible.

Why: Search and identify

How: Well, That Depends

Thus far I’ve focused on interactivity for communication and entertainment, but that’s a narrow view. Interactive visualizations don’t need a hook when they’re used as tools for research, medical diagnostics, engineering, and so on. When the goal is to identify points of interest, explore data, and search for specific values, a hook can hinder a user by artificially narrowing the scope and focus of the visualization.

The magic of interactivity in these cases is the ability to examine fine-grained details of some part of the data, without losing access to the whole. Unfortunately, static images don’t improve their resolution upon zoom. The only way to make all the fine details of a dataset available is to make all the fine details of that dataset available all the time. The z-score tables at the back of a statistics textbook aren’t sexy, but they accomplish the task at hand.

Tables are great for finding specific individual values, but they’re difficult if the user doesn’t already know what they’re looking for. If a little bit of detail can be lost, though, capturing categorical differences through color can enable large-scale comparisons. Howard Wainer reprinted a “pantyhose” chart in Picturing the Uncertain World that facilitates mass comparisons between standardized math scores in different states. The table should be read in vertical columns, with the different shades of gray indicating which states have statistically different results from each other.

IMG_6060

Originally from the National Compendium for the NAEP 1992 Mathematics Assessment for the Nation and the State

In the case of industrial interactivity, the replacement for an interactive computer system may very well be a tome of notable comparisons, followed by a reference section of tables (and also demonstrating that any sufficiently long blog post will eventually re-invent the book). However, there’s no one-size-fits all solution: if interactivity isn’t an option for an exploration- or search-focused visualization, a functional static visualization will depend heavily on the specific tasks a user is trying to accomplish.

And that’s true across the board. Well, it depends isn’t limited to search, exploration, and identification. Any alternative for interactivity needs to be a bespoke solution based on the intersection of data, task, audience, and experience. This post is full of examples, not answers. The only universal prescription I can write for myself is to get into the data and see what works.

Advertisements

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