Lately I've been thinking a lot about the role of words in explorable explanations. I'm starting to think there are simply too many of them... so naturally, I decided to write about it.
Don't get me wrong, I love words. They're great for labeling concepts and establishing connections between them. The laptop keyboard in front of me is all the proof I need for the uniquely powerful role of words in human communication!
However, I worry that the ubiquity of words and our fluency with them lets our writing slide on some important communication design standards. Explorables are largely built to address concepts that words seem to stumble over, and our nonverbal tools can reduce a long essay to a few paragraphs. But this demotion of words only increases their mandate to work efficiently and then get out of the way.
When communicating technical information, we should strive to write clear, uncluttered text in simple english with formatting tailored carefully to the other elements on the screen. In other words, we should apply the same strict design scrutiny to writing that we apply to websites, fonts, games, graphics, and code.
So what does that mean in practice? Let's look at some examples.
Here's the opening text from an early draft of District:
Alice and Bob are two friends who start a country together. Alice's favorite color is Red, but Bob's favorite color is Blue. They decide the only fair way to paint the town is by splitting it up into two halves, so each of them gets the color they like. For now, everyone is happy with this solution.
Now here's the text from the final draft:
Alice and Bob start a country.
Alice likes red. Bob likes blue.
They split the country into two districts.
For now, everyone is happy.
And the visualization these words are describing:
These drafts both communicate the same basic facts:
- This is a country.
- These colored dots are people.
- These people make decisions about their country.
- Their decisions are strictly between two choices.
- The current distribution of votes is an even split.
- This even split is a fair representation of the group.
This is a lot of information. However, the second version is broken up into chunks that are easy to lock your eyes onto, and punchy enough for your brain to swallow in one gulp. Contrast this with the first version, where each sentence flows into the next—in other words, a paragraph.
Now, a paragraph may not seem like a problem. We're quite used to paragraphs. They seem like a natural format for words. But in this context, words are supplementary to something else. That is crucial, and it means that paragraphs don't work so well here.
Consuming words in one continuous stream works great if they're alone on the page. But when your eyes have to jump back and forth between words and something else, entry and exit points become very important. Line breaks, whitespace, bold/italics/underline, and bulleted/numbered lists go a long way to provide "text handles" that are easy for your eyes to grab on to.
For text handles to do their job, the attached text needs to be as short and punchy as possible. The usual rules of clear instructive writing apply double here: simple sentence structure, minimal adjectives, and absolutely no passive voice. Sentences should fit on one line if possible, and use a maximum of one comma. This gem from Understanding Comics by Scott McCloud sums up what I think really clear technical writing is doing (but with words instead of pictures):
At this point, it might sound like I want to squeeze all the juice out of writing. But I don't! After all, here I am writing a conversational blog post. Remember that we're talking about a very specific kind of writing: supplementary text for technical explanations. The more supplementary and technical the text is, the more important these rules become.
It just so happens that this is an extremely common type of text for explorables. However, not all explorable text passages fall into this category. For an example of an explorable that makes great use of long conversational passages, let's take a look at Fireflies by Nicky Case.
In this piece, Nicky walks us through the mechanism that fireflies use to coordinate flashing. He tells us about the scientists that figured this out, lets us play with the parameters, and ties everything into a broader narrative about emergent behavior. There are images, video, and interactive widgets woven into the piece, but most of it is long passages of conversational text... and it works great!
So why do I think so many words are okay here? As I said earlier, these rules are for supplementary and technical text. In Fireflies, text is the primary communicator—it's the other stuff that's supplementary. Put simply, your brain is in "reading mode" for most of the piece, so there's a pretty minimal amount of jumping between text and other stuff.
The text is also not very technical. When there is an interface between text and images/interactivity, the concepts are very manageable. You may go back and reread a sentence or two, but your brain never has to work very hard to comprehend the connection between different representations of a concept.
Finally, I would argue that the writing actually does follow these rules whenever the text is broken by an image or widget! Even though the piece as a whole has a lot of words, it adopts a different style whenever something like an image comes up:
Notice how short and direct those sentences are? And look at those text handles! Great use of whitespace and a short numbered list. Yet once the technical description is over, the piece returns to longer, more conversational sentences.
Now let's look at an example where I think fewer words are called for. This time I'm going to pick on To Build a Better Ballot by... Nicky Case. This is one of my favorite explorables, but I do think the text needs attention from an editor. Let's look at this section from early in the piece:
The subject matter in TBABB is much more technical than Fireflies, and the interactive visualizations are doing a lot more of the explanatory work. However, the text is still quite critical to interpreting the visualizations. This makes for a lot of jumping back and forth between words and visuals, which is hard on the brain.
The 3 lines of bold text above the second visualization are great, but I would go much further. There's just too much happening in these long paragraphs that I need to keep in my head for the visualizations to make sense. I would simplify the sentence structures, add more text handles, and nix the jokes (or at least put them in hovertext to un-clutter the technical stuff).
All in all, these are both great pieces. But I think there is a clear difference in how they use words to complement their visualizations, and I had a much easier time reading Fireflies.
It can be hard to see this stuff in our own writing, especially because writing is not a primary skillset for a lot of explorable authors (it certainly isn't for me). I recommend finding an editor, ideally someone who lives and breathes written technical communication. My partner Lingxi deserves a lot of credit for the writing in District. She took a weed-whacker to several drafts of District, and I think it really improved the project.
So to sum up, here are some short declarative bullet points:
- Jumping between words and visuals is taxing
- "Text handles" help to alleviate the burden these jumps impose
- The more technical and supplementary words are, the more these rules apply
- Writing is hard. Find a good editor and listen to them!
- When in doubt, refer to Go Dog Go by P.D. Eastman:
Special thanks to Nicky Case for letting me pick apart his work.