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.

What’s the purpose of interactive features?

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, 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.

Best Interactive Infographics on the Web (according to Dutch Designers)

What are the most inspiring interactive infographics on the web? It was just one of the questions I asked Dutch infographic designers in a survey I conducted earlier this year. A total of 39 respondents together submitted 90 best practices, either entire websites or specific interactive infographics. Some of them are well known examples, others are nice surprises. These are the websites that contain one or more outstanding interactives according to at least two respondents.

The New York Times (17 mentions)
Not surprisingly the Grey Lady of journalism is the most often named as a source of inspiration when it comes to interactive infographics. Particularly the one about jobless rates for different groups (5 submissions) was praised: “phenomenal visualization”, “tells a good story, relevant for many people” and “brings you the information you want on a silver platter”. One designer commented: “Amanda Cox is really a super talent, along with the team at NYT she makes incredibly good graphics”. Some other interactives that were specifically mentioned are Is It Better to Buy or Rent? (“A complicated financial decision made very transparent”), Fractions of a Second: An Olympic Musical (“Very smart, in this case sound works better than image and elegant design”) and Tracking US Airways Flight 1549 (“Content and form perfectly match”). The election and census projects were submitted as well. (5 mentions)
The Times is what the French call hors concours. Interestingly enough the number two on the list is a specific interactive infographic featuring on a local newssite for New Orleans. Designers acclaimed the 2010 Oil Spill Gulf of Mexico interactive for its clear presentation of events: “Beautiful day-to-day overview of the disaster”. According to one respondent interactivity adds to the usability of this infographic: “You can determine how and in what pace to read the graphic.”

Gapminder (4 mentions)
The next one is more in line with expectations. Hans Rosling’s homage to visual statistics was nominated 4 times. According to Dutch infographic designers, “brings statistics to life”. It’s “the best site for visualizing data”, “simple, but so much insight”. One respondent revealed: “You’ll never get enough of Gapminder. It gives you a completely different view of the world.”

CBS (4 mentions)
CBS stands for Centraal Bureau voor Statistiek, a semi-governmental institution responsible for collecting and processing public data about the Netherlands. Since a couple of years the bureau is experimenting with interactive visualization techniques resulting in a showcase both diverse in topics and types of visualization. According to one designer the CBS interactives are good examples of “functional design”.

BBC (3 mentions)
The good old Beeb defends the honor of the Brits. Specifically mentioned were the interactive visualization of a debate about the white working class (that looks a bit like Jonathan Harris’ We feel fine, that was submitted as well), the Interactive Body and a piece on the rescue of the Chile miners in 2010. Interestingly enough not one respondent mentioned The Guardian. Given its leading position in data journalism, I had expected this newspaper to be the number two on the list, right behind The NY Times. As proven by this very useful overview, they are definitely in the same league.

Graphic News (2 mentions)
Graphic News is a news agency dedicated to infographics, including interactives. The respondents who submitted this service both mentioned the sport graphics, maybe because they sometimes include live results that are updated automatically.

Google Maps and Google Body Browser (2 mentions each)
One could argue whether Google Maps is an infographic but according to two respondents the service at least is a good example for those who design interactives. The Body Browser was praised as “a nice way to display several layers”.

Prinsjesdag 2010 (2 mentions)
On Prinsjesdag the Dutch Queen addresses both houses of parliament and delivers the Troonrede (the speech from the throne similar to the State of the Union in the United States). The speech contains the political agenda of the government for the coming year. After that, the corresponding budget proposal is presented. Last year, the Dutch government used an interactive Checkbook of The Netherlands to explain the budget. Who knows, maybe that’s where some journalist picked up the idea

Newsweek (2 mentions)
This interactive infographic of The Worlds Best Countries has featured on this blog before. It compares the world’s top 100 nations on topics like health, education and economy. As one respondent wrote: “A strong visualization based on an immense set of data.”

Information is Beautiful (2 mentions)
Another classic that was well appraised by the visualization community. This interactive balloon race compares the scientific evidence for over 100 nutritional supplements, from Fish Oil to Omega 3. It was recently updated.

Nikon (2 mentions)
As is clear from the entries above, the use of well designed interactive infographics is certainly not limited to newssites. Some of the best examples can be found on websites created by governments, NGOs or companies. This is also the case with the last two interactives that are submitted by more than one designer. Nikon did a nice job with Universcale, an ‘infinite yardstick’ that lets you compare objects from the neutron to a galaxy. “Well designed, although very complex”, one respondent remarks. “Narrative and explanatory”, the other adds. For similar interactives about the scale of our universe see this post about The Powers of Zoom.

FedEx (2 mentions)
Just like Nikon, FedEx uses data visualization to showcase its intellectual resources. Paying tribute to its commercial tagline – FedEx Delivers to a Changing World – the company offers a series of interactive cartograms that shows how exactly our world is changing on all kind of demographic topics. “Smooth movement, gives you the feeling you’re in control”, one designer writes. And that probably is exactly what FedEx aims at, because: who doesn’t want to be in control of our changing world?

Miss anything? Feel free to leave your own favorites in the comments.

Interactivity, a model

Coincidentally, I had to explain the theoretical background of my thesis on several occasions during the last couple of weeks. Each time I found myself drawing the same sketch of the model I use to define some of the key concepts that are part of my research questions. So when I was asked to speak at the Dutch Infographics Congress 2011 about my research, I didn’t need long to decide what illustration to use.

But what do you do when you have to address more than 340 designers and all you have is a sketch with some boxes and arrows? In my case, I pretended never to have heard of Edward Tufte and his data-ink ratio and instead decided to spice it up a little. To revive this blog and save me some ink in the future, I might as well post it online. So, here it is:

Communication students and scholars will recognize Berlo’s S-M-C-R model. In this model a source encodes a message that is transferred through a channel to be decoded by a receiver. I have made several changes. First, I changed the label of the first box to sender, because the source of information doesn’t have to be the one who sends the message. Secondly, I use the plural receivers for the last box, because the model aims at one-to-many communication.

I also changed the label of the third box. In modern literature that one often is called the medium. But in my opinion, channel and medium are both ambiguous concepts that can refer to everything from the five human senses (sight, hearing, taste, smell and touch) to the classic mass media (print, radio and television). Therefore I prefer the word device, by which I mean a physical object that can present the message and/or allows for user input in some way or another.

Last but not least I consider the two boxes in the middle to be layers that can hold one or more items. So the device layer can consist of one device (for instance a newspaper or an iPad) or several (screen, loudspeakers, keyboard, mouse, joystick et cetera). The same goes for the message layer: it can contain one message (a single article, an infographic) or a thread of them (email, an online forum et cetera).

So how does this model help me to conceptualize my research? Well, in the end I’m interested in the effectiveness of interactivity: does an infographic become more useful when one adds interactive features? But before even trying to find an answer, I have to make clear what I mean by interactivity and effectiveness. The model above helps me to explain three things about these concepts:

1. There are three kinds of interactivity
For more than 30 years scholars have been debating whether interactivity is a technical feature of the medium (medium-interactivity) or a parameter of the communication process as a whole (human-interactivity). The model shows there are actually three kinds of interactivity:

  1. When the device layer not only presents the message but also allows for feedback, for instance by pushing buttons, gesturing or talking, it’s called user-to-system interactivity.
  2. When this manipulation of the system allows receivers to change the content or the form of the original message or create a reply, it is called user-to-message interactivity.
  3. When the changed message or the reply reaches the original sender, it’s called user-to-user communication.

Based on this trichotomy, I define an interactive infographic as an infographic that at least offers user-to-message interactivity (the manipulation of the form or content of the infographic). A small minority of interactive infographics also offers user-to-user interactivity.

2. Interactivity depends on four types of modalities
The second thing the model makes clear, is that there are four sets of parameters that have to be taken into account when studying interactivity:

  1. Representational modalities define how the message is encoded. Berlo describes a message in terms of elements and structures, semioticians use terms like sign systems and codes, and scholars of literature and art talk about style, grammar and genre. All these concepts are used to describe the way the message represents the data, knowledge or ideas the sender wants to communicate. In terms of infographics one could think of text, symbols, images, graphs, diagrams and maps as representational modalities.
  2. Output modalities are the different ways in which the device can present the representational modalities to the receivers. They are connected to the human senses. For infographics the most common output modalities are visual objects (the actual presentations of the representational modalities) but one could easily imagine interactive infographics that use sound or even sensory pulses.
  3. Input modalities are the ways in which the device allows for feedback. These are linked to human expression forms like touching, pushing, moving, gesturing, speaking et cetera. Examples are typing, clicking and scrolling (using a mouse), pushing and swiping (touch screen) or moving and tilting (motion sensing devices like the iPad and Wii remote).
  4. Manipulation modalities are the different manners in which the message layer lets the receivers change its content or form. Examples are browsing, showing, hiding, dragging, zooming, filtering and adding data.

Obviously these manipulation modalities are most important when it comes to interactivity. But with regard to the effectiveness of interactive features, it’s the combination of all four kinds of modalities that counts.

3. Effectiveness is in the eye of the beholder
The last thing the model illustrates is about effectiveness. In daily life, something is effective when it’s able to accomplish a purpose. But whose purpose? The sender encodes a message with a specific goal. He or she wants to inform, to persuade or to entertain the public. Or maybe the purpose of the message is to collect data. Often the function of a message will be a combination of several of these purposes. So the first challenge is to determine what exactly is the goal of the sender. The effectiveness of the message is determined by the degree to which these objectives are met. The second challenge is how to measure this degree.

But the receivers have goals of their own to participate in the process. According to the uses and gratification approach to mass communication they use media to fulfill their needs. Sometimes these needs will match the goals of the sender, but more often they won’t. Furthermore, receivers can have different needs. Maybe some of them want to be informed while others just like to be entertained. So when it comes to analyzing the effectiveness of an interactive infographic (or designing one for that matter) it is important to make clear from which perspective you look at it.

So that’s it. Maybe it’s not perfect, but it does what a model needs to do: it helps to define, explain and study a complex process in reality. As described above, the model is meant to explain one-to-many mediated communication. To make it useful for one-to-one or many-to-many communication settings, it should be made symmetrical by adding a device layer between the sender and the message layers as well. If you have any other suggestions how to improve it, please feel free to share your thoughts in the comments!

Let’s go inside infographics

How do you get the user inside your infographic? That is the main topic of the 4th edition of the Dutch Infographic Conference held on March 4th in Zeist, The Netherlands. Keynote speaker will be Gert Nielsen, founder of John Grimwade will be talking about information design and the Tablet Revolution. The rest of the line-up consists of Dutch experts but don’t let that withhold you because all non-English speakers will be translated simultaneously. Headsets are freely available.

As a matter of fact I’m one of these speakers myself. I will present some preliminary results of a survey about interactivity I conducted among Dutch infographic designers. So if you’re interested in interactive infographics and you happen to be in the neighborhood, be sure to drop by in Hotel Theater Figi. Registration started last Friday, an early bird rate of € 100 is available until February 7th.