The Design of Information Graphics

The design of information graphics requires the combination of text and images to explain a situation, process, event, procedure, and things.  Topics can be from abstract to concrete; can give a general overview or specific details.  Depending on their intent, information graphics have different enabling characteristics and utilize different strategies in order to communicate their meaning.  While visual and verbal information offer unique perspectives on a topic, the data that they express often is redundant.  Depending on the viewer, the application, the setting, and the intent, this can have both a positive and negative effect.  This article will give a brief overview of the theories involved with the design of information graphics, a practical discussion of their ramifications, and will conclude with a case study.  This article has the following sections: Introduction, Theory, Praxis: Case Study, and Conclusion.

Information graphics are used when neither language nor imagery fully explain a given topic.  Graphics shouldn't be inserted just as an "attention-getting device, or a mere relief from text." (Sevilla, 2002, ch. 7, ¶1)  Rather, the two forms should be integrated in a manner that compliments, supports or amplifies the specific roles that each have.  Each enable the viewer to understand the topic in different ways.  While redundancy does play an issue in information graphics, the visual and verbal strategies have unique characteristics that add to the total comprehension of a topic.

Information displayed in visual form has many benefits.  One reason is that illustrations offer additional perspectives to the viewer. (Sevilla, 2002).  Information such as location, details, relationships, cause and effect data, transformation, and spatial structures is often best communicated in the visual form.  "Humans can grasp the content of a picture much faster than they can scan and understand a text sentence because they have the ability to recognize the spatial configuration of elements in a picture and find the relationships between such elements quickly." (Kamada & Kawai, 1991, pg.1) 

Information that is communicated using the verbal medium has many positive aspects as well.  Since text is understood sequentially, it is an excellent method for communicating procedural information, abstract concepts, and qualifying conditions.  Pavio is quick to point out that verbal information pertains to language subsystems and does not necessarily translate to speech.  Text is verbal information although it is received through the visual system. (Ware, 2000)

Often, the purpose of an information graphic is instruction.  Mayer's research in this area is of particular interest, specifically in advance organizers, reading strategies, and how text can be written to support understanding. (Wright, 1995; Wright, 1998) Information graphics can serve as advance organizers to assist novices in setting up a conceptual model of a new topic.  A conceptual model is defined as providing an appropriate (accurate, consistent, and complete) representation of a target system.  (Norman as cited in Wu, Dale & Bethel, 1998)  Because the visual and verbal realms support different tasks and different types of learners, each should be used in conjunction to reduce cognitive workloads and possibilities of errors.  Thuring, Hannemann, & Haake wrote that "Psycholinguistic research emphasizes the relation between coherence and information processing: A document is coherent if a reader can construct a mental model from it that corresponds to facts and relations in a possible world." (1995, pg.58) By combining the visual and verbal, an information graphic utilizes the strengths of each in order to present a unified concept.  This serves both visual and verbal learners by activating many areas of the brain. (Sevilla, 2002)

One of the concerns mentioned before was redundancy.  Redundancy comes into play when images and text accomplish the same task and each can stand independently. Shriver describes different types of redundancy in how prose and graphics interact. (Schriver, 1997; Schriver, 2000)  Complementary, supplementary, redundant, stage-setting, and juxtapositional redundancy explain how visual and verbal content is used for different purposes, importance, and the ramifications of each pairing. 

Redundancy can help to deepen understanding and lengthen retention by providing multiple hooks for a novice learner.  As mentioned before, an advance organizer, such as an information graphic can help to supplant a missing or incomplete mental model.  However, for an expert, the duplicate communications can be seen as noise because it imposes an additional workload.  By providing redundant information in multiple forms, the expert's task completion time is actually increased and frustration levels may rise as well.  It is important to take your audience, their learning styles, level of expertise, and the complexity of their goals into consideration when utilizing information graphics. 

Sensory inputs have been classified many times and many ways.  Bertin categorized sign systems as belonging to auditory or visual information processing systems. (Ware, 2000)  Baddelay describes a working memory model which consists of a central executive system that coordinates information from two storage subsystems; the visuospatial sketchpad (verbal) and the phonological loop (spatial). (Wickens, 1998)   Paivio's dual-coding theory proposed that the information stored in working memory were imagens, the mental representation of visual information, and logogens, the mental representation of language information.  (Ware, 2000)  As mentioned before, verbal information is not solely related to auditory language.  It is processed by the same subsystems that support reading, writing, understanding and producing speech, and logical thought.  The verbal and visual loops distribute incoming messages across both systems and reduce the mental workload of each system.

Designers must be very careful of split-attention in their information graphics.  Split-attention occurs when the viewer is unclear about what the verbal and visual segments are contributing within an information graphic.  When a viewer is confused, error rates and cognitive workload increase.  The enabling ability of an information graphic is taken away and performance deficits are produced. There are several reasons why an information graphic may produce the split-attention effect.  One reason is that the verbal and visual information is supporting different tasks.  We can relate this back to Schriver's redundancy model.  If the visual and verbal systems are supporting different tasks (i.e. the verbal information is supporting the visual information) then much of the information is duplicated and the viewer's attention is split as a result.  (S)he would be forced to go back and forth between the visual and verbal in order to get a clear understanding.

Information density is another cause of split-attention.  When there is too much information available within an information graphic, a viewer can become confused as to what is important in the display.  Detailed information should be used to support the purpose of the graphic.  If too much detail, or reality, is used, a viewer's attention could be pulled in too many different directions.

Another reason that split-attention occurs is when the information graphic is created poorly or is not naturally mapped. (Schriver, 1997) Poor or erroneous illustrations can interfere with understanding and confuse the viewer by forcing him/her to try to make a connection between the visual and verbal data.  Finally, there has been significant research into what types of information is best communicated in what manner and for what purpose. Mayer, Gentner, and Schriver are just a few who have researched how visualizations and other performance supports, like advance organizers, enable or hinder a viewer in understanding a topic.  (Shayo and Olfman, 1998; Schriver, 1997; Ware, 2000)  One example of this is that abstract concepts are best communicated verbally.  When visualizations are provided for an abstract concept, cognitive narrowing occurs, cognitive variability is reduced, and the abstract becomes concrete. This can cause split-attention if the verbal communication focused on the abstract and the visual information is focused on concrete.  A designer must take into consideration all of these factors when creating an enabling information graphic.

The final consideration in creating an information graphic is cognitive workload.   Very briefly: Working memory is a finite resource; it is transient and is limited to capacity and time.  (Byrne, 1996) It is affected by fatigue, environment, motivation, anxiety, mental models, age, time of day, technological aptitude, disabilities, domain knowledge, structure, sensory interference, tasks, framing, priming, beer and many other factors that have been previously discussed. (Shneiderman, 1984; West et al, 2002; Trumbo, 1998; Ware, 2000)  What marks information graphics as an enabling strategy is that they can reduce or increase cognitive load based on their application.  When information is split up between the visual and verbal, Paivio theorizes that cognitive load is reduced because the information is dispersed across two subsystems.  Also, by creating multiple hooks, the effort to create long-term memory is reduced.  However, if the viewer is an expert, and the information graphic if created in such a way that the visual and verbal information is redundant and neither adds any unique value, then cognitive load is increased.

I chose to create an information graphic of the diagnostic process for cervical cancer.  A woman who receives abnormal results from preliminary testing is not given much information.  She is often told that the atypical cells that were found could mean anything from "nothing to cancer." There are no sources of information that provide a complete overview of what the diagnostic process is, what the probabilities of diagnosis are, what the statistics are, and what all the medical jargon actually means.  The "C" word brings up primal fears and lack of knowledge only makes those fears stronger. 

An information graphic such as the one I created, is not meant to be an all-encompassing one-stop shop for cervical cancer information.  It is meant for a very specific audience: a woman who received atypical results from a Papanicolaou test (Pap smear) and has been diagnosed with the Human Papillomavirus.  The woman is at the very beginning stages of the diagnostic process and probably has never heard of HPV.  HPV is a STD and it is estimated that at least 24 million Americans have the virus.  However, because symptoms are rare, most people do not know they have it.  The purpose of the graphic is:

• to inform the woman what HPV is and assure her that it is not life-threatening or rare;
• to give a brief overview of the entire diagnostic process;
• to define medical terms used in results;
• to reassure her that the probability of being diagnosed with invasive cancer is very low;
• to reassure her that survival rate of cervical cancer is quite high as long as the cancer was diagnosed early;
• to encourage yearly screening in the future.

 Finding the data for this graphic was difficult.  While the basic information was easy to find, many of the cancer sites have conflicting information about treatment and statistics.  One major cause of the inconsistency is that treatment for the disease is rapidly evolving.  Also, it was difficult to find statistical data to use.  Because I had a very specific purpose for my information graphic, I could not find data that directly related to this topic.  I had to get total numbers and then apply them to my particular use case. (Caveat: most of this way as accurate as I could find as of the last date consistent data was available, June 2004).

I am satisfied with the information graphic.  Much of the information a woman needs to know is on the graphic.  What can be visualized, has. I think is serves the above mentioned goals. However, the layout of the information could be improved.  I also think that images of normal and atypcial cells could have provided an additional view as to what exactly cervical cancer is.  Unfortunately, I could not find any examples of this. If anyone has access to additional information or supporting images, I would love to hear from you.

Information graphics serve many purposes.  They provide a general overview of a topic while providing supporting details.  There are many things to take into consideration when creating an information graphic.  Redundancy and dual-coding can support or hinder cognitive workload of an individual as a result of split-attention.  Strategies should be incorporated to support the natural mapping of topic to display.  For example, concrete topics benefit from detailed displays while abstract ones benefit from verbal ones.  To conclude, information graphics have several enabling qualities that support viewer understanding of a topic.  How a designer uses the visual and verbal systems within a display should support the viewer and the purpose of the information graphic.

--------------------------------------

Note: Will Evans is a software information architect for a risk modeling software company in Boston. Previously he was the information architect responsible for designing the Gather user experience. He has published articles about Information Architecture, User Experience, and Interaction Design. He has taught User Centered Design and Building Usable Enterprise Architectures to both small and large corporate audiences.

He enjoys publishing his musings, ideas, poetry and pre-Simulationist and post-modern critiques of modern culture and aesthetics. He drinks way to much coffee and needs more sleep but is really trying to change that.

Byrne, M. (1996). A Computational Theory of Working Memory. CHI Doctoral Consortium.  April 13-18, 1996. 31-32.

Kamada, T. & Kawai, S. (1991). A General Framework for Visualizing Abstract Objects and Relations. Transactions on Graphics. 10(1) 1-39.

Shneiderman, B. (1984). Response Time and Display Rate in Human Performance with Computers.  Computing Surveys. 16 (3) 265-285.

Schriver, K.A. (2000). Readability formulas in the new millennium: what's the use? ACM Journal of Computer Documentation 24 (3) 138-140.

Schriver, K.A. (1997). Dynamics in Document Design: Creating texts for readers. NY: Wiley.

Sevilla, C. (2002). Information Design Desk Reference. [Electronic Version] Crisp Learning. Retrieved March 31, 2003 from: http://www.books24x7.com

Thuring, M., Hannemann, J. & Haake, J.M. (1995). Hypermedia and Cognition: Designing for Comprehension. Communications of the ACM. 38 (8) 57-66.

Trumbo, J. (1998) Spatial memory and design: a conceptual approach to the creation of navigable space in multimedia design.  Interactions. 5 (4)  26-34.

Ware, C. (2000). Information Visualization: Perception for Design. San Francisco: Morgan Kaufmann.

West, R., Murphy, K., Armilio, M., Craik, G., & Struss, D. (2002) Effects of time of day on age differences in working memory.  The Journals of Gernotology. 57B (1) P3-P10.

Wickens, C, D., Gordon, S. E., Liu, Y. (1998). An Introduction to Human Factors Engineering. New York: Addison Wesley Longman.

Wright, P. (1995). Reading strategies, mental models and text design.  ACM SIGDOC Asterisk Journal of Computer Documentation. 19 (3) 368-5.

Wright, P. (1998). Designing Information-supported Performance: The Scope for Graphics.  ACM SIGDOC Asterisk Journal of Computer Documentation. 22 (4) 3-10.

Wu, C., Dale, N, & Bethel, L. (1998). Conceptual Models and Cognitive Learning Styles in Teaching Recursion. ACM SIGCSE Bulletin, Proceedings of the twenty-ninth SIGCSE technical symposium on Computer science education. 30 (1) 292-296.