The Story:System Spectrum
Last week, Bloomberg published What Is Code? a magnum opus by Paul Ford. Meticulously crafted in both prose and interactives, Ford opens the curtain on how code and computing impact our lives on a daily basis. Impressively, the piece is accessible for the layman while engaging for an engineer. It’s not a short journey through the entire computing stack, and What is Code? clocks in at 38,000 words. But it’s well worth the dozens of minutes it takes to read through it all.
While the writing is delightful, perhaps the greater accomplishment by Ford and the Bloomberg web team is the beautifully interwoven story-telling components. Indeed, to my eyes What is Code? hits a new peak in an emerging trend called Explorable Explanations.
Explorables thrive where words cannot when communicating complex ideas and systems. Interactive widgets and pokable, proddable graphics encourage the reader — user? learner? explorer? — to discover the nuances of a system and land at insights themselves through play. These insights into emergent systematic behavior resonate in a way that purely textual descriptions often cannot.
“I hear and I forget. I see and I remember. I do and I understand.” — Confucius
As explorables become more common and we begin to better leverage the capabilities of computers in our storytelling and journalism, an interesting spectrum will emerge. No two explorables are alike, and no two interactive news articles, infographics or textbooks have the exact same ratio of text to widgets, or of story to system. As a framework for understanding this new kind of digitally innovative content, I have begun thinking about articles, explorables and media of all kinds along the Story:System Spectrum.
Innovative pieces like the New York Times’ Snowfall showed us that there is a wide and dynamic range available to us for content on the web, from plain text to rich and immersive experience. But we haven’t completely figured out how to consistently dial in on the right kind of presentation for each piece of content. The Story:System Spectrum is my attempt to create a structure into which different kinds of web-based narratives can be placed, and a heuristic for where a particular story should fit in.
Stories
Let’s begin with a wonderful text-only piece, also from Paul Ford. Originally a commencement speech at the School of Visual Arts in NYC, 10 Timeframes is a powerful exhortation to designers to consider the time that people spend interacting with the software and products they build — to treat each users’ every heartbeat as precious.
It’s hard for me to imagine interactive content improving this piece — text-only is the perfect place on the Story:System Spectrum for 10 Timeframes. Anything adjacent to the text would simply distract from the crisp, precise words of a great speaker and writer.
Similarly eloquent but much less concise is another personal favorite, Roger Federer as Religious Experience by David Foster Wallace.
Two paragraphs in, Wallace articulates what it means to watch Federer at his peak so well that I can close my eyes and envision a Federer Moment from my couch with crystal clarity.
…and what Federer now does is somehow instantly reverse thrust and sort of skip backward three or four steps, impossibly fast, to hit a forehand out of his backhand corner, all his weight moving backward, and the forehand is a topspin screamer down the line past Agassi at net, who lunges for it but the ball’s past him, and it flies straight down the sideline and lands exactly in the deuce corner of Agassi’s side, a winner — Federer’s still dancing backward as it lands. And there’s that familiar little second of shocked silence from the New York crowd before it erupts, and John McEnroe with his color man’s headset on TV says (mostly to himself, it sounds like), “How do you hit a winner from that position?” And he’s right: given Agassi’s position and world-class quickness, Federer had to send that ball down a two-inch pipe of space in order to pass him, which he did, moving backwards, with no setup time and none of his weight behind the shot. It was impossible. It was like something out of “The Matrix.” I don’t know what-all sounds were involved, but my spouse says she hurried in and there was popcorn all over the couch and I was down on one knee and my eyeballs looked like novelty-shop eyeballs.
Roger Federer as Religious Experience presents an interesting wrinkle that 10 Timeframes does not. While I can picture a Federer Moment in my mind’s eye, technology could just as easily show me a video of his breathtaking highlights embedded within the page. Not as a substitute, but as a complement to Wallace’s well-crafted description. In fact, if this article were published today instead of in 2006, I’m confident those video clips would be there.
As for where this article should fall on the spectrum, I’m torn — there is merit in restraint. While Snowfall broke ground, it has been criticized in web design circles for overreaching with extraneous content that distracted from what was Pulitzer-caliber reporting in its own right.
In sussing out how interactive or graphic-laden an article should be, I propose a simple law. Keep your presentation as simple as possible, but no simpler. You need a concrete reason to move to the right on the Story:System Spectrum — a concept, idea or system that would be explained better with rich media or interactivity. The consensus seems to be that Snowfall went too far and landed at distraction instead of complement. Roger Federer? Perhaps it doesn’t go quite far enough.
“Everything should be made as simple as possible, but not simpler.” — Albert Einstein
The Fuzzy Middle
Ben Thompson is one of my favorite independent writers — a savvy technologist and strategist who runs his own one-man publication Stratechery. Thompson’s posts are often filled with illustrations that are crucial to understanding complex technical issues or thorny competitive landscapes. There are many great Stratechery posts to point to, but Thompson’s Social/Communications Map is a good example of his skill with both words and visuals.
We are moving just slightly away from pure text — sure, Ben could tell a compelling story about his Social/Communications Map concept without visual aids, but they make the concept much more accessible. The visuals support the story in a way that yet more plain text could not.
Much of what a site like FiveThirtyEight does is similar. There is a narrative and a point of view, which are primarily motivated through the text. But key data tables or charts are included to illustrate trends or provide additional context beyond that which can be efficiently communicated in prose. Note that while there are charts and data, they aren’t interactive or easily extracted as live data by the reader — rather, they are images of data tables and .jpgs of charts. Easy to share on Twitter or download for future reference, but hard to drill into or explore.
This piece on Hillary Clinton’s campaign engine revving up is a perfect example of the FiveThirtyEight style. It is data-rich, it is informative and well-written — and I find myself wishing I could explore the data behind each chart, manipulate the parameters and understand some more nuance than can be found in the image. The Hillary Clinton Steamroller Rumbles To Life is closer to traditional print-oriented journalism than a digitally native explorable.
It’s worth noting that FiveThirtyEight does publish richly immersive explorables in addition to more traditional pieces. Without any insider knowledge, I expect the decision about how interactive this piece should be came down not to finding the best way to tell a data-driven story, but rather to dollars and cents. Designing and developing explorables is still costly and time-intensive — especially with the trend in such a nascent state, most interactive components are built as one-offs. Hopefully as the skills needed to build explorables become more common and as reusable technologies emerge, where to land your content on the Story:System Spectrum will become more a decision about the quality of communication and less about the bottom line.
Moving further away from pure text and towards more interactive visual content comes Revenge of the Nerds, a short piece from the Economist on which college degrees give the best long-term financial returns. There is a quick blurb of text, but the primary thrust of the post is the interactive chart.
This is a perfect example of adding a touch of interactivity to make a complex chart much more understandable. In the initial state, the reader can see rough trends in the scatterplot, but the density of data makes it difficult to tease out any details. The Economist solves this problem by letting the reader focus on one category of degree at a time, bringing the differences across degree categories into stark contrast.
The interactivity is built simply — the buttons swap out prebuilt images of each view of the data, rather than using a Javascript library like d3.js to drive richer interactivity. Again, perhaps this chart could stand to tilt slightly further towards an explorable System approach. But within the scope of today’s tools, I think the Economist solved their needs excellently with a simple, but not too simple, approach.
These limitations around reuse, technical challenges and cost are being broken down aggressively by a number of interesting startups. One promising young company is Silk, who provides journalists and analysts with tools to find and analyze data, visualize it, and then embed that data into any 3rd-party site. For example, the University of Maryland’s student newspaper The Diamondback used Silk to present salary data they compiled for professors and employees of the university.
What sets Silk apart from most other solutions in the market is the ability for readers to interact with the chart, find something they’d like to know more about and click through to explore the live, complete data set in Silk’s analysis UI.
This transparency promotes accountability and accurate representations of the stories we find in data, and for The Diamondback it allows them to deliver their compiled data to any reader who wants to explore it further. As a comparison point — imagine you’d like to break computer scientists and mathematicians into two different groups in the Economist chart above. With prerendered images, that’s a non-starter for the reader. With Silk, it is easy to dive in and explore.
Of course, interactive data analysis is far from the only way to enrich an article that drifts to the right along the Story:System Spectrum. A Word is Worth a Thousand Vectors is a post from the engineering team at Stitch Fix, a data-driven clothing company, exploring how natural language processing helps power their suggestion engine for clothing items.
For those unfamiliar with NLP, it can be an incredibly difficult domain to comprehend, even for those familiar with statistics and computer science. In explaining the popular word2vec language processing algorithm, the Stitch Fix team leans on clever animated .gifs that visualize the underpinnings of the system. The primary driver remains text, but when a support is needed, a static graphic won’t suffice — the moving vectors and interactive visualized results of their analysis communicate more than a picture ever could.
Stitch Fix is not alone in using animation to complement and extend beyond the scope of what they can communicate clearly in prose. In Visualizing Algorithms, one of the first articles I found that fits the Explorable Explanation descriptor, Mike Bostock visualizes four different types of algorithms: sampling, shuffling, sorting and maze generation.
Originally presented as a talk at Eyeo 2014, Bostock explicitly drives at the value of watching a complex process unfold, and observing the internal state of an algorithm in motion. The interplay between text, code samples and playable/pausable animations resonates — everyone can grasp the difference between multiple sampling algorithms when presented so clearly and punctuated with visually engaging sampled versions of Starry Night.
“Visualization is more than a tool for finding patterns in data. Visualization leverages the human visual system to augment human intellect: we can use it to better understand these important abstract processes…” —Mike Bostock
All of which brings us back to What is Code?. What makes it so effective is the combination of everything we’ve seen so far — narrative storytelling, technical writing, video, animation, games, quizzes, explorable systems and more. What is Code? gets its positioning on the Story:System Spectrum just right — it would be a lesser piece without a playable exploration of how logic gates work, and it would be less relatable without the narrative arc Ford uses to frame why knowing the basics of code is so important.
Systems
While I think What is Code? landed at the perfect balance for its purpose, it isn’t at the end of the spectrum. We can move further still towards pure exploration and interactivity. Parable of the Polygons by Nicky Case, published earlier this year fits the bill. An excellent indie game developer, Case has been a key driver of the Exploration Explanations movement. Parable of the Polygons is the story of “how harmless choices can make a harmful world,” and it perfectly illustrates how bringing fun game mechanics to the table can help people wrap their heads around complex social issues like segregation.
Based off of Thomas Schelling’s famous 1971 paper Dynamic Models of Segregation, Parable takes the reader on a journey from simple toy models to robust systems with many variables. But Cases’s deft touch makes each additional layer of complexity easily understood, and by the end of the piece it is hard to argue with the conclusion that some small changes in our behavior would have a major impact on the lives of those living around us.
In addition to Schelling’s research, Case credits Bret Victor as a major inspiration for explorable explanations— in fact, the very name comes from the title of a seminal Victor piece whose DNA is easy to find in much of the interactive work landing online today. Bret’s entire corpus of work (Magic Ink, Up and Down the Ladder of Abstraction, Stop Drawing Dead Fish) has been hugely influential in my thinking around the Story:System Spectrum and merits a full post of its own to cover well. Suffice it to say that his work ranges from end to end of the spectrum, always tuned to just the right frequency.
Finally we’ve arrived at the polar opposite of 10 Timeframes — Is It Better to Rent or Buy? from the wonderful folks at The Upshot (which at the time included Mike Bostock).
The most popular article from The Upshot in 2014 is a clear example of a system, rather than a story. While there is a very short introduction and a brief explanation of the methodology, the focus is on exploring the system to help every explorer discover whether their finances dictate that they should buy a home or rent.
Here we can see the full capability of digital content and the modern web on display. Virtually every number or slider on the page can be tuned, with effects rippling out across the system. The reader can personalize the page to the utmost degree and find out the housing solution for their very specific situation. Is It Better to Rent or Buy? virtually does away with text, and it feels right to do so. Any pure text alternative would be less personal and relevant to the audience. In fact, there is a related article that ran in the print version of the Times, but it isn’t even included at this URL — it’s a separate entity that is frankly lackluster compared to the Upshot’s excellent explorable work.
“People currently think of text as information to be consumed. I want text to be used as an environment to think in.” — Bret Victor
The breadth of possibilities when creating material for the web is endless — and intimidating. Using a framework like the Story:System Spectrum can help bring clarity when faced with the thousand small decisions that go into a piece like What is Code?, 10 Timeframes or your next great idea. Remember to keep it as simple as possible but no simpler, and you won’t go wrong. Don’t distract. But if your idea can be interrogated to reveal new insights beyond those you can communicate with words, by all means build out an engaging, explorable explanation.
We are still learning how to make the best use of our digital tools, much as we had to learn how to use tools for reading on paper — page numbers, indices, tables of contents and more took time to invent and establish themselves. Will explorables be as common in the future as page numbers are today? I can’t wait to find out.
Do you build explorables? Do you wish you could? Think this spectrum is a useful framing or is it pointless? Let’s talk! Find me anytime @uptownnickbrown on Twitter.
Find more of my writing here on Medium:
Or at http://uptownnickbrown.com/:
Collected Links
- What is Code?
- 10 Timeframes
- Roger Federer as Religious Experience
- Instagram Direct, Twitter DMs, and the Social/Communications Map
- The Hillary Clinton Steamroller Rumbles To Life
- Every NBA Team by ELO
- Revenge of the Nerds
- The Diamondback’s Guide to University Salaries
- UMD Salary Guide
- A Word is Worth a Thousand Vectors
- Visualizing Algorithms / (talk)
- Augmenting Human Intellect: A Conceptual Framework
- Parable of the Polygons
- Dynamic Models of Segregation
- Explorable Explanations
- Magic Ink
- Up and Down the Ladder of Abstraction
- Stop Drawing Dead Fish
- Is it Better to Rent or Buy?
- The Most Popular Upshot Articles of 2014
