The ripple effects of unrest, protest and regime change have been echoing around the Mid-East since before the beginning of the new year, each seeming to start a new chain of events. The Guardian, one of the UK’s leading news-sources, has been steadily doing excellent reporting throughout with live-blogging, social media integration, and generally solid writing. To summarize and centralize the multitude of events across countries, Garry Blight and Sheila Pulham of The Guardain created “The Path to Protest” – an interactive timeline plotting major news events across countries, updated daily.

When the page loads we get a nice introductory animation that gives a quick overview of the timeline of events and very clearly suggests functionality. Last to load are the navigational elements, suggesting how we should explore the timeline.

The suggested dimensionality and well-defined symbols are visually striking and there are some smart interaction design elements as well. The symbols and key are easy to follow and the relationship of the timeline stripes to their country labels is obvious, especially when hovering over an event. Unlike in the “2011 Egyptian Revolution” infographic we discussed here, this piece leverages all the content produced by The Guardian and enhances its utility by linking data points to actual articles. Using the “navigation stick” advances the graphic at a readable and controlled pace that feels like scrolling.

The “navigation stick” along with the timeline slider at the top have received some criticism on twitter voiced to Garry Blight a.k.a @pixelsquid from @wrbeard:

@wrbeard: Kept wanting to click & drag the arch. Also, a “next/previous event” could have been helpful.

@wrbeard:Responded. See previous. I also felt the nav slider was hard to control.

and from @macartisan

@macartisan: I’d explore how to simultaneously show different slices through the dataset at given time w/o hover @shoq @jetjocko

@macartisan: Note @shoq’s objection to data-ONLY-on-hover. It’s important to solve for mouseless accessibility @jetjocko

I had similar reactions to the navigation but didn’t think it got it the way of the content as some commenters suggested. The giant arrow on the timeline does to some degree suggest that it clicks and drags, something a lot of users tried to do, myself included. The dates in the scroller across the top are somewhat irrelevant since they don’t quite match up with the news stories closest to the user on the timeline. This interaction doesn’t need to be accurate though since it’s mostly meant for exploring the content. @wrbeard‘s comment about a previous / next event also makes a lot of sense; the stories are broken up by week on the timeline so being able to click through the weeks would offer a good alternative to the two, somewhat redundant, scrolling mechanisms.

From an accessibility standpoint @macartisan‘s point reveals the graphic’s utility as limited to web audiences. The other point to make about the hover state is it hides the “navigation stick” from view until the user moves somewhere else. Obviously the cursor couldn’t be in two places at once but it feels strange to hide a major navigational item to display more data.

Garry has addressed and responded to many of these concerns in his twitter stream and plans to implement some changes in possible future iterations of the interface. To his list of possible future additions I might encourage him to think about including another layer of data by scaling icons on the timeline in two ways: by the number of protesters or by global social network reaction. This would of course change the piece’s function entirely but it might be interesting to see. More in keeping with the current purpose of the piece, there might be a way to list out the articles for each country’s timeline on user request or below the application, enhancing access beyond flash and the mouse.

The graphic has been shared across the web and praised for its striking visuals and extreme utility – congratulations to Garry for such a solid piece. His employer, The Guardian, continues to be a leader in sharing news data and strong visualizations and we hope it stays that way.