Teaching Examples


Disappearing multimedia: This is nuts
May 27, 2007, 3:50 pm
Filed under: graphics, journalism, multimedia, news, usability

Deadly Rampage at Virginia Tech
You have eight talented journalists working for hours under deadline pressure. They produce one of the best-ever examples of online storytelling. You post it on your Web site. You link it very prominently to the related stories. You feature it in the printed newspaper. And rightly so! It is a great achievement. It is a work worthy of study and appreciation long after the news event dims in memory.

For heaven’s sake, give the thing a permanent URL. What the heck is the matter with you people?!

I have Times Select, the paid premium service that provides access to The New York Times archives, video, etc. I’m not asking to get something for free. But you can’t even bookmark this graphic. I have tried everything. And you can’t properly search for it. Just try. NYT Multimedia search (only videos and slideshows come up). Archives search (only text stories).

You can search for “Deadly Rampage at Virginia Tech”; “Viginia Tech shootings”; “Virginia Tech graphic” — all useless. You can bookmark http://www.nytimes.com/2007/04/17/us/20070417 _SHOOTING_GRAPHIC.html — but it will take you to an April 17 column called “The TV Watch.” And if you bookmark the full URL (including all the numeric garbage following .html), it will work for about 24 hours and then revert to “The TV Watch.”

So the only solution I have found, so far, is to go to this omnibus page about the shootings, scroll down to where you read “INTERACTIVE GRAPHIC: Recounting the Events at Virginia Tech,” and click that.

Doesn’t The New York Times understand bookmarking? People like to bookmark things. They like to e-mail links to their friends and work colleagues. This is Online Usability 101, folks: Use permanent URLs.

Technorati tags: | | |



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: | | | | | |



Examining the changes at USA Today’s site
April 23, 2007, 1:08 pm
Filed under: design, journalism, newspapers, online, usability

At the Editors Weblog today:

Is USA Today’s orientation toward social networking detrimental to its journalistic purpose? a full examination by Jean Yves Chainon.

Kinsey Wilson, executive editor of USA Today, considers the Web site:

… as a medium standing on its own. Thus as a unique and complete platform to distribute news, which features an array of functionality and technology unavailable to print.

“We publish a newspaper, we have mobile platforms, we’re on the web. We’re a diverse media company” …

Technorati tags: | | | |



Big stories — too big
April 17, 2007, 12:52 pm
Filed under: awards, journalism, multimedia, online, usability

I was just telling students yesterday in my Advanced Online course that when they are sitting in the online editor’s position one day in the future, and a big investigative project is under way in their newsroom, it will be their job to make it both appealing and manageable in an online format.

This means MORE than making the navigation and interface clear and easy to use (although that’s part of what’s required).

MORE than making the page layouts attractive and uncluttered (which is also vital).

MORE than following up-to-date Web standards so that the work renders properly in all Web browsers (very important, of course).

It means you’ve got to present the story in a way that does not overwhelm.

The Advantages of Print

In a newspaper (especially a wide old broadsheet newspaper), you’ve got a space advantage over a Web page. Wait, you say — the Web has a bottomless news hole! Yes, it does. That’s part of the problem.

In the day-by-day delivery of a giant investigative story (such as those linked below), the layout of the newspaper page imposes limits. Even though a busy person might glance, scan, and not read very much of the story, he or she can get a good taste of the story from that process.

Imagine yourself holding the paper spread open. Everything on the two pages is part of one story. You see multiple headlines. You absorb some charts and graphs, photos, large pullout quotes. You probably read a couple of captions too.

With a fairly small investment of time, you can get a lot of overview from those two pages.

Then cumulatively, as the parts of the story run over the course of three days, or a week, or longer, you can keep adding to your understanding of the issues that made this huge story worth the resources expended to produce it.

This is one of the most glorious things about the printed newspaper. Spending 20 minutes a day with it doesn’t permit you to read every story, but in 20 minutes, you can get a very full picture of the world, and maybe your community too.

We lose this on the Web.

What’s the Story?

The way most of these big stories are presented online makes me think of a warehouse. At first I told my students the presentation resembles a library, but then I decided the warehouse analogy might be even more appropriate. Because in a library, at least you can search efficiently (unlike most newspaper Web sites), and the items are arranged very logically (once you understand the system). But a warehouse has no standardized system, so each one has its own rules — and browsing and scanning just do not work at all in a warehouse.

You have to already know what you’re looking for — and then dispatch the forklift to bring it out.

Think about that. How does the warehouse model help us tell a story effectively?

It doesn’t.

These stories won the Pulitzer this year. (The SacBee won for the photo story.) At your leisure, check them out. Think about my warehouse analogy, please.

There are good stories in there. This is excellent journalism. But do these online presentations hook a person who comes fresh to the front page of the package? Do they present the story in its best light? Do they make you want to stay and find out more?

We should think about how we can do this better.

Technorati tags: | | | | | | |



Design behaving badly
April 13, 2007, 8:20 pm
Filed under: design, newspapers, online, usability

Maybe I should make this a weekly feature. What do you think?

Have at ’em.

Technorati tags: | | | |



Khoi Vinh on The Times redesign
April 13, 2007, 12:56 pm
Filed under: design, newspapers, online, usability

The Times of London recently launched a smart, crisp redesign of its Web site, and Khoi Vinh wrote a fabulous illustrated critique of it earlier this week. (Vinh is the design director at NYTimes.com.)

I don’t like to comment on our competition … I do make an exception, though, for those instances where I think a competitor has really hit it out of the park, and when I like a design enough to be effusively positive about it.

And if you want to understand how to apply a grid to Web site design, see Vinh’s swell example.

If the grid concept is new to you, young grasshopper, then get a book and start learning.

Technorati tags: | | | |



What people really think about news Web sites
April 9, 2007, 2:09 am
Filed under: design, news, online, usability

Okay, Koci just implored us all not to complain so much, but Steve at Lost Remote has posted the funniest list of gripes that real users have, and even though it points out all the bad stuff about news Web sites — well, just go and read it. I think you will laugh. I did.

And if you’re in charge of one of these sites, then go hire an intelligent designer and change this stuff! Please!

Hey — even though Steve refers to TV news Web sites, don’t think there are no newspaper sites that are every bit as ridiculous. Especially when it comes to blinking mortgage ads! And yes, “Great use of tabs!”

Technorati tags: | | | |