User Experience at “Tunnel Creek”: What we can all learn from The New York Times’s Snow Fall piece

Just a few paragraphs in to The New York Times’s six-part Snow Fall series, I was captivated equally by the story and by the innovative magazine-style in which the story was presented. So I began taking notes about the user experience of reading Snow Fall, knowing there would be a lot to learn for other user interface projects.

The Sidebars: Style and Media Types

The sidebars — the extra media besides the text of the story — were the focus of most of the innovation in the presentation of this story. I say “sidebar” loosely, since some of the sidebars were more like between-bars or beneath-bars. Here’s more on that:

The sidebars were limited to a few distinct styles and media types, which created a sense of continuity throughout the piece. Sidebars were positioned in just five ways: full-wide interrupting the text, inside the text column floated right, the same but floated left, inside the right-column, and roughly 3/4ths-wide cutting into the text column and extending to the right edge of the window. (During the ski map feature in part three, all bets were off on sidebar style.)

There were seven media types: full-wide videos, video mini-features (in the text column, or 3/4ths wide), photos (full wide montage and 3/4ths wide singles and pairs), slideshows (3/4ths wide), mug shots (inside the right column), auto-play mini-videos (inside the right column), and audio-only clips (inside the text column but floated left). Styles were highly consistent, although there was some variation in the placement of photo captions. Each media type brings its own short learning curve: how to start a movie, what does a slideshow do, why doesn’t this movie have a restart button, etc. If anything, I might have dropped the two media types that had the least value as distinct media types: slideshows and the auto-play mini-videos, both of which could have been done in the format of video mini-features.

The types of media besides the body text were introduced gradually, both within parts and across parts. This again helped with a sense of continuity, or at least limited the amount of surprise, confusion, and sense of visual clutter you feel when you encounter a new type of media. In the first part of the series, five types of sidebar media are used but half of the types appear for the first time only in the second half of the page. Media types mostly repeat between a new type and a type the user has seen before. The second part in the series introduces the full-wide photo montage toward the middle and the auto-play mini-video near the end (more on that later), but otherwise sticks to the same types of media found in the first part. Part five added audio-only clips.

Most full-wide sidebars actually extended to the width of the browser, beyond the main 1024px wide body area that other sidebars are confined to, if your browser happens to be open wider. This near-full-screen effect adds to the incredibility of the splash videos and photos especially. At first I thought the fixed-positioned ski map in part three was a right-column sidebar (more on that below), but when I maximized my browser it turned out to have more in common with full-wide sidebars. It fills the browser width just like full-wide sidebars, and has a fixed-positioned effect like the intro title. But unlike the others, the now 1/4-wide text column, which appears beside it at low browser window widths, actually runs over the sidebar at large browser window widths. The text has a solid white background (i.e. it’s not a transparent overlay) and it appears not so unlike the ski paths that carve through the mountain on the map beneath it.

The mug shot sidebars are notably low-key. The photos are tiny (55×55) and are next to usually just two lines of text, the person’s age and occupation. But on hover, the whole thing becomes a link to a slideshow for more images of that person. What surprised me most was that the mug shots in the first part of the series were not placed next to the first introduction of a person in the story. Instead they were grouped together toward the end of the page. In later parts, mug shots were more often next to first mentions.

Sidebars videos and mug shots (but not other types of sidebar content) all have an anchor in the text. For mug shots the anchor is the person’s name. For videos, a few words or a sentence near the video were the anchor. The anchor text had a grey background and a video or slideshow icon at their left side. This suggests to the reader this is a good stopping point to try the video, or if not there then maybe at the end of the paragraph. Hovering over the highlighted text causes the play button on the video to get bigger, letting you know what is going to happen. Clicking the text starts the video.

Full-wide videos and what I called the auto-play mini-videos started automatically, which I found annoying. (In the second part of the series the mini-video was an animation of how some avalanche protection gear worked.) But while the full-wide videos had start-over buttons, the mini-videos were an attempt at simplicity. The mini-video in part two had no border and a white background and no play control, so it blended well into the background, but the “way” to play it again if you missed it the first time was guess that you could scroll up and then scroll back down to it.

The Ski Map Sidebar and the Avalanche Video

Then there is the fixed-positioned ski map in part three, part sidebar part interactive graphic. It slides up as a 3/4ths-wide sidebar (or so I thought) but remains fixed in place for the remainder of part three. It forces the text to its left to stay at 1/4th-width (more on that above). The map evolves as you scroll down, with different ski paths highlighted every few paragraphs according to what is happening in the story. Mug shots appear on top of the map as you scroll, to indicate that the ski paths currently highlighted on the map were the paths those individuals took. But oddly while the map was fixed, the mug shots layered above it continued to scroll with the body text. It was an interesting (but perhaps not entirely successful) effect. While the ski map was up on the right, video mini-features appeared in a smaller size wholly inside the small text column.

I don’t have much to say about most of the videos, but the Tunnel Creek Avalanche: In Real Time video deserves a few notes. This was a video similar in design to the 3D fly-over of the mountain from part one. It’s a computer generated view of the mountainside, sort of photo-realistic, and from what I read constructed from scratch using elevation data and satellite imagery. The video follows the path of the avalanche, which is represented by a sort of highlight over the image.

It’s also a multimedia diagram. Contour lines cover the surface of the mountainside: thick lines every 2,000 ft of elevation (some but not all labeled), thin lines every 250 ft. And, incredibly, a synthesized drum beat counts off the feet, a light tap every 125 ft, a strong tap on the 2,000 ft lines, giving a multi-modal and actually emotional experience of the change in speed of the avalanche. The audio track also has the sound of wind. White dots highlight the locations of skiers (before the avalanche starts, tastefully not how they were carried away by the avalanche).

Focus and Color

There’s a splash screen at the start of each part in the series. And it’s huge. Depending on your window size, there may not be any body text visible at all before you scroll down, which I usually think is a design problem but didn’t mind here. At some window sizes, the page would scroll down gently automatically to reveal the first two lines of body text. The splash screen is a beautiful movie of snow and clouds at the start of four parts in the series (including of course the first part), and images with some text or CSS animation in the second and third parts.

On the main landing page for the series, part one, navigation to other parts in the series at the top doesn’t appear until you scroll past the splash movie. (And once it appears it never goes away.) It keeps the focus on the series title and movie.

As you scroll past the splash movie and it slides away (getting covered up from below), the title and byline begin to fade out — as if to force you to look away toward the body text.

As you scroll into the Tunnel Creek 3D fly-over video in part one, and similarly the Tunnel Creek Avalanche video in part four, in the area above the video the background color fades to match the background color at the top of the video, so that by the time you are scrolled to the video the page feels coherent as a single presentation and not as body content plus a sidebar.

Sidebar videos inside the text column start greyed-out with no text or play controls. Once it reaches a certain height on the page, it fades in to full color and the title of the sidebar and the play button fade in.

The bottom navigation to move on to the previous or next part in the series only appears when you have scrolled to almost the very bottom, which is similar to how regular NYT articles nag you to read more when you get to the bottom. But it did not feel like a nag here.

As you scroll past the splash movie and some other full-wide videos, the media stays fixed while the content below covers it up from below. For the Tunnel Creek video, I found this confusing. Because it would scroll up when you’re going into it, but it does not scroll away.

Layout, Structure, and Font

By and large, the body area was confined to 1024px, centered horizontally at larger window sizes, similar to the NYT site as a whole. But as I noted, some full-width sidebars extended horizontally to the size of the browser window (and preserved aspect ratio, so got taller too).

There are two levels of structure to the piece, the six parts in the series with navigation across the top and <h3>’s throughout the body text.

The body text size is 15px (22px/147% line height), which is the same as other NYT articles. The width of the column is 626px, which is larger than the 600px in typical NYT stories. I changed the font on my blog to match!

In the first few screenfuls of the body, there is only plain text. No links. No ads. Nothing in the right column. The only bit of fancy is the enlarged first letter of the article.

At the end, the story offers itself to be viewed as an ebook or to be watched in documentary form. And it concludes with half a screenful of credits.

Advertisements

Much of the success of the layout in this series comes from the limited advertising. There is one advertisement per section, I think. For comparison, there were about 10-15 sidebars per section. That isn’t necessarily a sustainable practice for a newspaper.

The first advertisement is 3/4ths the way down the first part in the series, and similarly positioned in some of the other parts. Advertisements all had the same distinct style that could not be confused with sidebar media: full-wide, labeled Advertisement really clearly, and separated from the editorial content with a black background (#333333) and large padding.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s