The Basics of User Experience Design by Interaction Design Foundation - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Image

9. Information Visualization – A Brief Introduction

Read time: 4 mins

Have you ever thought about how much data flows past each of us in an ordinary day? From the newspaper you read at breakfast, to the e-mails you receive throughout the day, to the bank statements generated whenever you withdraw money or spend it, to the conversations we have, and so on?

In case you weren’t sure of the exact situation on the average, there is a tidal wave of data associated with each aspect of our lives. What’s more interesting, and probably more frustrating in some regards, in addition to that personal data, there is data available on nearly every aspect of life.

Over the last few decades, computing and the Internet have revolutionized our ability to create, store and retrieve information on a whim. A global economy and instant communication have created an explosion in the volumes of data to which we are exposed. At the same time, the amount of data leads to a large amount of possible confusion and decision paralysis. There’s more data available than we can comfortably process.

Information visualization, the art of representing data in a way that makes it easy to understand and to manipulate, can help us make sense of information and thus make it useful in our lives. From business decision making to simple route navigation, there’s a huge (and growing) need for us as designers to present data so that it delivers value.

An Example of Everyday Information Visualization

This map, generated in Google maps, offers two simple ways of representing the route from Chiang Mai in Northern Thailand to the capital of Thailand, Bangkok, in the center of the country.

https://public-media.interaction-design.org/images/uploads/881c3edecde9cf4d858b592500d59ca8.jpg
Author/Copyright holder: Google, Inc. Copyright terms and license: Fair Use.

A map in word and picture form—one will hold greater value to a certain kind of user, while another user will treasure the other one more. It’s mostly down to purpose.

The first representation consists of written instructions on how to go from Chiang Mai to Bangkok (as you can see, it’s a pretty simple drive – though, it’s worth noting that it would be more complex if we were to be moving between specific points within each city). The second representation is an image of the route itself imposed on a map.

Both representations represent value to different people. The first, the written instructions, is highly useful to people who need to get from Chiang Mai to Bangkok directly (for example, a businessman going to a meeting).

The second, the map data, on the other hand, could be really useful to a tourist who intends not to drive straight from A to B but rather wants to know “What’s on the way?”. This lets the tourist look for potential break points in the journey and start to research what their options are in those places.

Both of these representations are examples of information visualization. The first relies on clear simple instructions and the minimum of graphical content – it conveys a simple set of useful instructions. It is as fast and to-the-point as that businessman’s demands. The second conveys rather more data and in a visual form that allows for rapid cognitive processing to enable us to digest the information we see quickly. At the same time, it invites the imagination to dip in and process the information more leisurely.

Common Uses for Information Visualization

There are some very common uses for information visualization, and these include:

Presentation (for Understanding or Persuasion)

“Use a picture. It’s worth a thousand words.”
—Tess Flanders, Journalist and Editor, Syracuse Post Standard, 1911

Journalists have known for a very long time that some ideas are simply too awkward to communicate in words and that a visual representation can help someone understand concepts that might otherwise be impossible to explain.

https://public-media.interaction-design.org/images/uploads/442f1c2de344737b6bd435eb363f6438.jpg
Author/Copyright holder: Lablascovegmenu. Copyright terms and license: CC BY 2.0

At a glance, one might find it hard to imagine this map—of the London Underground system—to be able to capture the essence of the ancient capital in such a neat way. However, it does just that—users want to know how to get to sites that have unique, organic features; they don’t want those features showing and slowing them up on a map.

One of the most famous information visualizations in the world is the map of the London Underground. It is only a ‘map’ in the loosest sense of the word, in that the geography above ground is very different to the way it appears on the underground map. However, it enables pretty much anyone to understand in the quickest possible way how to get from one point in London to any other using the underground system.

In simple terms, the underground map presents complex data for the purposes of understanding that data so as to make it useful. It doesn’t have to matter that the Thames looks like an impossibly geometric river; users aren’t using the subterranean trains to explore the riverbank, after all.

There is a ‘dark side’ to the presentation of information for understanding—the presentation of information to persuade. There are “lies, damned lies and statistics”, as the saying (usually attributed to Mark Twain) goes. By choosing what information to represent and what information to leave out, there are now “lies, damned lies and information visualizations”.

It is up to the presenter to decide where the ethical boundaries are in persuading people through information visualization. For example, you could show a graph that states “70% of people who use homeopathy feel better than those who don’t” but omit the fact that “70% of people who take a placebo feel better than those who don’t”. Being economical with the truth does not automatically make you a distorter of reality (or ‘liar’ in old money). The main thing is knowing the difference and how moving close to the boundaries can benefit your organization and usership.

Explorative Analysis

https://public-media.interaction-design.org/images/uploads/87b2e5e7874a443f862e63fe9732081a.jpg
Author/Copyright holder: Center for Disease Control and Prevention. Copyright terms and license: Public Domain.

A geographical image can capture powerful data regarding the incidence of disease. At a glance, we can see clusters of high frequency and work out the significance as regards likely causes, contributing factors, etc.

The image above portrays the frequency of lung cancer within the United States by geographic region. Mapping disease data like this enables researchers to explore the relationship between a disease and geography. It’s important to note that this data doesn’t explain why there is a spike in cancer rates in the South East of the United States, but it does indicate that there is a spike which is worthy of further investigation.

Explorative analysis through information visualization allows you to see where relationships in data may exist. From there, you can proceed to work on discovering the factors, links and reasons underlying the reality.

Confirmation Analysis

We can also use information visualization to help confirm our understanding and analysis of data. For example, if you perceive a relationship between two stock prices, you can plot the data and see if the two are related.

https://public-media.interaction-design.org/images/uploads/dff24f1a203eb1a7e8bf85422f2968c8.jpg
Author/Copyright holder: Arthena. Copyright terms and license: CC BY-SA 3.0

For confirmation analysis, we use information visualization by tracking a couple of items’ behaviors and comparing them so as to establish a link.

We might use this graph (above) to show the similarities in Brownian motion between sets of particles, or we might use it to question the break in the relationship towards the end of the graph. For instance, we might envision two experiments; in each, a group of dust particles are run through a cylinder containing methane in two different concentrations. Both voyages of the dust particles involve their colliding with a large set of smaller methane particles, all moving at different speeds and in seemingly random directions. The dust particles will move erratically (as shown in the jagged lines). In the first experiment (the green line), they have less methane to deal with—nevertheless, in both experiments, the dust particles more or less conform to the proportions of gas around them, at least until the end. We might want to investigate what happened in the second experiment so as to see why the dust particles ended up moving so differently at the far side of the cylinder.

The Take Away

Information visualization is designed to help us make sense out of data and swiftly so. We can use it to explore relationships between data, to confirm ideas we hold about data, or to explain data in an easy-to-digest manner. We may also use it, as long as we stay mindful of our ethical duties, to help persuade someone with data.

As the volume of data available to us increases exponentially in every field of endeavor, information visualization is becoming increasingly important as a skill in the workplace and in academia. With this in mind, you should weave such representations carefully into your designs, balancing convenience for users so as to help their decision-making processes against considerations of purpose, namely what are they seeking to achieve and how can your images help them?

References & Where to Learn More

Tess Sander’s original quote was printed in "Speakers Give Sound Advice", Syracuse Post Standard (page 18). March 28, 1911.

You can find some interesting ideas and definitions around information visualization here –http://www.infovis-wiki.net/index.php?title=Information_Visualization

You can find some beautiful examples of information visualization here –http://www.informationisbeautiful.net/

Information Visualization

Beginner course

Whether or not you’re involved in the rising field of big data, information visualization skills are in high demand. Information visualization can help with many of your design processes—by allowing you to collate and present data, and turn raw data into meaningful patterns and actionable insights. From designing meaningful interfaces, to processing your own UX research, information visualization is an indispensable tool in your UX design kit, and one you can learn from Alan Dix, a former professor at Lancaster University, UK, in our course Information Visualization. A world-renowned authority in the field of human-computer interaction, Alan will guide you through both practical lessons and the theory behind how to distill rich information into meaningful visuals.

Learn more about this course

What Our Members Say About Us

“I wanted to thank you! IDF is just the best thing ever. Just ever! Making this information accessible and available at the high level of quality. Just awesome!”
Phillip Dodson, United States

“The course covers a lot of the fundamentals, particularly the history of data visualization and how people actually comprehend data.”
Reid Dickson, United States

“I am happy with the content of this course and other contents in IDF's site. This is helping me to reinforce my knowledge and define the concepts, discovering I knew more things about UX that I expected!”
Julia Maroto Romero De Ávila, Spain

View the course curriculum