Posted on May 3, 2007
Screen Design 101: New York Times Slideshow
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.
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.
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.)
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.
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.
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.