Permalink
Find file
95ba4da Mar 4, 2013
@kleinmatic @tswicegood @kleinmaticro
69 lines (53 sloc) 2.98 KB

Intro: The Design and Structure of a News Application

by Scott Klein, ProPublica

News apps tell stories. They've got much of the same structure as any news story. They've got the graphical equivalent of ledes and nut grafs. At their best, they help a reader to find their personal stories in a large data set and to understand the story you've reported using the example of themselves and their own community. A great news application lets a reader understand new concepts by relating them to their own experiences.

Here are some guidelines to help you design a great news application:

Far vs. Near

In order to help a reader understand complex data, help them follow it from the general to the specific. We think of things in terms of a "far view" and a "near view." Your far view is typically the landing page of your app, and is focused on broad meaning and context. This page should have the national picture of the data, with ranked examples, e.g., an ordered list of states, counties, companies, etc.

Your near view is the page at lowest level of abstraction, where your reader is looking at her own school, his own town, etc. The near view conveys association and identity. It is the means through which readers will understand the whole by relating it to the example they understand best.

Naturally, many apps have levels of abstraction in between the far and the near. Make sure to use visual consistency and make transitions obvious so the reader can understand the "zoom levels" as they go down them.

Whenever possible, every number in your app should include a comparison to another, either to a similar example (e.g., my county vs. the neighboring one) to larger clusters (my county vs. the state average) or to the whole (my county vs. the national average).

Make correlations visible. If there's a correlation between two variables, show them together.

Where to Start

When you begin a news app, ask yourself the two classic product management questions: "Who are our users and what do they want" and then ask two more: "What story do we want to tell them? What do we want them to do with the information?"

The answers to these questions imply visual-design decisions and user-pathway decisions. Allow free-form exploration but use element placement and size to make the pathway that tells your story the most prominent and easiest one. Remove extraneous elements that confuse the reader or send them on wild goose chases.

If you've created an especially complex page or one that takes complicated user input, help readers focus on the task by removing all of the page chrome other than the task elements. We call this "casino-driven design."

Nobility

Finally, always remember that you're a journalist, bound by journalistic ethics and buoyed by journalistic ideals. There is no Great Chain of Being classifying journalistic outputs. Writing is not intrinsically better than graphics nor is one more noble or genuinely journalistic than the other. Informing your readers accurately and fairly matters above all.