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: infographics | information graphics | journalism | examples
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.
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.
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.
Technorati tags: design | usability | multimedia | online journalism | journalism | Flash | Flash journalism
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: design | usability | newspapers | online journalism | online media
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.
- House of Lies, The Miami Herald
- Altered Oceans, Los Angeles Times
- Muslims in America, The New York Times
- A Mother’s Journey, The Sacramento Bee
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: journalism | awards | investigative | online journalism | online media | usability | design | examples
Maybe I should make this a weekly feature. What do you think?
- The Daily Independent, Ridgecrest, Calif.
- Herald & Review, Decatur, Ill.
- Bastrop Daily Enterprise, Bastrop, La.
- The Journal Times, Racine, Wisc.
Have at ’em.
Technorati tags: design | online journalism | online media | newspapers | 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: design | online journalism | online media | newspapers | 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: usability | design | news | online journalism | online media
Filed under: Flash, graphics, interactive, journalism, multimedia, online, usability
This beautiful animated graphic from National Geographic provides a wonderful example of how to construct a multipart package:
The first thing to think about is simplicity. It’s big, it’s clear, it’s easy to read, and there’s nothing wasted on the intro screen, the entry into the package. You have exactly three choices — the one flaw is that you might be a little confused because two of the choices are available (to be clicked) twice.
Packages often work best with a small number of segments, or chapters. This one has two real content segments and two other features: a quiz and printable items (quite nice for schoolchildren, I would think). The real content is divided into “Healthy Heart” and “Heart Attack.”
Sometimes this kind of division — two things are informational and the other two are quite different — can really cause trouble for the user. In this case, the options for the printable items open inside the same viewing space as the content, so that’s no problem at all. But the quiz segment loads a new browser window (within the same window) and disrupts your experience. That’s not as bad as some packages, where they throw you out into something that doesn’t even look or feel like the same content. (In this package, you might not even notice it if you have a large screen.)
Short chunky text (good!)
When you go into either of the two content segments, you see new tabbed sections for that segment. In each case, you begin with an the overview, and you get 30-60 words of text in bold, very readable type that prepares you for the information in the segment. I suggest you compare the two blocks of text. In my view, the text on the first screen of “Heart Attack” is about 100 times better than the text on “Healthy Heart.”
In “Heart Attack” you can see how this really is a linear presentation of information — and yet the designer has cleverly provided options to prevent the user from feeling trapped in a next-next-next sequence. Not only do you have the three tabs (Overview, Blocking the Artery, and Treatment); you also have buttons on the main content to control the pace.
Again, I have to praise these folks for use of text. It’s always short, and it’s always clear and inviting. Too many packages have tiny text or an over-abundance of text — both of those are very offputting when you’re using a graphic.
The photographs used in the Treatment section are nice and BIG. This is great — too many information packages sadly shortchange the photos by making them too small.
There’s a scripting glitch in the “Heart Attack” segment. You should be able to click any of the three tabs at any time and go back to the start of that individual section, but if you click Overview from within a different section, that’s not what happens. This is easy to fix, but it highlights the need for QA testing on all Flash packages! You really must click all your buttons dozens of times to make sure you didn’t screw them up.
Does this really need to move (or make noise)?
Another plus for this package is the intelligent use of both animation and sound. When should something move? Does it have to move? Does motion help tell the story, or is it just a stupid addition? Ask the same questions about sound. This package has sound in exactly two sections — and in one of those (“Healthy Heart”: Pumping Action), it’s brilliant.
The “Healthy Heart” segment has four sections (Overview, Pumping Action, Inside the Heart, and Anatomy), and I think there’s another small usability problem here. On the first screen, Overview, you see a large button below the text: Continue. This is not bad — but what does it do? Where does it take you? In this case, it moves forward to a second screen that’s still part of the Overview. Turns out, the Overview has three screens. But similar buttons are used elsewhere in this package to take you to a new tabbed section — not to a screen inside the same section. This is an important distinction for an interactive designer to understand. An inconsistent result ends up confusing people, making them feel like the package is not easy to use.
The solution for this is already evident in several other sections: Supply numbered buttons when there are multiple “pages” within one section. That makes it completely clear to the user and raises no questions. Also, numbered buttons eliminate the user’s concern that “if I click that, maybe I can’t get back to this.” When we see a row of numbered buttons, we instantly assume the row will still be available to us after we have clicked one of the buttons.
A tiny bit of Flash goes a long way
Apart from the very high quality content (both text and images), this package also serves as a great example of how knowing a relatively small amount of Flash can allow a news organization to build fantastic interactive packages.
If you’re new to Flash, you might think I’m crazy to say that. But I know Flash, and believe me, this is so easy to do! The hard part is creating the beautiful graphics — you need a real artist to do that. But the Flash? In both “Healthy Heart” and “Heart Attack,” there is no high-level ActionScript at all. There’s nothing in those two segments except buttons, frame labels and Timeline animation.
The Flash in this package is literally covered completely in pages 45-143 of my Flash Journalism book — and not just my book, but in countless free tutorials on the Web and in dozens of other books too. No, I did NOT write this post to sell books (I only get, like, $2 if you buy one new). I’m trying to tell you that not all great Flash packages required super-amazing Flash know-how. And this package is a perfect example of that.
I’ve been learning how many newsrooms do NOT have a graphic artist on staff. When there IS a news artist, he or she is often buried in minor daily work. This is one of the things that is going to have to change, I think, if we are going to communicate journalism to the public in the future. Graphics speak effectively. They get the message across. And people like them. People like graphics not because they are easy or dumbed down but because they are CLEAR and EFFICIENT.
Go and spend five minutes with National Geographic’s heart package and find out what I mean.
(Thanks to my student Alex for finding this graphic.)
Update/Addendum: This package uses both SWFObject and SWFAddress (which handles the integral deep linking), both of which are FREE — and infinitely useful.
Technorati tags: infographics | information graphics | news | multimedia | journalism | Flash | Flash journalism | examples
I was wondering when The Washington Post was going to comment about its Web redesign on its nice behind-the-scenes blog. Now they have:
To better highlight our award-winning video and photo content, we’ve added a multimedia strip to the page. This band will be comprised of videos, photos and interactives, and by using the scroll arrows or the iTunes-like buttons, you can scroll to see more multimedia features. We’ve also created a similar strip for features content, allowing us to better showcase all the content we have in that area.
This is pretty nifty (although kinda far down on the page).
Much, much more detail in the blog post.
Predictably, many people have commented about how much they HATE the new look. I’m sure plenty of people like it (I do), but they are not taking the time to post their opinions.
Technorati tags: design | newspapers | online journalism | online media
Browsing around on SlideShare.net, I found this presentation by Jonathan Boutelle, the chief technology officer of SlideShare. While there’s not a lot of text on each slide (which is, in fact, good), Boutelle has included all his remarks in the comments on each slide.
If you’re not on the builder end of online journalism, you might not find this as fascinating as I did.
If you are, though, then I bet you’re curious about Adobe Flex and integration of AJAX and all that jazz, just as I am. So here’s part of what Boutelle had to say.
Slide 5:
But for code running inside the web browser, you absolutely don’t have to choose [between Flash and AJAX], and you’re shooting yourself in the foot if you get yourself into an “either-or” mentality. Flash and AJAX have totally different capibility, and work pretty well together. There is synergy between the two technologies.
Slide 11 (this one is for your boss, if s/he is still making you use something other than Flash to present video online):
The story about video is pretty clear now: two years ago nobody knew about Flash video. But that was before youtube went from being 3 guys in a garage to a multi-billion dollar buyout by google in 15 months.
At this point, it’s pretty much undisputed that Flash is the best way to display video in a web browser.
It also seems to be the best way to play audio in the browser.
Slide 16:
There’s lots of stuff that Flash developers think are pretty cool, but that for whatever reason doesn’t seem to have a lot of momentum behind it.
One such thing is Sockets…. Flash Sockets don’t seem to be as useful as they sound like they would be.
… Finally, there is FLEX. Flex is Adobe’s developer-friendly authoring environment for Flash. It’s declarative XML, similar to html really. It’s seems optimized for authoring full-screen desktop-like apps that work in the browser. This is cool technology, and it seems like it would be really good for corporations that are porting desktop enterprise apps to the internet. But like I said at the beginning, the last thing we want is a full screen of Flash content. It just doesn’t look or feel webby. Also, hello world weighs in at 120K right now, so it’s too heavy for use in the consumer space….
Slide 17 (this is for you, if you’re wondering why you can’t find the right person for that developer job you advertised):
Due to the specialization, finding devs who are conversant in both Flash and AJAX is really hard work.
In particular, finding good developers who are willing to work on Flash can be very difficult. There’s a cultural perception that Flash is not something real developers use: similar to the perception 5 years ago that javascript was not a real programming language.
But if you’re using the Flash nuggets model I propose, you need developers who can do both: what you don’t want is for your devs to specialize at a lower level than front end / back end. Otherwise, you’ll start adding Flash unnecessarily just to keep the “Flash guy” occupied.
Solution: build `em yourself. Takes years to start up. After a while it becomes a machine, a culture.
The AJAX/Flash crossover artist is in extremely high demand nowadays. So once you build a team like this, take good care of them! And if you have these kinds of skills, then you should have no problem finding cool, high-paying projects to work on.
Technorati tags: Flash | Flash journalism | usability | design | jobs
Teaching Examples 