The Functional Art: learning with a smile on your face

This weekend finally my copy of The Functional Art arrived, Alberto Cairo’s long-awaited introduction to infographics and visualizations. Jubilant reviews can be found around the web (among others by Robert Kosara, Nick Diakopoulos, and Stephen Few) so I’m not going to praise again Cairo’s excellent mix of design practice and perceptual and cognitive theory, the wealth of his examples – mostly his own work- and the very interesting interviews with the avant-garde of data visualization and infographic design. Instead, I will focus on just one chapter, not very surprisingly number 9: The Rise of Interactive Infographics.

In this chapter, Cairo discusses general concepts from interaction design and describes – with a lot of examples – how these can be applied to infographics. So Don Norman’s principles of design (visibility, affordance, feedback, constrain, and consistency) lead to useful rules of thumb like: highlight relevant parts of your graphic, don’t hide pieces that are essential to understand the whole story, make sure the design of objects suggests what you can do with them, and be consistent in your interface design, preferably throughout a series of graphics.

In a similar manner, Ben Shneiderman’s Visual-Information-Seeking Mantra is the point of departure for a paragraph on the structure of interactives. Examples show how different interactive techniques (scroll, zoom, sort, filter, et cetera) can be used to navigate linear and non-linear graphics. At this point, I somehow expected a reference to the appraised work of Segel and Heer on narrative structures of visualizations, but true to the title of the book Cairo prefers a typology of interaction by Rogers, Sharp, and Preece. They categorize styles of interaction that are not based on form or structure, but on functionality. What is the purpose of the infographic: instruction, conversation, manipulation, or exploration?

I would have really loved if Cairo had elaborated a bit more about how interactivity in his view not only can be used to navigate an infographic, but how – from a cognitive perspective – it can help the user to achieve these different goals. What techniques are better for exploration, and what structures are ideal for instruction? However, this book is not only about interactives. For that, we have to wait for this German work which is due next February. And hey, wasn’t somebody trying to write a thesis on this topic?

Back to chapter 9. The final paragraph is about planning an interactive project. You won’t find lists with bullet points taken from some project management guide here, but a step by step personal account of a project Cairo did with The New York Times, including interesting facts about the topic at hand (in this case tennis courts), personal anecdotes and homage to the people he worked with. This style is illustrative for the book as a whole. Cairo writes from a first person perspective about his own experiences in the newsrooms of magazines and newspapers around the world (his print background shows when he consequently writes about ‘readers’ instead of ‘users’). Footnotes and references show he is up-to-date with the literature in several disciplines, but you never get the feeling you are reading a textbook. Apart from the outstanding content it is this conversational style that makes this book a must-read for everyone interested in infographics and visualizations. Reading it is learning with a smile on your face.

An icon for every noun in the world

How can I have missed this? Edward Boatman is the new Otto Neurath. As a design student in college he had a thought: “What if I had a sketch for every single object in the world?” After graduating he started working and was too busy to do something with his idea. However, due to the crisis he lost his job and suddenly found himself with a lot of time on his hands. With the help of his wife and an old friend he decided to make his dream come true. The Noun Project is an attempt to collectively build a database of universal icons and make them available to everyone. Read Edward’s story, view the video below, and take a look a all those beautiful icons, one for every noun in the world!

(Hat tip to Cool Infographics)

Next Year’s Winner

Take one look at the laureates of the Information is Beautiful Award that were announced last week and you know the visualization community is as international and cosmopolitan as it gets. Winners are based around the world, from the United States (Stamen) and the United Kingdom (Peter Jeffs), to Germany (Moritz Stefaner), Italy (Michele Mauri), Denmark (Peter Ørntoft), and Australia (Trent Brooks), to name just a few.

Of course that is a very positive development. However… I must admit that I was a bit disappointed that the two Dutch submissions stranded in the longlist (MusicalNotes by Lisa Dalhuijsen) and the shortlist (Timemaps by Vincent Meertens). Fortunately, there will be new opportunities next year. To be sure there will be at least one Dutch candidate for a gold medal, I hereby would like to nominate Close Votes, the beautiful interactive on last month’s parliament elections in The Netherlands created by Jan Willem Tulp.

A Vault of Visualizations

Many will agree that The New York Times and The Guardian are important – maybe the most important – pioneers when it comes to the use of interactive visualizations in journalism. Therefore it is interesting to compare these two newspapers. How do they manage the production of their interactives? And what are the similarities and the differences in their visualizations? Actually, these are precisely the research questions that Marije Rooze answered to get here master’s degree.

In her thesis (supervised by Yuri Engelhardt and myself) Marije first describes the characteristics of both papers and how they organize their online activities. To find out whether differences in identity and approach lead to differences in design and production, she then analyses 156 interactive graphics created by either The New York Times or The Guardian. Among the variables that she compares are the topic of the visualization, the kind of data that are used, the level of user participation, and the implemented storytelling techniques.

She concludes that her research has shown less exciting results than expected. The visualizations produced by both news organizations are in many ways comparable. With one exception: The New York Times regularly involves the audience but in a rather restricted setting. It this regard The Gray Lady still fits in the classic gatekeeping model. The Guardian, on the other hand, offers users the opportunity to create their own visualizations and thus redefines its role from the provider of news to a provider of data.

Marije has decided not to publish her thesis online but she did announce to write a series of blog posts that touch on different aspects of her research. I really hope she does, because there are a lot of interesting topics in there. In the mean time she started updating the corpus she used for here research. At the moment the overview shows 248 visualizations, so if you are interested in interactives, bookmark this visualization vault!

Waar komen studenten journalistiek van de UvA terecht?

Hij was al een poosje weg, maar op 28 augustus 2012 nam Frank van Vree officieel afscheid als hoogleraar Journalistiek aan de UvA. Een mooie gelegenheid om eens te onderzoeken waar ‘zijn’ studenten terecht zijn gekomen. De animatie hieronder – geïnspireerd door dit project van Eugene Tjoa – laat zien hoe Van Vree’s ideeën zich tussen 2000 en 2012 hebben verspreid over de journalistiek en aanpalende vakgebieden, in Nederland en ver daarbuiten. De gegevens zijn afkomstig van LinkedIn en Facebook, bladeren gaat met de pijltjestoetsen.

[swf], 800, 600[/swf]

The promise of Interactive Isotype

Some people are better in keeping their promises than other. I for instance promised myself to update this blog more regularly. Well, take a look at the date of the last post… However, Eugene Tjoa promised to modernize Isotype by adding motion and interactivity to the excellent artwork of graphic designer Gerd Arntz and applying it to current statistics. He actually kept his promise, found some funding and received approval by the Gerd Arntz Estate to use the orginal drawings. He is documenting this project on so please go over there and take a look at the first promising prototypes.

Interactive weather map… on TV

No other genre in journalism is more intertwined with infographics than the weather. It’s hard to find a newspaper or a news show that doesn’t use icons, charts and maps to forecast temperatures, wind speeds and the chance of rain.

Interactivity can add a lot of value to weather maps and charts, for instance by allowing you to zoom in on your own town, add layers of interesting information, drill down into historical data, or adjust the timespan of the forecast – to name just a few options. Examples of interactive weather maps are can be found all over the web, ranging from the nice an clean interface of the BBC to the elaborate dashboard by WheaterSpark.

Yesterday, Dutch public broadcaster NOS also introduced an interactive weather map… on television. It is presented on a huge touchscreen that is one of the main features of a brand new studio (as you can see in the video below, the presenter still has to get used to it). A clear case of remediation the other way round: this is not a new medium refashioning an old one, it’s an old medium paying homage to the new! Looking at the weather section of the website of the NOS there only one thing I don’t understand: why can’t we play with these interactive tools ourselves?

Patatverbod PvdA raakt tientallen tot honderden bedrijven

De PvdA in Amsterdam wil de verkoop van patat en andere vette snacks in de buurt van middelbare scholen verbieden. Het idee komt van raadslid Maarten Poorter, die in Het Parool vertelt hoe hij op de Dag van de Gezonde Schoolkantine leerlingen broodjes kebab en Turkse pizza’s zag eten.

In de discussie over het voorgenomen ‘patatverbod’ gaat het vooral over overheidsbetutteling. Maar hoe haalbaar is een verbod op fastfood in de buurt van scholen eigenlijk? Voor welke bedrijven gaat het gelden? Alleen voor snackbars en fastfood-restaurants, of ook voor lunchrooms en broodjeszaken? En wat te doen met supermarkten en hun aanbod aan snoep, chips en frisdranken?

Een andere praktische vraag is in welke straal het verbod moet gaan gelden. Volgens Poorter gaat het om “alle snackbars die op loopafstand liggen in het tijdsbestek van een kleine pauze.” Is dat 300 of 500 meter? Of willen scholieren best een kilometer lopen voor hun patatje? En om hoeveel bedrijven gaat het dan?

Bij wijze van vingeroefening in datajournalsitiek toont onderstaande interactieve kaart hoeveel bedrijven bij welke ‘loopafstand’ door de maatregel worden getroffen. De afstand kan worden aangepast met de slider onderaan de kaart. Zoom in en beweeg met de muis over een school om te zien welke bedrijven ‘te dichtbij’ liggen of vink ‘loopafstand’ aan voor een overzicht van alle gebieden waar het straks misschien verboden is te snacken.

Semiotic engineering: how, when, and why to use this interactive

Example of Ill-formed signs (Source:
Semiotics is the study of signs. It is not an institutionalized academic discipline but a wide range of theories that are used by scholars from all kinds of fields, including linguistics, philosophy, psychology, sociology, and communication science. Semiotics is also a bit confusing, because it lacks a general accepted conceptual framework and prefers rather vague terminology. As one critic, cited in Daniel Chandler’s excellent Semiotics for Beginners, remarks: “semiotics tells us things we already know in a language we will never understand.”

Nevertheless, semiotics can provide be a valuable approach in analyzing the characteristics and attributes of icons, pictograms and infographics, as the nice and comprehensive overview by Ansgar Vollmer makes clear.

In the latest chapter of the Encyclopedia of Human-Computer Interaction, Clarisse Sieckenius de Souza goes one step further. Semiotics not only helps us analyzing signs, it can also teach us how to create better computer programs. Semiotic engineering is a software design strategy that considers computers to be media instead of machines. It underlines the importance of metacommunication, “communication about how, when, where and why to communicate with computer systems.” Translated to interactive infographics, semiotic engineering could be interpreted as another strong advocate for the importance of guidance, annotation and explanation. In the words of Sieckenius de Souza:

Since designers cannot be personally present when a user interacts with software, they have to represent themselves in the interface, using a specifically designed signification system, and subsequently tell the users what the software does, how it can be used, why, and so on.

Edward Segel: interactive features should scream interactivity

In my presentation on e-learning research last week I made a short reference to Narrative Visualization: Telling Stories with Data, the famous article by Edward Segel and Jeffrey Heer. Today, Marije Rooze tweeted a link to this great video in which Segel shares his ideas on digital storytelling, data visualization, and interactivity. The most important thing according to Segel is that interactive features ‘scream interactivity’ to avoid a ‘click-and-seek experience’. He point out several ways to help the user: be explicit (‘click here’), make suggestions for actions, and give visual clues. The accompanying slides are online as well.