Oct 15

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.

Oct 11

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)

Oct 08

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.

Sep 25

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!

Sep 19

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 interactive-isotype.org so please go over there and take a look at the first promising prototypes.

May 28

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?

Apr 23

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

Example of Ill-formed signs (Source: interaction-design.org)

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.

Apr 03

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.

Mar 30

How e-learning research can benefit dataviz design

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.

The video mentioned in the second last slide is The Value of Data Visualization.

Mar 22

Isotype Interactive

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)

Older posts «