1. Toy Systems
and
Taco Trucks
Case studies of effective
multimedia & interactive content
Original Client: HHMI / Tangled Bank Studios
Prepared by: John Pavlus / Pavlus OfďŹce
Updated: 12 Dec 2015âŠ
2. Introduction: Attention vs. Engagement
The most attention-grabbing interactive and multimedia
journalism of the past few years â from The New York Timesâ
Snow Fall to The National Film Board of Canadaâs One
Millionth Tower â dazzled web users (and the press) with
immersive interfaces and technically innovative formats. But
did these experiences drive sustained engagement with
the content?
The answer seems to be âno.â Few such features continue to
be regularly produced. The technical complexity of producing
them could be a limiting factor, but itâs more likely that readers
just donât ďŹnd them all that compelling in the long run.
Meanwhile, in 2014 Buzzfeed quietly introduced a new
interactive component called a âsliderâ to its already
multimedia-heavy content. The slider was nothing more than a
vertical line that, when âdraggedâ horizontally across an image
via the mouse, revealed another image âunderneathâ. No
breathless media coverage followed.
What did follow was massive engagement. Posts with the
slider garnered millions of views, and the format has been
sustainable: a year later, Buzzfeed regularly deploys the slider
not just to augment celebrity-driven clickbait, but to
enhance its explanatory and public-service journalism.
Attention does not necessarily translate to engagement.
The following case studies identify some values that do drive
sustainable engagement with interactives and multimedia.
They donât demand expensive tech or ďŹashy functionality; nor
do they encourage superďŹciality or âdumbing downâ of content.
They do require, however, some new deďŹnitions.âŠ
3. Effective Interactives as Toy Systems
Which object best ďŹts with your common understanding of the
word âinteractiveâ: a ďŹight manual or a ďŹight simulator? Both
describe the behavior of a thing (the airplane), but only the
latter does so by dynamically modeling a system so that:
⢠you can freely explore its behavior
⢠by manipulating its features
⢠and responding to its feedback.
Which system would you rather use to learn more about how
airplanes work: a NASA ďŹight simulator or an educational video
game? Both are interactive, but only the latter is a âtoyââ i.e.,
a version of the system that is:
⢠casual (easy to start/escape/resume at any point; requires
few or no special prerequisites),
⢠bounded (the ârulesâ or âedgesâ of the system are legible
and evident),
⢠forgiving (may have robust âhelpâ designed into it; errors
are easily reversible or have negligible cost).
Content that doesnât dynamically model a system isnât
meaningfully âinteractiveâ; and systems that arenât
appropriately toylike lack appeal as content. Interactives are
most effective when, like a Rubikâs Cube, they support
âmeaningful ďŹddling around.â
4. Effective Multimedia as Taco Trucks
A wise man once wrote that the web is primarily a customer
service medium. Form and content bow to context and
convenience. People may want to consume rich media online,
but what they want more is to simply avoid hassle.
And yet hassle is what most multimedia âexperiencesâ are
made of. Waiting through pre-rolls or prologues. Evaluating
ambiguous options and quality. Parsing unfamiliar layouts.
Consuming multimedia is like ordering from a fussy waiter at a
restaurant, when it should be like eating from a food truck:
⢠up-front: clear, WYSIWYG value proposition
⢠familiar: approachable & satisfying vs. âinnovativeâ
⢠cheap: low-commitment in time/attention
⢠easy: minimal interactivity, simple to sample/share/move
Like any good taco truck, successful multimedia presents a
simple but compelling offer: low stakes, high quality.
5. Case Study: TypeDrummer
WHAT IT IS: interactive music generator
WHAT IT DOES:
⢠maps electronic percussion samples to ASCII keyboard input
⢠generates real-time audio loops of percussion
⢠creates shareable URLs for audio loops
WHO MADE IT: Kyle Stetz (independent designer/developer)
WHAT WORKS:
Typedrummer is a toy system par excellence. The simple
interface is inviting and instantly understandable. The name,
illustration, and text box provide clear cues for what to do, how
to do it, and what to expect. The system is simple enough to
idly âďŹddle withâ but rich enough to generate novel patterns
and reward exploration of its deeper structure & relationships if
the user wishes to do so.
6. Case Study: TypeDrummer
âTOY SYSTEMâ VALUES
⢠Direct manipulation with dynamic feedback: supports
âmeaningful ďŹddling aroundâ
⢠Bounded: One input box dominates the user interface.
Secondary functionality is limited to two explicitly labeled
text-buttons
⢠Forgiving: Instructions make clear what the âďŹrst moveâ is.
Large type makes it easy to see and change the systemâs
state. No error messages for âbreaking the rulesâ â the
system ignores inappropriate input without interrupting any
musical feedback already in progress
⢠Casual: familiar, available controls (i.e., typing) and dynamic
response (i.e., no âexecuteâ button or mode mediating the
interactivity) mean that interaction can unfold on the ďŹy
âTACO TRUCKâ VALUES
⢠Up-front: simple layout, clearly worded
⢠Familiar: interface is just text and links
⢠Fast: plain-text URL sharing is universal & idiot-proof
⢠Cheap: loads instantly; single keystrokes generate
meaningful feedback
7. Case Study: The Ladder of Abstraction
WHAT IT IS: an interactive lesson / demonstration of how to
design effective interactive lessons / demonstrations
WHAT IT DOES:
⢠Describes fundamental concepts in the left column, and
models them with interactive examples in the right column
WHO MADE IT: Bret Victor (independent designer/developer)
WHAT WORKS:
The interactive richness of The Ladder of Abstraction is difďŹcult
to convey in a static document like this â which is precisely its
creatorâs point. Iâm including it as a counterpoint to
Typedrummer, to show how âtoy systemsâ can be deployed to
communicate powerful, subtle, complex ideas that are not
necessarily âtoylikeâ themselves: abstraction, emergence,
algorithms, simulation, data structures, and the like.
The interactive models are info-dense but always
approachable and lucid. Thoughtful details reduce the
cognitive ânoiseâ of manipulating the interface (e.g., sliders
move automatically when moused over, without requiring an
awkward âclick and dragâ gesture), making it much easier to
engage with the increasingly challenging concepts while
simultaneously reinforcing them.
8. Case Study: The Ladder of Abstraction
âTOY SYSTEMâ VALUES
⢠Explorable via direct manipulation and dynamic feedback
⢠Bounded: visualizations are conďŹned to simple, credit-card
sized cartoons that can be assessed at a glance; most
cartoons model just one parameter of the system at a time
⢠Casual: click-and-drag mouse gestures are automated,
creating effortless interactions that free up attention for
observing how the system behaves
⢠Forgiving: Clear instructions, multiple visual cues, and
synchronized animations take pains to keep the user
oriented within the system at every move; no âgetting lostâ
âTACO TRUCKâ VALUES
⢠Up-front: Simple (but well crafted) 2D graphics
⢠Familiar: skeuomorphic controls reassure the user that
theyâre in âsafe territoryâ and they wonât âbreakâ anything
⢠Easy: Small visual âchunksâ are easily scannable /
browsable; right column is not overloaded with them
⢠Cheap: Mousing over graphics âactivatesâ them; otherwise
they maintain their last state
9. Case Study: âSpecies in Piecesâ
WHAT IT IS: A visual carousel of 30 endangered species
WHAT IT DOES:
⢠Depicts each species as a cluster of animated 3D polygons
⢠Displays conservation status statistics as infographics
⢠Displays fact-sheets and short videos about each species
WHO MADE IT: Bryan James (independent designer/
developer)
WHAT DOESNâT WORK:
âSpecies in Piecesâ caught the attention of design-savvy
science nerds for its gorgeous visuals and impressive-looking
animations and infographics. But itâs not âinteractiveâ in any
meaningful way. Take away the sexy animated transitions, and
itâs basically equivalent to a Powerpoint deck. Itâs a relatively
thin content experience as well.
That said, dynamically modeling the behavior of an interesting
system was probably not âSpecies in Piecesââs goal (itâs billed
as a digital âexhibitionâ). And it does embody one of the values
of effective multimedia: itâs quick to load and very responsive.
As a gallery of animated data posters (and a demonstration of
the expressive power of CSS), itâs undeniably effective; as an
engaging and rich content experience, less so.
10. Case Study: âSpecies in Piecesâ
âTOY SYSTEMâ VALUES: not applicable
⢠âInteractivityâ limited to navigating between static content
cards and selecting menu options
âTACO TRUCKâ VALUES:
⢠Fast: can navigate quickly, and easily get âinâ and âoutâ of
content once the interface is learned
WEAKNESSES:
⢠Inscrutable interface elements
⢠All-caps body typography discourages close reading
⢠Chartjunk & difďŹcult-to-interpret infographics
11. Sidebar: Non-Interactive Multimedia
The previous case studies show that meaningfully interactive
content can be challenging to create, especially when mere
content navigation is often (and mistakenly) âpromotedâ to the
status of interactivity.
But effective multimedia doesnât even need to be
interactive. In fact, non-interactivity might be multimedia
contentâs ideal stance, as the following examples demonstrate.
⢠A science explainer that reimagines the web slideshow as a
grown-up storybook, by The New York Times
⢠A map of the Silk Road in China that matches photos and
video loops to locations as the user scrolls down the page,
by The New York Times
⢠A âďŹlmstripâ of captioned GIFs that sets up a visual metaphor
to explain your brain on drugs, by PBS NewsHour
12. Conclusion: Meaning > Marvels
Itâs easy to assume that in the overcrowded marketplace of
attention online, the best way to communicate a message is to
wrap it in the most attention-commanding package you can.
With interactive and multimedia content, this approach often
takes the form of âinnovatingâ â coming up with some novel
way to format or present information.
But while people may like this kind of novelty-driven
âinnovationâ, what they want is something different, simpler.
They want what they do online to make more sense.
The litmus test for evaluating the effectiveness of multimedia or
interactive content is not: Will they think this is cool?
But rather: Will this make what theyâre doing, right now,
make more sense?
The answers may surprise you.
Marvels
Iâm pretty ambivalent about this new strain of multimedia
journalism. ⌠These kinds of things, I think, are meant to
be marveled at more than they are meant to be read.
Khoi Vinh, former design director of NYTimes.com
Ignore the structure of current [software] designs, and ask
only, âWhy is a person using this?â Abstracted, the
answer almost always is, âTo learn.â
Bret Victor, author of âUp and Down the Ladder of Abstractionâ
Use the SLIDEY THING to investigate these doppelgängers
for yourself!
John Gara, author of BuzzFeedâs â34 Celebrities Who Share
The Same FaceââŠ