[DATAVIZ] Interactive guide to Aintree Racing Course

Apr 252012
 

This Guardian visualization is an interactive guide to the Grand National horse race in England.

The guide consists of a basic outline of the Aintree course, with the fences marked out numerical and the functionality to mouse over them to learn more information about the individual jumps.

The other element of this piece is an audio recording of last year’s winning jockey. The jockey works his way through the course, fence by fence, explaining the layout of the course.

This piece is an example of the wider trend of using interactives in sports coverage. The type of content would seem to lend itself well to interactive and visual web apps because sports content by its nature encourages participation.

To that end, for a sporting fan this piece is no doubt very interesting because the course guide component adds context for them to follow along to the audio.

For a non-fan, however, this piece is difficult to digest. In the first instance, there are some technical issues with this piece, namely that it’s not possible (or at least as far as I could find) to pause or rewind through the audio piece.

From a functionality point of view, I like that the command to call up the content relating to the fences is a mouse over rather than a click. It makes the exploration a smoother experience and somewhat easier to follow along with the audio.

The idea of tying in audio to an online piece is worth considering. Sports coverage (at least in the UK) has a tradition of being presented in an audio format. Commentary, whether on the radio or television, is straightforward audio. For that reason, it makes sense to use audio in this piece, but more development needs to be done to make this piece relevant for those approaching without any sporting knowledge.

[DATAVIZ] “Sweatshop” and News games

Apr 192012
 

Sweatshop is a news game created by Littleloud for Channel 4 Education. It is tells the story of the inner workings of sweatshop by challenging the user/player/viewer to manage the production line of a sweatshop.

The object of the game is simple, make as many clothing items as quickly as possible, using the least amount of resources. This means employing child workers at s saving compared to their specialized, adult equivalents.

As the levels increase, it becomes harder to keep up with the production line, necessitating increasing the number of workers as the pressure on them increases.

Interspersed between the levels are pieces of text that provide the background information and wider context about sweatshop work. Embeds the context into the main body of the interface, rather than linking out to other sources like the Guardian’s interactive line.

The noise is irritating and the overall feel is childish. It is difficult to imagine an adult spending a significant portion of their lunch break playing this game. That being said, this was developed for Channel 4 Education and it can therefore be assumed that children are in fact the intended audience here.

This raises the issue of the gamification and the fine line it treads between over-simplifying a news item and using the immersive experience of gaming to communicate an otherwise removed concept to an audience.

But who is going to be playing the full feature? Where is the tipping point between coming to a deeper understanding of an issue and de-sensitizing from it. Much in the same way that Call of Duty and other war based games run the risk of numbing players to the effects and realities of war, does the full-feature version of this game take away from the message it’s intending to make? The addictive nature of the game, coupled with the desire to ‘win’ overshadows the newsworthy message at its core.

“Sweatshop was Littleloud’s pitch for a game about the fashion industry, one of the key topics suggested by the broadcaster for its 2011 slate,” said Simon Parkin, the game’s designer, writer, and producer. “As young people generally have limited disposable income, they are likely to buy cheap, fashionable clothes from high street retailers who drive down their prices by employing sweatshop labor.”

The game’s design is based on the tower defense principle. Players need to defend themselves from enemies crossing their line. There’s a correlation between subject matter and play, as the levels increase, so does the pressure to produced more work. The procedural tasks increase at a correlative rate to the level increases.

This is an example of form and content working well together. The extent to which this model is successful for other types of content, is questionable.

 

[DATAVIZ] BBC’s Sarajevo timeline

Apr 112012
 

Timelines are rarely the most effective way of communicating vast amounts of information, despite their seemingly logical choice when that information is historical. The BBC’s Sarajevo timeline, however, is an example of how it is possible to use the basic structure of a timeline to great use.

There are two overarching reasons why this visualization is so effective. The first is that it is ordered thematically, rather than chronologically. The second is that there is a coherence to that theme that runs through the slides – the map that appears on the first slide repeats on all the subsequent ones, highlighting different parts of the narrative through the locations of Sarajevo.

The design of each slide remains the same as the user scrolls through them. The bar chart and the map at the bottom remain the same, denoting where in the city the information in the top half of the slide occurred and at what point in time. The bar graph serves the function that a slider in a “typical” timeline would – it charts the number of the deaths in Sarajevo and the highlighted bar reflects the point in time that copy discusses. To this end, the content is in fact organized chronologically, but that’s not what’s driving the narrative of this visualization.

The video content is original footage from the early 1990s. Although some of the videos are a bit on the long side, they add the human narrative to the piece and are its strongest component. The stills used in slides are especially effective.

The navigation is organized by thumbnails along the top bar and arrows on either side of the slides. The text in the thumbnails relates to the points on the map and they’re short and punchy enough to encourage interaction. The piece fills the width of the browser, but it would be greatly improved if it would anchor down.

[DATAVIZ] Emotional Design reading

Apr 112012
 

Summary of Chapter One of “Emotional Design”

A person’s state of mind affects their thought processes. An anxious person will narrow their focus, which in turn results in their inability to seek out alternative solutions to a problem at hand. Hence the frantic pushing at the pull door. The inverse is true of happy, relaxed people whose though processes are more open to creative thinking and brainstorming.

The three levels of processing:

  • Visceral – automatic, prewired layer
  • Behavioral - brain processes that control everyday behavior
  • Reflective – contemplative part of the brain

Creativity vs Focus

“Bottom-up” activity is that which occurs from visceral processing, while “top-down” is that which occurs from reflective processing. Bottom-up processes are driven by perception and top-down ones are driven by thought.

Design needs to accommodate both creative thinking and focus.

Beautiful information design

Information design need not be unattractive. It can, instead, be presented in a pleasant and comfortable way. The purpose of technology is to enrich the life of the user and to also bring enjoyment through its usage. To this end, artistry should be a component of design.

The Google example

Google, compared to other search engines, is playful and quirky. It brings the user a certain amount of joy in its use. The result is positive brand affiliation and recognition.

Because people pay less attention to familiar things, the challenge of design is to maintain and harness the initial enthusiasm users have for a product.

Principles for achieving this:

  • Enticing through diverting attention
  • Delivering surprising novelty
  • Going beyond obvious needs and expectations
  • Creating an instinctive response
  • Espousing values or connections to personal goals
  • Promising to fulfill goals
  • Leading the casual viewer to discover something deeper about the object/product

Data Journalism: It’s not just numbers

Apr 042012
 

Watch live streaming video from columbiajournalism at livestream.com

At a panel held at Columbia Graduate School of Journalism, journalists discussed data journalism and its implication for newsrooms and the media industry as a whole.

Summary of key points

“Data journalism is document reporting on steroids”

Collection is now easier because of the availability and technology

Data is inherently digital, but this is now not always the case.
Document Cloud is an example of how it’s now possible to take something non-digital and enhance it through technology.
Layers on editorial over documents

The definition of data is expanding drastically.

What came first, the data or the story?
The panel agreed that the story always comes first.
Sometimes the data gives you a different story to the one you were expecting or looking for.

The story should be the result of reporting and the data follows on from a hypothesis

Julia Angwin discussed objectivity, arguing for its redefinition.
Data journalism exemplifies how the scientific method should be applied to journalism
The reporter starts with a hypothesis and tests it out.
Then they find the narrative and the characters through which to tell the story that came out of that reporting.
Data journalism should, therefore, allow you to demonstrate the truth.

Good data journalism will do away with the anecdotal, replacing it with the empirical.

Everyone should be data literate in the newsrooms.
Not every story is a data or document story, but data literacy means knowing when it will enhance a story.
Everyone needs to know how to use Excel.
Cleaning the data is the most time consuming portion of data journalism
The fun stuff is in the visualization

Do you need specialists or can anyone be a data journalist?
There will always be a need for specialists, but a good chunk of the newsroom should be up to speed if it were a priority

“Data is political”
The way you gather it will affect the results.
Newsrooms should be doing their own data collection.

Where do we look for data?
Everywhere!

The issue of whether a written story trumps an interactive was hotly debated, with half the panel saying that a written story will always hold more weight that an interactive. This was countered with the argument that a shift in mindset and emphasis for both readers and newsrooms will mean that news applications will one day hold that same position.

[DATAVIZ] The Guardian’s China interactive timeline

Apr 042012
 

This is an interactive timeline made by the Guardian which shows the key events that occurred in the last years in China.

The premise of using a timeline to display this information is if course logical given its chronological narrative. What’s interesting about this piece is the timeline itself, which uses a vertical rather than horizontal scroll.

As discussed in Interaction Design, it’s the small things that both irk people and can make a big difference in design. The loading symbol for this interactive is the Chinese flag. Although seemingly cheesy or banal, it serves a wider function of signally to viewer that they’re about to see something to do with China. It’s a nice touch in preparing the viewer for what’s about to happen; also known as feedforward.

The timeline uses movement, which looks almost like the inside of a spinning wheel, to animate the passage of time. This upwards motion is an interesting alternative the usual horizontal scroll of timelines.

Divided into sections, when you click on the markers there’s an overlay with more detail. When you mouse over the markers, the full track is highlighted red to denote which stream it relates to. It perhaps would be nice if the same thing happened whenever you mouse over the whole track. There’s a signal in this overlaid text to click on the marker for more information. The markers are easy to scroll through, although a couple of them are too close together. To click onto the symbols takes you out of the interactive into another tab about the story. The decision to take the viewer out of the timeline is good because it adds context to this story. It’s helpful to have stories to read as background information, which open away from the interactive and don’t distract from it.

On the whole, this is an interesting experiment with timeline layout. Within the visualization world, for some reason, there seems to be a lack of intuitive timelines. This one, however, still doesn’t feel like it’s the appropriate form for its content. Because this is historical content, it suffers from information overload. The viewer is dazzled by the spinning motion, and its hard to resist the temptation to click about all over the place and not actually ingest any information.

Having said that, the design is clean and coherent and it’s immediately obvious what the viewer is being asked to look at. The key is in the corner, nicely tucked away as a pop-up and the slider at the bottom denotes the time frame of the events, giving more detail about when the dates the events above took place.

US Gas prices

Apr 032012
 

US Gas prices from 1990 – 2012

Data from US Energy Information

Map of gas prices by state

Data from AAA’s Daily Fuel Gauge Report

[DATAVIZ] Interaction design

Mar 282012
 

Interaction design

  • Invisible; happens behind the scenes
  • Behavior based
  • Art of facilitating interactions between humans through products and services
  • Application to real problems; foster communication between two or more individuals.
  • Contextual; serves purpose for time and context.
  • Shouldn’t align to one particular technology/medium: “Technologically agnostic.”
  • The goal is to facilitate interactions between humans.
  • Making connections between people through products, not connecting to product itself.

Why interaction design?

The designers’ attitude:

  • Focus on users
  • Finding alternatives
  • Using ideation and prototyping
  • Collaborating and addressing constraints
  • Creating appropriate solutions
  • Drawing on wide range of influences
  • Incorporating emotions

Acronyms

  • IA – information architecture
    Structure of context; how best to structure and label content so users find what they need. Yahoo is an example of this
  • AD – industrial design
    Form – shaping objects in way that communicates their use while making them functional
  • CD – communication design.
    Creating visual language to communicate content
  • UX – user experience
  • UIE – user interface engineering
  • HCI – human-computer interaction
    Related to interaction design, methods are more quantitative and its focus is on how humans relate to computers
  • UE – usability
  • HF – human factors
    Ensure objects conforms to limitations of human body

Practice interactions design

Good interaction design makes the world better by remaining the small irritants in life.

Interaction design is also about facilitating interactions between people and finding new ways to better connect people.

Poka-Yoka principle

Shigeo Shingo, 1961

“Mistake proofing”

Designers use poka-yoka when they put constraints on products to prevent errors, forcing users to adjust behavior and correctly execute an operation. Eg cords that fit into electronic devices in particular way that prevent people from plugging in power cord into headphone hole.

Proper conditions arise before process begins.

Can take many forms: signs, humans, procedures that prevent incorrect execution of process step.

Direct and indirect manipulation

Two ways of manipulating digital objects

Direct

By selecting digital objects with finger (or extension of finger i.e. the mouse) we can do something to it.

Mimic action could perform on object in real world.

It’s more easily learned and used.

Indirect

Command that isn’t directly part of the digital object

Eg Select All and Delete

Feedback and feedforward

Feedback – indication that something has happened, which needs to happen early and often.

It’s essential to design and user experience.

Designers’ task is to create appropriate feedback.

Feedforward – showing what will happen before you perform a task

This can take the form of a message or hypertext links.

Gives users confidence in performing action.

Characteristics of good interaction design

  • Trustworthy
  • Appropriate
  • Smart
  • Responsive
  • Clever
  • Ludic
  • Pleasurable

[DATAVIZ] Critique of BBC’s Altered States

Mar 282012
 

The BBC’s Crossing a St Louis street that divides communities is an example of a data visualization that uses video.

At the center of this story is a numbers heavy story. The data behind this visualization is a study about segregation in US cities based on census data.

This piece works very well for a number of reasons:

The focus of the piece is the experience of real people. The video leads with a character, a St Louis resident explaining to the viewer what we’re looking at — a divided city.

The data used is interspersed throughout the video, used in manner that punctuates and emphasizes the points the characters are making about living in the city.

The first introduction of data is particularly effective. The character has already set up the story for the viewer, then the camera physically pans up and out of Delmar Boulevard to show an aerial view of the city. Text overlays and a moving red line adds context and explain the wider issue.

The raw data in the video comes in the form of the colored overlays over the city: the median income and median home values. These figures are displayed only with text, allowing the viewer to digest the information without the disturbance of the narration. Music is used effectively at these junctures, too. In place of narration, ‘dramatic’ music cues the reader for a change that is about to happen. In the case of the visualization of the median value of the homes, this is the difference in price of houses on the two sides of the street.

The shooting style of the video is appropriate to the subject matter. There are scenes shot on a split screen, emphasizing the central point made in the video. This effect runs the risk of causing cognitive load by distracting the viewer with information from multiple outputs; but because only one character talks at a time in each screen, it works well. It might have served a better purpose with perhaps one or two fewer frames, though.

This is an excellent example of using data in an innovative way, that clearly tells a story about numbers in a way that doesn’t detract from the human angle. The use of video is appropriate to the subject matter and is not only used effectively, but also in a manner that helps carry the story forward and injects some creativity into the piece.

The 10 principles of open journalism

Mar 262012
 

In a live Q&A on 26 March, a day after the Guardian’s Open Weekend, editor-in-chief Alan Rusbridger discussed open journalism.

“Open journalism is journalism which is fully knitted into the web of information that exists in the world today. It links to it; sifts and filters it; collaborates with it and generally uses the ability of anyone to publish and share material to give a better account of the world.”

Rusbridger said the Guardian follows 10 principles when considering open journalism:

  1. It encourages participation. It invites and/or allows a response
  2. It is not an inert, “us” or “them”, form of publishing
  3. It encourages others to initiate debate, publish material or make suggestions. We can follow, as well as lead. We can involve others in the pre-publication processes
  4. It helps form communities of joint interest around subjects, issues or individuals
  5. It is open to the web and is part of it. It links to, and collaborates with, other material (including services) on the web
  6. It aggregates and/or curates the work of others
  7. It recognizes that journalists are not the only voices of authority, expertise and interest
  8. It aspires to achieve, and reflect, diversity as well as promoting shared values
  9. It recognizes that publishing can be the beginning of the journalistic process rather than the end
  10. It is transparent and open to challenge – including correction, clarification and addition
 Older Entries