Data visualizations are inextricable forms for viewing and exploring data to understand our ever-increasingly complex, interrelated world. The technology used to create them allows for new forms of representation, unprecedented compared to those created manually. Much attention is given to the artifact of the visualization and its creation process. If the intention is to use these visualizations for exploring data and communicating the insights and knowledge it generates, then exploring how to improve the viewing experience is equally valuable.
User experience of viewing data visualizations
Adopting the 5E model from user experience design
What makes a user experience successful or not can be understood by deconstructing the experience itself down into its parts. Take the 5E model (Conifer Research 2002; see Figure 1)—originally known as the Compelling Experience Model (Kumar 2012, 178)—a three-stage model with two transition points that takes a temporal-based view to user experiences.
The 5Es stand for
Entice: attractors that invite you to the experience,
Enter: markings that signal the beginning of a new experience,
Engage: primary interaction of the experience,
Exit: markings that signal the ending, and
Extend: memories or tokens that help to continue the experience.
This model overlays a before-during-after structure to an experience and dissects it so that one can describe an existing experience. Such experiences can be of various scales, from taking public transportation to work to navigating through a hospital stay. This model can also be used to prescribe attributes that designers can take to create experiences that are meaningful or memorable.
The data visualization experience model
It is possible to draw a parallel with the 5E model to specifically when a viewer would see and interact with a visualization. From the initial arrival upon a visualization through the aftereffects of taking action (or not), all points are examined here in a way that mirrors the temporal approach of the 5E model (Figure 2).
The eight factors that contribute to the experience loosely mirror the three stages of the experience.
The context and nuances that are involved in a visual experience are wide and varied, but the author will focus on salient qualities that can allow scholars to evaluate and designers to develop effective visualization experiences. The first two of these eight factors—Perceptibility and Pre-Knowledge—make up the pre-engagement phase of the viewing experience.
Perceptibility: Can I see it?
The algorithmically produced nature of modern-day data visualizations allows for a new form of visual language that was not possible when charts and graphs were drawn by hand or by templatized tools like Microsoft Excel. While this is exciting as new forms of expression are developed, it equally creates challenges where the technology is highlighted over the human ability to visually perceive these new types of visual marks. A noticeable pattern across visualizations is to use microscopic visual elements that are too small to easily see what they are when initially encountering a visualization.
An initial state of confusion occurs when words are perceived as wispy lines or literal screen grabs are seen as miniature tiles. Gestalt laws of organization (Wertheimer 1938) tell us that our eyes tend to see the larger entire image rather than the individual visual elements. The burden is then on the viewer to use the zoom-in features of the viewing device to further decipher what the visual elements actually are. If the viewer is not aware that the visual mark is not actually what he perceives it to be, then that extra step is omitted. In other words, if the viewer perceives the line as a line and not a string of small text, that level of understanding would be completely bypassed.
Pre-knowledge: What is this?
The predominant use of visual symbols in data visualization require explanation on the part of the designer to a) describe what the viewer is seeing and b) instruct how to read and how to use the visualization, if interactivity is involved. Occasionally there also is citation of the data source or background information explaining the reasoning for why the designer created such visualizations.
This type of contextual content can appear in various forms: an introduction window that takes advantage of content loading times, surrounding text when visualizations appear in the designer's blog, content provided when the "i" or "about" button is clicked, or tacit tutorials where the initial view automatically includes some form of guide to assist the viewer (Segel and Heer 2010, 1145).
When new visual forms or interaction methods are presented to the viewer, these types of considerate explanations can alleviate the initial "What do I do now?" sensation and allow for an easier transition to engage with the visualization.
Once the visual elements of a visualization are perceived (or not) and the viewer can examine the visualization, multiple factors come into play simultaneously: comprehension, interpretation, utility, and engagement.
Comprehension: Can I understand it?
Being able to successfully perceive the visual elements of a visualization is not a guarantee that the viewer will understand it. Specialized visualizations of a particular domain require viewer knowledge of the content. Aside from viewer knowledge level, deciphering spatial and visual encodings (Bertin 1983, 60), understanding scales and measurements used in the visualization (Yau 2013, 109), assessing whether visual conventions can be leveraged (Kostelnick and Hassett 2003), etc. are cognitive activities that the viewer must perform.
Several other issues arise under this area that are worth mentioning. Visual metaphors are often used in visualizations for semantic or aesthetic purposes. In such cases, the viewer will also need to evaluate the semantic connections that the metaphor is trying to leverage. If the metaphor can aid the viewer to better understand the content of the visualization, then that would be considered a successful application. Careful matching and crafting of the metaphor is required.
Mismatches between data type and visual structures can be seen in visualizations. The fetishism towards circular visualizations often forces visualizations that use circles inappropriately (Few 2010). The cyclical nature of circles can support repeating events well, such as the lifecycle of certain living organisms over several years (Frankel and DePace 2012, 57). If visualizations are to be effective informational artifacts, the data type must map to the visual structure appropriately (Dastani 2002, 603). The following example attempts to visualize when certain words appear in the novel Les Misérable. A story that follows a temporal structure is mapped onto a circle with no clear indication of the beginning, middle, and end; one must search for them.
Visual conventions can be used effectively, but they can also be challenged in this new era of data visualization. The various ways in which time is represented is a good example. In traditional graphing language, time is typically expressed as the x-axis, running from past on the left to the future on the right. A quick search reveals several other ways to display the notion of time, such as using the radius as showing time (center is past, periphery is future) or time being expressed as age (past 5 years, past 2 weeks, yesterday, today.)
Computer-drawn visual elements can convey more dimensions than traditional methods. For example, lines traditionally embodied a constant dimension from point to point (e.g., solid, dotted, red, narrow). Visual elements that are computer-generated can be much more finely articulated and dynamic within a singular element. Take Aaron Koblin's Flight patterns, for example. A dynamic map of flight paths over the U.S. is represented by highly articulated lines that change brightness based on the altitude of the aircraft (Koblin 2011). The line is brighter when the aircraft is lower, creating dense areas of white line clusters where hubs are located. In addition to the conventional use of line as a path connecting two geographical points, Koblin has embodied the simple line with multiple meanings.
What this does is requires viewers to be cognizant of a new way of reading a visual element, in this case the line, in order to appreciate the full depth of the designer's intention.
Utility: Can I use it?
Data visualizations, which typically represent relationships between many variables, benefit from interactivity and all the affordances that this provides. Commonly known methods of direct manipulation (Tidwell 2011, 293; Schneiderman, 1997, 33) need to be obvious to the viewer along with any interactive features, functions, or actions that accompany the visualization. When designed effectively, complex information represented through a visualization can gradually unfold, providing progressive disclosure to the reader in a way that alleviates cognitive load.
Experimentation is to be expected in a new domain. However, visualization designers should leverage design knowledge and principles that already exist in the fields of interaction and interface design to create effectively usable digital artifacts.
Interpretation: What meaning do I make from it?
The reason we change modalities of the data, typically from text to graphic, is to engage our eyes in the thinking process (Few 2009, 30) and to help "amplify cognition" (Card, Mackinlay and Schneiderman 1999, 1). To do this, there are two related issues here: the production method of the visualization itself and the resulting inquiry the analyst can make.
The production method used to create the visualization needs to support discovery of the data by allowing the designer and the analyst to adjust the visual representation. Adjustments to visual attributes like colors to provide more contrast or scales to show micro-/macro-activities can help to reveal patterns, should such patterns exist in the data. Using visualization tools that have customization features gives control to the analyst to engage with the data further and discover the visual patterns.
After observing a data visualization, the analyst should be able to make subsequent inquiries: ask more questions, relate the immediate observations to larger knowledge that she may have, create a hypothesis about the data and its attending topic area, extrapolate ideas and make connections with other pieces of knowledge, generate "what if" scenarios, etc.
These various cognitive activities can be supported better by additional data sets and different types of visualizations. Let us use the following visualization (Figure 17) to understand this further.
By using a familiar visual structure, i.e., a calendar, the barrier to understanding the visualization is minimal and the viewer can turn his attention to the data, which is the number of fatal crashes in 2010 in the U.S. This structure allows for comparison among the various time units: days, weeks, weekends, months, and seasons.
To gain further insights and a larger contextual understanding from this examination, one can ask questions like:
- Why are there more fatalities on the weekends between April and October? Is it the weather? (hypothesis testing)
- Are there more people out driving on these weekends? Does the fatality rate increase or is it the same? (understanding whether these are outliers or the norm)
- What time did these fatalities occur? (augmenting with more specific facts)
- Judging from the higher incidents around New Year's Day and Memorial Day weekend, is alcohol involved? (hypothesis testing)
- What about holidays that involve longer travel distances, like Thanksgiving? (seeking correlation and analogies)
The analyst would benefit by augmenting this particular visualization with datasets related to meteorology, number of drivers, travel distances, and alcohol consumption along with visualizations that would easily promote correspondence and comparison against the dates of interest.
Engagement: What is making me stay?
In the digital environment, where everything is a click or two away and the experience is ephemeral, creating the draw to stay with a visualization becomes an important consideration to the designer. Factors that keep the viewer anchored to a visualization can be based on issues such as the relevance of the topic area (is it of interest to me?), the ability it provides to learn more (I can get more detail here), the novelty of the visual (I've never seen anything like this before), the lack of alternative availability (this is the only place I can get this information in this form). The following is a non-exhaustive list of such factors:
- topic relevance
- personal relevance
- visual novelty
- direct action to take
- alternative availability
Once the viewer completes viewing the visualization, he enters the last phase of the experience, the "extend" phase, which translates to "outcome" in our framework.
Outcome: What do I do next?
If we are to consider the engagement with a data visualization to be an integral part of the experience, then what is the resulting outcome of that experience? Can it help us connect to a larger context in our lives? Are there new actions or behavior we can take with this new knowledge? If there is new learning to be gained from this experience, how can it supplement what we already know in order to enhance our overall understanding? What subsequent higher-level cognitive tasks will this allow us to perform?
Purpose: What is this visualization for?
One factor that permeates across the entire experience is that of purpose. Data visualizations range from mundane to amusing to informational and even to life-saving. Some have a strong "so what?" factor while the value of others is immediately apparent—the seminal Ushahidi, an open source mapping tool to report violence in Africa, for example.
All of the seven factors described previously can be tempered by understanding the purpose of the visualization. Is it to inform, persuade, stimulate, explore, or share? If it is meant to be entertaining, then comprehension and interpretation is not necessarily an important factor. If the designer wants the visualization to have a strong exploratory component, then including features that allow the viewer to perform deeper visual analytics of the data, such as filter, change views, or gain detail, become imperative (Heer and Schneiderman 2012). Viewers would benefit from knowing the underlying purpose of the visualization in order to evaluate it and form expectations for the ensuing experience.
A prescriptive view of the eight factors in a data visualization viewing experience
In design, we value presenting concepts with prescriptive guidance so one can actually apply the learnings to the designs you create, rather than leaving it as a theoretical exercise. The following translates the eight factors in the data visualization experiential framework to such guidance points:
- Perceptibility: Meet humans' sensory input criteria
- Pre-knowledge: Provide information to help
understand the visualization's
- Comprehension: Apply visual design principles so the visualization can communicate clearly
- Utility: Leverage interactive features and functionality
- Interpretation: Provide mechanisms to explore deeper meaning
- Engagement: Design to maintain the viewer's attention
- Outcome: Connect back to life (or not)
- Purpose: Assess the visualization against its intent
These high-level design principles are intended to provide designers with a framework to create more meaningful and engaging viewing experiences of data visualizations to their viewers.
The author would like to thank Professors Stan Ruecker and Kim Erwin for their assistance in advancing the thinking on this subject, along with students Thomas Brandenburg, Lauren Braun, Marcie Cooperman, Boris Geissler, Wanning Ho, Xinli Lin, Brian Lucas, Atsuko Mori, Ted Pollari, and Helen Willis.
Works Cited / Liste de références
Anand, Kunal. 2011. "Twitter users as organisms, Tweetures." FlowingData. Accessed May 31, 2013. https://flowingdata.com/2011/10/06/twitter-users-as-organisms-tweetures/.
Axiis. 2009. "W3schools.com's historical browser statistics." Axiis. Accessed October 26, 2014. http://www.axiis.org/examples/BrowserMarketShare.html.
Berlin, Heimat, Minivegas. 2013. CNN Ecosphere. Accessed July 24, 2013. http://www.cnn.com/2012/06/15/tech/cnn-ecosphere-rio/.
Bertin, Jacques. 1983. Semiology of graphics. Madison, WI: University of Wisconsin Press.
Card, Stuart, Jock Mackinlay and Ben Schneiderman, eds. 1999. Information visualization readings in information visualization: Using vision to think. San Francisco, CA: Morgan Kaufmann.
Chen, Chaomei, and Mary P. Czerwinski, 2000. "Empirical evaluation of information visualizations: An introduction." International Journal of Human-Computer Studies 53.5: 631-635.
Clark, Jeff. 2013. "Novel views: Les Miserables." Neoformix. Accessed May 29, 2013. http://neoformix.com/2013/NovelViews.html.
Conifer Research, 2002. "How to find buried treasure using experience maps." Michigan State University. Accessed May 4, 2014. https://msu.edu/~jmonberg/491/User_files/ConiferExperienceMaps.pdf.
Dastani, Mehdi. 2002. "The role of visual perception in data visualization." Journal of Visual Languages and Computing 13.6: 601-622.
Few, Stephen. 2009. Now you see it: Simple visualization techniques for quantitative analysis. Burlingame, CA: Analytics Press.
Few, Stephen. 2010. "Our irresistible fascination with all things circular." Visual Business Intelligence Newsletter, March/April/May 2010. Accessed June 25, 2013. http://www.perceptualedge.com/articles/visual_business_intelligence/our_fascination_with_all_things_circular.pdf.
Frankel, Felice C., and Angela H. DePace. 2012. Visual strategies: A practical guide to graphics for scientists & engineers. New Haven, CT: Yale University Press.
George and Jonathan. 2014. "Jamn." George and Jonathan III. Accessed October 26, 2014. http://www.georgeandjonathan.com/ - 1.
Heer, Jeffrey, and Ben Schneiderman. 2012. "Interactive dynamics for visual analysis: A taxonomy of tools that support the fluent and flexible use of visualizations." ACM Queue 10.2: (February 20, 2012). Accessed April 15, 2014. http://queue.acm.org/detail.cfm?id=2146416.
Herr, Bruce II., Todd M. Holloway, and Katy Borner. 2007. "An emergent mosaic of Wikipedia activity." Gigapan. Accessed January 30, 2012. http://gigapan.com/gigapans/4277.
IRIS. 2012. "Seismic monitor." Incorporated Research Institutions for Seismology. Acessed October 26, 2014. http://ds.iris.edu/seismon/.
Koblin, Aaron. 2005. "Flight Patterns." Aaron Koblin. Accessed May 30, 2013. http://www.aaronkoblin.com/project/flight-patterns/, http://users.design.ucla.edu/~akoblin/work/faa/.
Koblin, Aaron. 2011. "Visualizing ourselves… with crowdsourced data." TED. Accessed May 30, 2013. https://www.ted.com/talks/aaron_koblin#t-105482
Kostelnick, Charles, and Michael Hassett. 2003. Shaping information: The rhetoric of visual conventions. Carbondale, IL: Southern Illinois University Press.
Kumar, Vijay. 2012. 101 design methods: A structured approach for driving innovation in your organization. Hoboken, NJ: John Wiley & Sons.
Lupi, Giogia. 2012. "Nobel prizes and laureates 1901-2012." Flickr. Accessed May 23, 2013. https://www.flickr.com/photos/accurat/8249052633/in/set-72157632185046466/.
Matejka, Justin. 2012. "Citeology: Visualizing Paper Genealogy." Citeology. Accessed January 9, 2012. https://www.autodeskresearch.com/publications/citeology.
Musicovery, 2011. "MusicMap." Musicovery: MusicMap. Accessed May 21, 2013. https://web.archive.org/web/20130517064049/http://musicovery.com/
Nguyen, Dan. 2012. "SOPA Opera." ProPublica. Accessed April 9, 2014. http://projects.propublica.org/sopa/.
Osborne, Juan. 2011. "In Obama's words." Juan Osborne: A picture is worth a thousand words. Accessed April 23, 2014. http://www.juanosborne.com/2011/11/in-obamas-words/.
Playfair, William. 1786. "Imports and exports to and from Denmark & Norway from 1700 to 1760." Wikimedia Commons. Accessed June 6, 2013. https://commons.wikimedia.org/wiki/File:Playfair_TimeSeries-2.png.
Segel, Edward and Jeffrey Heer. 2010. "Narrative visualization: Telling stories with data." IEEE Transactions on Visualization & Computer Graphics 16.6: 1139 – 1148.
Shneiderman, Ben. 1997. "Direct manipulation for comprehensible, predictable and controllable user interfaces." In Proceedings of the 2nd International conference on intelligent user interfaces. ACM Digital Library, IUI '97. New York, NY. ACM. 33 - 39.
Skupin, Andre. 2005. "GIS map of geography." Places and Spaces: Mapping Science. Accessed April 18, 2014. http://scimaps.org/atlas_of_science_images_pt2.html.
Stamen Design. 2009. "San Francisco's Crimespotting." Crimespotting.org. Accessed April 15, 2014. http://sanfrancisco.crimespotting.org/map/.
Standby Taskforce. 2013. "Crisis map of Yolanda typhoon." iRevolutions. Accessed October 26, 2014. https://irevolution.files.wordpress.com/2013/11/yolandaph-crisis-map-2.png.
Thomson Reuters. 2008. "Thomson Innovation Themescape." thomsonreuters.com. Accessed October 26, 2014. http://ip-science.thomsonreuters.com/winningmove/secure/TI_Themescape_QT.html.
Tidwell, Jenifer. 2011. Designing interfaces. Sebastopol, CA: O'Reilly Media.
University of Washington. 2013. "Global burden of death cause patterns." Institute for Health Metrics and Evaluation. Accessed October 26, 2014. http://vizhub.healthdata.org/gbd-compare/patterns.
Wertheimer, Max. 1938. "Laws of organization in perceptual forms." In A source book of Gestalt psychology, Vol. 2. Edited by Willis D. Ellis, 71-88. London: Routledge.
White, Jeremy, Robert Gebeloff and Ford Fessenden. 2012. "What percent are you?" New York Times, Accessed May 30, 2013. http://www.nytimes.com/interactive/2012/01/15/business/one-percent-map.html.
Yau, Nathan. 2012. "Vehicles involved in fatal crashes 2010." FlowingData. Accessed May 21, 2014. https://flowingdata.com/2012/01/11/vehicles-involved-in-fatal-crashes/.
Yau, Nathan. 2013. Data points: Visualization that means something. Hoboken, NJ: Wiley.
Zapponi, Carlo. 2011. "People movin." People movin: Migration flows across the world. Accessed May 31, 2013. http://peoplemov.in/