Teaching Examples

This beautiful animated graphic from National Geographic provides a wonderful example of how to construct a multipart package:

Explore the Human Heart

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