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.
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.
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.
Yesterday I had the honor to speak at the Show me the Data 2012, a conference in Amsterdam that also featured talks by Alberto Cairo and Jan Willem Tulp. In my presentation I explained how in my opinion data visualization can benefit form research in multimedia learning. At the end, I called for more experiments with visualizations that combined interactivity with verbal narration. So, to put my money where my mouth is, I edited my talk a bit and created this interactive audio slideshow.
For a moment, I thought it was a coincidence. A few months ago I became fascinated by Isotype, the pictorial language created in the 1920s and 1930s. Within the span of a week, I found out that several people I work with actually had made the same discovery.
First I attended an impassioned lecture on ‘graphics with a cause’ by my colleague Yuri Engelhardt who compared Otto Neurath, the father of Isotype, with Hans Rosling, a modern protagonist of the power of visualization. A couple of days later I discovered that Eugene Tjoa, with whom I collaborate in several projects, was planning to revitalize the work of Gerd Arntz, the man who designed most of the Isotype icons.
Of course it was not coincidental at all. Sooner or later everyone interested in data visualization stumbles upon Isotype and is captivated by its clean icons and its clear principles of design. Neurath’s guidelines for visualizing data are as valuable today as they were when he wrote them down in 1936.
For obvious reasons, interactivity is not part of the Isotype cookbook. That’s what makes Eugene’s plans to modernize original Isotype productions so exciting. He will update the statistics of visualizations designed by Gerd Arntz and enhance them by adding interactive features. In my opinion, the challenge of this great experiment will be to keep the interactive design as clean and effective as the original visual design. And although Neurath never knew about interactive media like the web, he did write about combinations of Isotype images in exhibitions. With a little fantasy, this remark could be a good starting point for creating isotype interactives:
Every picture has to give a new impulse to attention, to conscious thought, to a desire for deeper knowledge. Interest has to be the guide between one picture and another. But it is possible to overdo things. “Less is more.” The teaching effect will be greater, the memory will be clearer, when only a small number of good pictures has been given, every one different from the other, and a the same time every one supporting the other.
(International picture language. The first rules of Isotype, 1936, p. 66)
data and view specification (visualize, filter, sort, and derive);
view manipulation (select, navigate, coordinate, and organize); and
analysis process and provenance (record, annotate, share, and guide).
The authors write:
These categories incorporate the critical tasks that enable iterative visual analysis, including visualization creation, interactive querying, multiview coordination, history, and collaboration. Validating and evolving this taxonomy is a community project that proceeds through feedback, critique, and refinement.
Although this blog is about interactive infographics, I’m interested in other aspects of information visualization as well. Lately, as the previous post indicates, I have been studying Isotype as a forerunner of infographic design. Earlier I wrote about my fascination with animated infographics or explanimations. Logically, I was very happy with a presentation by Ekaterina Yudin that I attended last week.
To obtain her master’s degree in New Media at the University of Amsterdam, Ekaterina wrote a thesis on data visualization in documentary films. She analyzed modern work but also included films by the famous British documentary maker Paul Rotha. During her presentation Ekaterina showed some fine examples of the way Rotha used the pictorial language Isotype to explain economic and demographic processes. Unfortunately these early examples of Isotype on screen are not available on the web – unless you have access to BFI Screenonline.
The other movies she studied are more contemporary. Most are modern classics – at least in the visualization community – like An Inconvenient Truth (2006), Food, Inc. (2008), The Crisis of Credit (2009), Joy of Stats (2010), and Inside Job (2010). I.O.U.S.A. was new to me – I somehow managed to miss it when it came out. This documentary uses all kinds of animated charts and diagrams to explain how the exploding national debt of the United States brings us on the brink of a financial meltdown. Mind you: the film was released in 2008 before the financial system actually collapsed.
In all the examples mentioned above visualizations are used to explain something in a classic, linear narrative. However, as an increasing number of interactive documentaries demonstrates, on the web stories no longer have to be linear. In online documentaries, explains Ekaterina, visualizations can have a different purpose than explanation. Mostly they are used as a part of the interface, like a map or a timeline that helps to navigate the story. Examples are Gaza Sderot (2008), This Land (2009), and The Interview Project (2010).
Online documentaries rarely use truly interactive visualizations “where viewers can manipulate the data points on the graphic display or interface, introducing design decisions that do not apply to non-interactive media.” Ekaterina found only one: Collapsus (2010), a dramatic story about the forthcoming transition from fossil fuel to alternative fuels that combines interactivity with animation, fiction and documentary. This award-winning project was produced by Dutch cross media production outfit Submarine. Not coincidentally, the same company hired Ekaterina as the new producer of their online channel. I’m looking forward to future documentaries with lots of interactive infographics!
Like most research the study of interactive infographics is interdisciplinary. I try to mix concepts and ideas from different fields ranging from communication theory to information visualization and cognitive psychology.
In reply to my previous post about the functions of interactivity Eugene Tjoa advocates more attention to explanation in interactive infographics. I totally agree with him. Information visualization has a very fruitful influence on the design of infographics but most infovis techniques are developed for specialists, not for a general audience. Furthermore, there are no general accepted conventions (yet) about the interaction design of visualizations. And although recent research suggests that visual difficulties can stimulate engagement and active processing of information, I think it’s a good idea to at least initially give users of interactives some clues about what they are looking at and how they can play with it.
At the New York Times they call these clues the ‘annotation layer’ and they take them very seriously. At last year’s edition of the Eyeo Festival, Amanda Cox of The Times graphics department stated that “the annotation layer is the most important thing we do.” Without it, she explained, it’s like saying to your audience: “Here’s an interface, now go ahead and browse for the rest of your life.” If you missed her presentation, be sure to watch the video.
The BBC also often adds a layer of annotation to its interactives. Literally. A good example is their interactive map of deathly accidents on British roads between 1999 and 2008. On opening the page, the actual map is partly hidden behind an overlay with a text that explains what data is visualized and how it can be manipulated. After this ‘window’ is closed, smaller overlays indicate the three ‘manipulation modalities’: you can enter your postcode, zoom in on the map or specify a year.
But when it comes to explanation, even the BBC can’t compete with The LRA Crisis Tracker. The smooth design of this interactive map and timeline in a way conflicts with its sinister content. The website offers a live overview of the atrocities committed by the Lord’s Resistance Army in central Africa. Visitors can track the number of abductions, mutilations and killings in real time.
Maybe it’s because of the gravity of the data that so much attention is paid to clarifying them. On your first visit you are automatically presented an overlay with a movie that explains what the site and the data are about. After closing the video player or on subsequent visits, the map and the timeline present themselves with a small animation that highlights the different interactive options and gives you a feeling for the amount of data. It’s like the designers adapted the famous visualization mantra to: Explanation first, then overview, zoom, filter, and details-on-demand. Unfortunately the animation doesn’t run as smoothly anymore as it probably did when the site was launched. Sad but true, the likely cause is the increase of woeful incidents.
My research is about the effectiveness of interactives. One thing I’m interested in is the influence of the type and number of interactive features on the ability of an infographic to transfer information. But before you can study this influence, you first have to define what these ‘interactive features’ actually are. Different typologies are possible. For instance, one could look at the form of interactive elements, like buttons and sliders, but in my model of interactivity these are just images or representational modalities. I’m more interested in the functions of these elements, or what I’ve called their ‘manipulation modalities’, like browsing, showing, hiding, dragging, zooming, filtering, or adding data.
Of course, researchers have categorized the functions of interactive features before. Probably the most famous classification is the one Ben Shneiderman proposed in The Eyes Have It, his famous article about the Visual Information Seeking Mantra: overview, zoom, filter, details-on-demand, relate, history, and extract. Recently I found a taxonomy of interaction techniques by Yi, Kang, Stasko, and Jacko. Although their typology looks like the ones above, it’s actually of a higher level. The following categories of interaction aren’t based upon tasks or functions, but upon the intent of the user: with what purpose does he or she perform a certain interactive operation?
Select: mark something as interesting
Explore: show me something else
Reconfigure: show me a different arrangement
Encode: show me a different representation
Abstract/Elaborate: show me more or less detail
Filter: show me something conditionally
Connect: show me related items
The typology is based on a review of professional information visualizations articles and tools and clearly focuses on the visualization of data. It would be interesting to test its usefulness with regard to interactive infographics in general, for example by analyzing a corpus of popular interactives on the web. According to the authors the categories are not exhaustive: “Some techniques are difficult to classify and do not quite fit into any one of the categories.” A quick try on What employees say, an interactive about the Fortune’s annual ranking of the best companies to work for created for CNN by Infographics.com, indicates that the opposite is true as well: in some cases one single click will perform several of the functions from the list above. Whether that says more about the typology or about the interactive, I’m not yet sure.