REVIEW | riots

REVIEW

To play, press and hold the enter key. To stop, release the enter key.

Layout and UX

The visualization is very well organized: first the user selects which rumor to visualize, then he can see a Timeline on the top, and on the bottom the representation of the tweets for the time selected.

The timeline highlight events with vertical lines and numbers, is very clean and understandable. These events relate to the information below and, even if this relation is not specified, it's easy to grasp thanks to the interactiveness of the tool (the users clicks and drags, and easily understands how it works)

The application data is only composed by tweets, but it would be wrong to think that this makes it completely objective (w.r.t. the data sources). In fact, there has been some heavy filtering. First, the rumors had to be selected (and this introduces bias) and then, for each rumor, the corresponding tweets had to be found.

This filtering was done in cooperation with journalists of "The Guardian". There's also another foggy point here.. the tweets were only selected based on common hashtags, which could be very limiting even though it probably was the most direct way of searching for related information.

To play, press and hold the enter key. To stop, release the enter key.

Colors

Colors are important for two main reasons: they can show data (categories, levels etc..) and they make pleasant the user experience.

In this case, the color choice was appropriate for the bubbles (green: positive, red: negative is natural. Yellow is in the middle and represents indecision, while a general comment in gray, neutral).

Data

Graphic

Design

The Animation

The animation is central to the user experience in this visualization, and has been paid particular care in this case. We have a PLAY/PAUSE button, useful to see how the situation evolves without having to manually scroll the timeline. The bubbles respond dynamically to the animation, moving, struggling.. it gives a visceral sense of movement, as if the rumors were battling each other and it makes us want to know which one wins in the end!

The animation is constant speed, and doesn't slow down when a lot happens, or pauses for the user to read the events' descriptions. This forces the user to either watch it twice or keep hitting PAUSE to stop and understand what is going on.

The bubbles keep moving even if the animation is stopped. This is unnecessary and not connected to any real world value (they move at random), but it's still cool and invites the user to play with them, without compromising the effectiveness.

Unfortunately one important part is confusing here: why do the tweets become smaller and smaller in time? The size is supposed to be proportional to the number of followers (as it's said in the legend), but in effect it's also dependent of how old a tweet is, and this is not clearly specified. Not only this, the legend says that the darkness of the color is specifying the age of the tweet (correct), therefore this information is given with two different dimensions and this can be confusing. Moreover, if we stop the animation, we cannot know wether a tweet is small because not very influential or because very influential but old.

See the data

It's actually really easy to access the real data, simply hover over a tweet to see its content, date, user and user popularity (number of followers).

The data is clearly labeled and has meaning to it, the only confusion being the size/popularity problem already explained before.

The tweets contain the actual links to the #hashtag and @users, so that it's really easy to get to the source (twitter.com) by clicking.

This is a very curated visualization, meaning that it's not flexible and the data was already selected by the creators. Of course it would be nice to have this to work on generic hashtags but it would not be feasible (how could we determine positive/negative tweets? etc.. ).

Misleading

One big problem I found is that every rumor in this visualization proves to be false except one. In the introduction it's said that these are just rumors, and they almost all are.. and then the last one is true! This wouldn't have been really bad if it weren't for the fact that this difference is not clearly displayed, only a small text (gray on black) at the top, really hard to notice.

Quantitative Analysis? Not really possible..

There is a problem if we want to compare different stories in the visualization.. not only the quantitative data is not really precise (only a small graph in the timeline) but, more importantly, the animation has a fixed duration, therefore its speed changes depending on the duration of the rumor. This makes it confusing jumping from a rumor to another, since we might think that one is much more actively spoken of than the other, while only the total duration is greater.

The links are also colored in a nice shade of blue, which makes them obvious as links and well integrated in the UI. Other elements are mainly B&W, they are not conveying data and therefore should not be too colored and confusing. In general the colors are simple and well thought.

There's one problem in the sense of color blind people, in particular Deuteranopia and Protanopia really mess up the visualization because the two main colors, red and green, are mixed and therefore the whole representation fails.

Fonts

The fonts are very relevant for text based visualizations, not so relevant in this case where the animation and the colors are the focus of the user attention. Still, there is need of good fonts to show the tweets, and the legend (which is very important in this case because the visualization is not self explanatory). Sans serif fonts are used for legibility, the sizes are appropriate and relative to the importance of the content. One exception is the title which is in a Serif font, a very good choice because it reminds us of Newspapers' titles, a fit choice for this visualization and in line with the Guardian website style.

Page Layout

Unfortunately, due to limitations/constraints of the webpage this visualization was inserted into, the overall experience is poor. The page layout is confusing and contains advertising, sharing links, etc.. which are not well separated from the visualization itself, making it a bit less enjoyable that it would have been standing alone.