Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 18 2011

05:47

A Brief Rant on the Future of Interaction Design

Thought-provoking! A really good article that pushes us to think beyond swiping our fingers on "pictures under glass."

April 02 2011

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

July 01 2010

23:27

Playing around with the iPad: Have you seen anything exciting?

Just got my iPad - held off til my wife could buy me one for my birthday. Thanks, dear! Anyway, I'm looking forward to playing with it. If you've spent some time with one, what apps got you excited? Perhaps interesting interfaces, utility, interaction design, functionality, storytelling, content, presentation, datacentricity, value to you as a citizen or consumer or resident of a neighborhood?

May 04 2010

16:02

Looking at jQuery for visual journalism

With all this talk about the so-called death of Adobe Flash, the future of HTML5, etc., I thought I should take a closer look at jQuery. This post is intended to give you an overview and help you decide whether you too should take a closer look.

My first thought is that if you have weak skills in CSS (or no CSS skills at all), you can’t even think about using jQuery. You would need to improve your CSS skills before you tackled jQuery.

With that out of the way (sorry if that ruined your day), let’s note that:

  • jQuery is JavaScript.
  • jQuery is free and not a commercial product.
  • The home and source of jQuery is jQuery.com. You can download it there.

As an introduction, I really liked this: jQuery Tutorials for Designers. It shows you what jQuery makes possible on today’s Web pages, and even if you don’t want to look at the code, you can open each of the 10 examples and click and see what it does. So in about 15 minutes, you will have a better idea about jQuery’s usefulness.

This example is my favorite: Image Replacement. It’s simple, and it’s really easy to apply this to all kinds of visual journalism situations that an online designer might encounter.

Many of the other examples are things I wouldn’t bother to do on Web pages, even though they look cool. I was reminded of how a lot of people are saying Flash is unnecessary because you can do all the menu effects and flyovers with JavaScript instead. These examples prove that. Of course, my view of Flash is not to use it for eye candy (like most of these jQuery examples), but instead to use it for complex explanatory journalism, like this.

For a very nice slideshow built with jQuery, see this tutorial: Create a Slick and Accessible Slideshow Using jQuery.

There’s also a nifty jQuery plug-in for making a slideshow: Coda-Slider (thanks to Lauren Rabaino for that link!).

Here’s another good tutorial for a slideshow: Automatic Image Slider w/ CSS & jQuery.

For the geeks among you, read why you should link to Google’s copy of jQuery instead of using a version on your own Web host.

And finally, the ever-helpful Chrys Wu (@MacDivaONA) recommended these free video tutorials for learning jQuery.

April 09 2010

15:37

7 examples of exceptional Flash packages

These come from USA Today, The Washington Post, the ABC (Australia’s public broadcaster), Reuters, NPR, The Wall Street Journal, and The New York Times. Seven examples, seven news organizations. Yes, they are all large news organizations. But I’d like to make the point that (contrary to what some Flash detractors have said) it’s not only The New York Times that is doing outstanding work in Flash online.

I chose these examples to show to journalism students who are near the end of their 10 weeks of instruction in designing and producing multimedia news packages.

Haiti earthquake: An expandable package that was updated with new photos, videos and audio throughout the 10 days following the earthquake. Note the added audio in the lower right corner — not every photo had this, so it was optional to include it. Videos appear seamlessly within the same interface (in the location of the still photo). Each photo has a headline, and that headline text appears at the top when you roll over the squares representing individual segments. A very classy package with a clear design and clean functionality. Exceptional: Highly adaptable to future breaking news or retrospectives. See an earlier version of the same interface: Decade in Review.

Local fashion videos: Outstanding interviews, still photos and editing make these short videos exceptional. The choice of more than a dozen well-known locations around Washington, D.C. (e.g., Eastern Market, Union Station) situates each story in a place that has a recognizable flavor and style. To bundle these first-rate stories in a clean, easy-to-use interface that encourages browsing — and includes a map — was brilliant. Bummer: No way to bookmark or e-mail link to an individual video. Bonus: Easy-to-use link list of all videos. (New ones are still being added.) Overkill: Too-elaborate Flash-based comments segment.

Black Saturday: Coverage of the worst bush fires in the history of Australia, in which 173 people died and more than 4,500 sq. km. of land burned — organized by both time and location in a manner that encourages browsing and also conveys the huge scope of the disaster. Exceptional: Use of embedded anchor points, which allow you to bookmark any segment, or e-mail a direct link to someone (see example). Exceptional: Integration of Google Earth mapping (see example). See also the amazing map locator that appears below the grid.

Economic crisis: A timeline starting with August 2007 and ending with September 2009 documents “The Year of Global Change” with text, photos and videos in an expandable interface that provides easy switching between detail view (individual items) and the overview grid. The detail you viewed last appears in the leftmost column when you return to the grid view. Bonus: Very easy to step forward and back from within the detail view. Bummer: There is no bookmarking (no embedded anchor points).

Piano Jazz: Highlighting 30 hand-picked examples of jazz musicians performing on the radio program Marian McPartland’s Piano Jazz, this 6 x 5 grid opens up 30 overlay segments that include an audio player, a photo of the artist, and a short text. Although this package might appear complex to the uninitiated, it is actually very straightforward. My students are fully capable of building this package right now, with a combination of XML and sound controls. Notable: Clean, appealing design, ease of use, restraint. I love it that the audio was edited down from the full-length program to feature one song performed by the guest.

Afghanistan map: This map has been updated, often daily, since February 2009. Look at the calendar selector on the left side; select any day to see all reported events on that day. Each event is located on the map with an icon that indicates its type, e.g., bomb, fighting, offensive, air attack. Roll over the icon to read a summary of the event. Exceptional: Use of external data to update (frequently!) a long-term continuing story. Bonus: Great icon design and a very clear legend box.

End of the Line: I’ve chosen this from the many great examples at The New York Times for two reasons. First, it demonstrates a versatile loaded overlay (see screen capture below): Some of the segments include video, most do not, and many include multiple still photos (some include only one photo). The navigation interface at the top of each segment (Previous and Next buttons, plus numbered buttons that indicate exactly how many photos the segment includes) is an exceptionally friendly way to present varied photo sets. Second, the two views of the intro (Map and Thumbnail) add immensely to the appeal of the package. As a former New Yorker, I am drawn in by the Map view, but I would guess that lovers of photography find the Thumbnail view more enticing.

April 06 2010

22:12

What we can learn from a 2.5 year-old using an iPad

Let’s call her a member of the touch generation – a generation who will grow up in a world where the way to interact with technology is not the keyboard, but the touchscreen.

This video of Todd Lappin’s 2.5 year-old daughter using an iPad for the first time is remarkable in illustrating how we are conditioned by the interfaces of our technology.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl