CSE 557A | Jan 23, 2018 Information Visualization Alvitta Ottley Washington University in St. Louis
Annoucements.
Due tonight
Due in two weeks
Debate Topic Change Sub Visual Embellishment for Bar vs. Pie Last names A-L: Pro Bar • Last name M-Z: Pro Pie •
Memorability.
What makes a visualization memorable? I enjoyed this research paper because it validated opinions I already had about pretty-looking charts. Though it is always important to keep the audience in mind when creating visualizations, adding visual interest only draws more focus to the data and can even support the conclusions that can be drawn from the trends of the graph (leading to a more rapid interpretation of the information). I also liked how the paper touched upon the idea of bias that could be created through the imagery. In my opinion, however, if the corresponding “chart junk” is negative, but represents the conclusion to be drawn from the presented data, there is no bias to be drawn. Especially if a minimalist graph would bring a user to the same conclusion. Designers just have to be careful that the imagery represents the data correctly.
Noteworthy points. I enjoyed some of the discussion [presented] in the article, especially the section on the implications of minimalist charts. I think it is important to recognize that minimalist charts still carry biases within them and a simple chart can still be used to promote deceptively or in a rhetorical sense that manipulates the reader. I felt that the study itself was the weakest part of the paper, …
Did they really measure memorability? One major problem I see with this study is that it seems to be more a test of uniqueness than memorability. Simple charts look more similar than [junk] filled charts do since they have standard rules that they follow. So if a user is going through many charts as the turk workers are, they will be able to identify the unique ones, but struggle to differentiate the simple ones. This means that the way of measuring memorability is flawed and is not testing what they are trying to test.
Were they asking the right question? Honestly, this entire study seemed a little pointless to me. When reading through the paper, I thought the researchers were going to study how participants recollected data from charts with more junk than others. I was interested to see how participants recalled what the graphic was actually communicating. However, … What are the “right” measures for evaluating visualizations?
Future Work It would be interesting to use eye movement to track what people look at on the more and less memorable visualizations. Differences may provide insight into specific elements that aid in memorability. Furthermore, I believe completely ignoring the difficulty of the underlying data was a mistake. The study should have labeled each visualization with a difficulty score, and then examined if there was any correlation between that score and memorability. Representative samples would be necessary, but preliminary results might help direct a future study.
Tufte. “Above all else, show the data.”
Edward Tufte • Evangelist for good visual design Most designs are static, but many principles apply • to interactive (computer-based) visualization designs • Take these design guidelines with a grain of salt
Edward Tufte
Tufte’s Lessons • Graphical Integrity • Graphical Excellence
Graphical integrity Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity.
Tufte 2001
Missing scales Tufte 2001
Missing scales What is the baseline? Tufte 2001
Missing scales What is the baseline? -$4,200,000 Tufte 2001
Graphical integrity Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity. “Above all else show the data”
The lie factor Tufte coined the term “the lie factor”, which is • defined as: Lie_factor = “High” lie factor (LF) leads to: • Exaggeration of differences or similarities • • Deception • Misinterpretation
The lie factor • The Lie Factor (LF) can be: LF > 1 • LF < 1 • • If LF is > 1, then size of graphic is greater than the size of data • This leads to exaggeration of the data (overstating the data) If LF < 1, then the size of the data is greater than the graphic • • This leads to hiding the of data (understating the data)
How to lie with Visualizations.
What is wrong with this? The US Department of Transportation had set a series of fuel economy standards to be met by automobile manufacturers, beginning with 18 miles per gallon in 1978 and moving in steps up to 27.5 by 1985.
What is wrong with this? The line representing 18 miles per gallon in 1978, is 0.6 inches long The line representing 27.5 miles per gallon in 1985, is 5.3 inches long
What is wrong with this? • The increase in real data between 1978 to 1985 (from 18 MPG to 27.5 MPG) is: 27.5 − 18.0 ×100 = 53% 18.0 • The difference in length between 1978 to 1985 (from 0.6 inches to 5.3 inches) is: 5.3 − 0.6 ×100 = 783% 0.6 Lie Factor is: • 783 53 = 14.8
Lie factor example This design contains a lie factor of 9.4
Lie factor example This design contains a lie factor of 9.5
Other ways to lie: encoding
Other ways to lie: design variation
Other ways to lie: design variation Beware of the “3D” effect. It distorts the telling of the data. There are five vertical scales here: • • 1073-1978: 1 inch = $8.00 • Jan-Mar: 1 inch = $4.73 • Apr – Jun: 1 inch = $4.37 • Jul – Sep: 1 inch = $4.16 Oct – Dec: 1 inch = $3.92 • • And two horizontal scales: • 1973-1978: 1 inch = 3.8 years • 1979: 1 inch = 0.57 years
Other ways to lie: the 3d effect
Other ways to lie: double encoding
Other ways to lie: double encoding Here, both width and height encode • the same information. The effect is multiplicative. 0.44 (width) * 0.44 (height) = 0.19
Other ways to lie: Unintended Encoding
Other ways to lie: Unintended Encoding London Mocsow Lisbon
Other ways to lie: Alignment
Other ways to lie: Limiting Context
Other ways to lie: Limiting Context
How to visualize truthfully.
How to NOT lie “Maximize the Data-Ink Ratio”
Data-ink ratio
Data-ink ratio The goal is to aim for high data-ink ratio • • Ink used for he data should be relatively large compared to the ink in the entire graphic
High Data-ink ratio Example
In-class activity Redesign the following graph to maximize data-ink ratio
In-class activity Erasing non-data ink How many times is height encoded?
Erasing non-data ink Multiple encodings: 1. Height of the left line 2. Height of the right line 3. Height of shading 4. Position of top horizontal line 5. Position (placement) of the number 6. Value of the number
Erasing non-data ink example Results of a study indicating that one type of element always has a higher value under different experimental conditions
Erasing non-data ink example After removing all non- data ink
Erasing non-data ink example The ink that has been removed
Thoughts about this?
In-class activity Redesign the box plot by erasing non-data ink.
Thoughts about this?
Summary of design principles 1. Above all else show the data 2. Maximize the data-ink ratio 3. Erase non-data-ink 4. Erase redundant data-ink 5. Revise and edit
Useful Junk?
ChartJunk and Recall Bateman et al. “Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts”, CHI 2010
Chart Junk and Eye Gaze
Results Recap 1. No significant difference between interpretation accuracy 2. No significant difference in recall accuracy after a five-minute gap 3. Significantly better recall for Holmes charts of both chart topic and the details (categories and trend) after long-term gap (2-3 weeks). 4. Participants found the Holmes charts more attractive, more enjoyable , and were easiest and fastest to remember.
The purpose of some actions is not the effect they have on the environment but the effect they have on the humans .
Discussion • Notice the bar has significantly shifted when defining visual embellishments. • Will you use “visual embellishments” for your assignments? If so, why?
Next Time. • Another paper on • Studio on animated transition
Recommend
More recommend
