Teaching Examples


Screen Design 101: New York Times Slideshow
May 3, 2007, 12:57 pm
Filed under: design, Flash, journalism, multimedia, online, usability

So, you have decided to venture out beyond Soundslides and design an original interface for your site’s slideshows (or videos). Let’s take a look at a good example from The New York Times. Amazing Girls is a package of five audio slideshows that accompanied a text story about high-achieving students at Newton North High School, near Boston.

Amazing Girls, The New York Times
I’ve long admired how the typical Times design gives full emphasis to the photos without making the controls or other features hard to find or understand.

New York Times player controls
The main player controls could not be more clear or easy to use. The added color cue (for those of us who are not red-green colorblind, that is) makes a nice extra.

New York Times package info
I’m very fond of how the credits and other information work. (These are opened by the controls in the lower right corner of the package.) First, the slideshow pauses automatically when this opens. Second, everything else dims to give visual priority to the overlay box. Third, the information about the package — including a link to the text story it goes with — is all bundled into the package, so it won’t get separated or disconnected in the future. Notice that the publication date is embedded in the package — what a great idea! (Too many online packages fail to include any date at all, even a year.)

New York Times preloader
The preloader graphic is unobtrusive and easy to understand. Each of the five slideshows loads on demand, which is a smart choice for handling the downloads.

There are two things in this design that I would like to see improved.

New York Times tool tips
The first is very simple. The pop-up “tool tip” labels for the secondary controls (those in the lower right corner) are, unfortunately, partly hidden by the mouse cursor. The solution would be to float the labels above the button text instead of below it.

New York Times segment buttons
The second change I suggest would take more effort, but I think the benefit to the visitor or viewer would really be worth it. There are five buttons across the top of the package that link to the five segments, or slideshows, in the package. They provide nice, clear feedback — when you roll over one, the appearance changes. But what’s missing is a preview. The labels on these buttons are sort of evocative, but they are not very informative.

I think you could preview the content in each slideshow in one of two ways. The first would be a simple teaser, just a text overlay or slide-down panel that told us a little bit about Kat or Colby — so we would know if we really want to click. The second way would be a nice audio snippet, in the girl’s own voice, no more than five seconds. Of course, you could provide both on rollover.

This isn’t hard to do, but it would mean more content work. That is, the editors and producers would have to spend maybe an additional hour on the package to add five previews. But consider the possible pay-off in extra viewing time and satisfaction. After I have already viewed two or three of these slideshows, I might be thinking, “Eh, Kat, Colby, I’ll just skip them.” But if I rolled over and you hooked me with the teaser — then I would click.

I really like the way the Times’s slideshows and other package templates have evolved. As other news organizations start to develop their own templates for audio and visual content, they can learn a lot just by exploring and experiencing the Times’s online packages and thinking about what works well in them — and why.

Technorati tags: | | | | | |

Advertisements

1 Comment so far
Leave a comment

I agree that their template has always been very easy to use. I love the fact that it’s so easy to find the link…That’s one of my biggest pet peeves about multimedia content.

Now that they’ve sort of ditched that reporter-narrated format in favor of nat sound and source voices, their content quality matches the design of the template!

Comment by Angela Grant




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



%d bloggers like this: