Marginalia and Pacing in New Forms of Digital Storytelling

The web is generally a fluid reading experience--which is not to say that it is smooth, but that it moves. We scroll and scan, top to bottom, and back up again. It doesn't make sense to design for screens the way we design for pages, but there are some less tangible aspects of print design that could (should!) make their way to the web. The first is marginalia--usually thought of as the notes we jot down in the margins of our own books. But marginalia is not just our scribbles; editorial design has long made good use of margins with pull quotes, charts, footnotes, and other secondary data. This breaks up the reading experience. Instead of cramming it all into one column, we can see bits and pieces along the way. This means designers (and writers) can highlight or hide certain aspects of the story. It also means that readers get a break from dense paragraphs of text. Marginalia, as such, doesn't frequently exist in web design. Usually there is simply another column of information that takes up what would be the "margin" space and it is often unrelated to the primary text (somewhat confoundingly, it directs you to leave the article and read something else).

I encountered an essay today that makes remarkably good used of the margins--a fantastic cover story on Pitchfork: Station to Station: The Past, Present, and Future of Digital Music Streaming. Midway through the piece, a timeline appears on the right side of the screen, and as you move through the story, the components of timeline appear and disappear as you continue to scroll down. All in all a delightful experience, but also an incredibly useful one. The second place where the story makes use of the margin is to explain copyright and royalties, on the left side of the screen. If ever there was something that should be included in footnotes, this is it. And conveniently, it corresponds to the part of the story where this information is relevant (without forcing the user to dig down and find endnotes at the bottom of the story).

The second thing that print influences is the pace at which we read. Of course everyone reads at a different speed, but because of the physicality of the medium--we have to turn pages and stop to read each page, and then turn the pages again--we are forced to read at a particular pace. This pace is often determined by the designer. The opening spread of a story, for example, might include a large photo, a headline, and a small snippet of text. Whereas the second spread may be much more text-heavy. We read these pages at different paces and design elements guide our movement through the entire book. The best magazines vary their design; the front matter is not formatted the same as the cover stories, for example. One of the problems with most online publications is that most stories are designed to be the same, usually in a vertical format that goes something like this: headline, deck, byline, date, text, photo, text, photo, text, text, comments. Unfortunately, this means we tend to read at a consistent pace, simply scrolling down, down, down until we finish the story. This is slowly starting to change and I believe the visual nature of the web will change dramatically over the next decade. The recent NY Times redesign has several templates depending on the story type, and of course there is the oft-mentioned Snowfall piece that ran last year and broke down a lot of the traditional visual models of story publishing.  

But, the Pitchfork piece is one of the few digital stories I have seen that uses design to control the pace at which you can scroll. There are multiple ways to navigate the story: hidden side nav, top scroller that mimics the content of the story (e.g. looks like a music player) and the most natural way, simply by scrolling down the page. One of the reasons you can't scroll quickly (or as quickly as you might normally) is because the headline text and pull quotes are fragmented and come together as you scroll. If you move too fast, you actually can't read it.  

The fragmented, unreadable text...

The fragmented, unreadable text...

begins to come together as you scroll down...

begins to come together as you scroll down...

and finally becomes a clear paragraph of text.

and finally becomes a clear paragraph of text.

This is a brilliant way to influence that pace at which someone can read. From a design perspective it is quite beautiful, and an effective way to showcase pull quotes, but it also forces the reader to pause, if only for a moment, in almost exactly the same way one might pause over a particularly compelling print spread. Web design should not mimic print design because screens aren't pages and websites aren't books, but there are emotional and physical aspects of reading in print that can be emulated via a screen. The trick is, we can't simply pull designs from printed matter and assume that they will work the same way on the screen; more often than not they won't. But, if we can figure out the larger implications that exist within the reading experience (e.g. the role of margin space and pacing), we can translate these into digital formats that actually make sense within the medium. As designers, we need to think more deeply about the nature of reading, not just the functionality of words on a page or screen, but rather about the human connection to the act of reading and what this might mean for the future of digital storytelling. 

By the way, the Pitchfork piece isn't just an innovation in design, it's also an excellent essay.