Deconstruction as Instruction

I love learning why and how things are the way they are. Perhaps I can thank PBS for satisfying my childhood curiosity with countless instructional programs like Sesame Street, 3-2-1 Contact, This Old House, The Joy of Painting, and Julia Child, just to name a few. My favorite was Mr. Rogers’ Neighborhood. When it was “Picture Picture” time, I’d scoot closer to the little TV set on my grandmother’s kitchen table and watch that ugly painting on his wall transform into a magic window that revealed the hidden origins of simple things like crayons, construction paper, and erasers. I’m certain those segments were designed to be addictive: his ever-so-patient voiceover, the rhythmic flow of activity through all those complex machines, and that mellifluous jazz music had me absolutely hooked!

“Picture Picture” segments from Mr. Rogers Neighborhood on construction paper, erasers, macaroni, and crayons.

The only thing I found even more interesting than putting things together was taking things apart. I was very good at that. With my grandfather’s screwdrivers handy, boring toys became interesting again. Once I knew how my more mechanically elaborate toys worked, after a thorough dismantling, backwards I went through the process to restore them to their former whole. Not every “operation” was a success (left over parts and lost functionality were common), but at least I developed a deeper appreciation for how exactly those funny little plastic and metal contraptions brought delight to my childhood.

There’s a point to this little trip down memory lane.

Learning is like a game with different strategies (unsurprisingly, Mr. Rogers had numerous lessons built into his factory visits). There’s the linear “how-to” approach where all the steps are spelled out from start to end. Then there’s the old “example-explanation-example,” where you see something in practice, learn what just happened, then get to carry out an example yourself based on what you learned. You also have the “learning by doing” or “osmosis” approach common in apprenticeships or internships, where you’re constantly exposed to new concepts as they’re used in context, and you have to apply them with little or no guidance under high pressure — in which case, it’s “sink or swim.” Each method has it’s pros and cons, but what makes any learning experience meaningful is the way it invites and compels the learner to want to know more.

For me, learning has always been about getting the whole story, exploring every angle, leaving no stone unturned. That’s why I’m a fan of deconstruction: breaking something whole down to its component parts to understand how and why it is the way it is.

Visual Deconstruction

One of things I enjoy most about information design is the freedom to imagine the most improbable things in order to make sizes, scales, phenomena, and comparisons abundantly clear. The cutaway illustration is among the most widely used and readily understandable methods of visual deconstruction (variants include ghosted and exploded-view illustrations). Part fact, part fantasy, a well-done cutaway affords the viewer x-ray vision into a vastly complex system they otherwise couldn’t understand. Consider these examples by a few of the masters of the form:

Leonardo da Vinci’s anatomical drawings:

Left: Study of Brain Physiology, c. 1508. Right: The cardiovascular system and principal organs of a woman, c. 1509-1510.

Frank Netter’s carefully rendered medical illustrations:

Neurogenic and Hormonal Pathways In Rage Reaction, in CIBA Clinical Symposia, Volume 8, Number 4, July – August 1956.

G.H. Davis’ “diagrammatic art”:

A British mine-laying submarine: detailed drawings of a boat of the Rorqual Class, in Illustrated London News, 1944.

David Kimble’s meticulous automotive cutaways:

2013-14 Dodge SRT Viper GTS (VX) illustration from David Kimble’s Cutaways: Techniques and the Stories Behind the Art, 2016. 

David Macaulay’s friendly “slices” of everyday life:

Spread on hybrid cars from The Way Things Work Now, 2016.

Non-visual Deconstruction

Deconstructive explanations aren’t limited to static visual representations, and they don’t have to be purely didactic.

Take Song Exploder, a brilliant podcast “where musicians take apart their songs, and piece by piece, tell the story of how they were made.” Through track-by-track analysis (the rhythm, a sampled sound, the vocals), the rationale becomes clear as the song takes form. By the end of the podcast, when the full song plays uninterrupted, it actually sounds different and maybe even better.

Song Exploder podcast logo

As a former guitar nerd, I have to mention Rig Rundown. This video series gets into the nitty gritty details of guitar playing: the guitars, strings, pedals, amplifier, pre-amp, and other accessories that go into creating that sound on that song. These short videos reveal the depth of the musician’s craft far more effectively than a simple inventory; getting the story straight from the musicians and their guitar techs in a candid moment before or after a performance shows the depth of technical knowledge and precision that goes into professional music-making.

Still of guitar effects pedals from Rig Rundown video featuring Vernon Reid and Doug Wimbish of In Living Color, 2016.

Critique and Deconstruction

Critique itself seeks to deconstruct in order to reconstruct new understanding. An effective critique starts from an understanding of where something is relative to where it could or should be. With a baseline established, a critique clearly and methodically breaks down each attribute of the item in question, describing not just how it can get “better,” but whether some elements already are working well.

The Great British Baking Show, with its specific focus on one domain of cooking, adheres to a rather scientific set of evaluation criteria. After watching a few episodes, it becomes clear what qualities judges Mary Berry and Paul Hollywood zero in on. With every slice of the cake and bite into a yummy pastry, they’re assessing things like external appearance (that warm, golden bake!), internal appearance, flavor, texture, and overall creativity — not to mention whether they actually like it. When the bake falls flat, they identify specific problems and explain how they happen, like tears on a baked loaf of bread resulting from underproved (?) dough. 

Paul Hollywood and Mary Berry, judges of The Great British Baking Show.

Expose UX is a web video series where user experience experts provide product developers input on their apps and websites in the early stages. The critiques cover virtually every aspect of the product, from purpose to usability to graphic design. Despite the unstructured, wide-ranging feedback format, the collective set of problems the experts identify reappear from one episode to the next, such as the need for focused user research and a more refined design approach. 

Promotional image for Season 2, Episode 1 of Expose UX, 2016.

Finally, I recently discovered UserOnboard, a site all about how web apps help new users get started using their product or service. There’s a section devoted to “teardowns” — exhaustive, screen-by-screen analyses of what works and what doesn’t from a user experience perspective. That could easily turn into a tedious exercise, but the creator, Samuel Hulick (pictured on the left in the image above), brings his own personal touch to the teardowns with an informal visual style and a generous dose of humor. But those aren’t empty gimmicks — his observations are shrewd and reflective of a deep knowledge culled from extensive experience analyzing so many different user flows. As with The Great British Baking Show, a tacit taxonomy of recurring problems occasionally surfaces, such as misplaced emphasis away from important elements and over-explanation.

Slide 41 from UserOnboard teardown of Super Mario Run.

Good deconstruction, whatever form it takes, is structured, well-reasoned, accessible, and engaging. It can give you a magic window into a reality you might not normally see, take you on a journey through the mind of a creator, or provide broader context and deeper meaning than what’s on the surface.