representations part 1: visualizing interaction lecture /slide deck produced by saul greenberg,...
TRANSCRIPT
![Page 1: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/1.jpg)
RepresentationsPart 1: Visualizing Interaction
Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada
Notice: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known,
E. Tufte “Visual Display of Quantitative Information” p 25,
![Page 2: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/2.jpg)
The messages
Good representations• captures essential elements of the event / world & mutes
the irrelevant• appropriate for the person, their task, and their
interpretation
Information visualization• Tufte’s principles• overview first, zoom and filter, then details on demand• many techniques now available
![Page 3: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/3.jpg)
Good representations
captures essential elements of the event / worlddeliberately leaves out / mutes the irrelevantappropriate for the person and their interpretationappropriate for the task, enhancing judgment ability
How many buffalo?
# Buffalo
# Adults # calfs
# Buffalo
8 4
![Page 4: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/4.jpg)
Representation
Representations• formal system or mapping by which information can be
specified (D. Marr)• a sign system in that it stands for something other than its
self.
• Representations of 34o fingers: o decimal: 34o binary: 100010 o roman: XXXIV
o mayan: base 5 within base 20
![Page 5: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/5.jpg)
Representation
Presentation • how the representation is placed or organized on the
screen
34, 34,34,
34
![Page 6: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/6.jpg)
Representations
Solving a problem simply means representing it so as to make the solution transparent
--Simon, 1981
Good representations• allow people to find relevant information
o information may be present but hard to find
• allow people to compute desired conclusionso computations may be difficult or “for free” depending on
representations
![Page 7: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/7.jpg)
Which is the best flight?
Exact timeslengthstop-oversswitching planesspeed of plane…
depart arriveAC 117 Vancouver - Calgary 7:00 9:00Cdn 321 Vancouver - Calgary 9:00 12:00Cdn 355 Calgary - Montreal 13:30 19:30AC 123 Calgary - Toronto 12:30 16:30AC 123 Toronto - Montreal 16:45 17:30*time zone: +1 van-cal, +2 cal-tor, mtl
7 9 11 13 15 17
10 12 14 16 18 20
Vancouver
8 10 12 14 16 18
AC 117 Cdn 321
Cdn 355AC 123
Calgary
Toronto
MontrealAdapted from Edward Tufte
![Page 8: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/8.jpg)
When do I take my drugs?
10 - 30% error rate in taking pills, same for pillbox organizers
Inderal - 1 tablet 3 times a dayLanoxin - 1 tablet every a.m.Carafate - 1 tablet before meals and at bedtimeZantac - 1 tablet every 12 hours (twice a day)Quinag - 1 tablet 4 times a dayCouma - 1 tablet a day
Breakfast Lunch Dinner Bedtime
Lanoxin O
Inderal O O O O
Quinag O O O O
Carafate O O O O
Zantac O O
Couma O
Breakfast Lunch Dinner BedtimeLanoxin
Inderal Inderal Inderal Inderal
Quinag Quinag Quinag Quinag
Carafate Carafate Carafate Carafate Zantac Zantac
Couma
Adapted from Donald Norman
![Page 9: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/9.jpg)
Which representation is best?
depends heavily on task
What is precise value?
How does the performancenow compare to its peak?
How does performancechange over time?
Windows 95 System Monitor
![Page 10: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/10.jpg)
right menu+ properties
Which folder has the most documents?
Windows 95 File Viewer
![Page 11: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/11.jpg)
Detailed navigationplus precision
General navigation plus orientation
Where am I?
Windows NT Hover Game
![Page 12: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/12.jpg)
Where am I?
Inxight Magnifind
![Page 13: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/13.jpg)
What do I have to do?
Microsoft Schedule+
![Page 14: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/14.jpg)
Information Visualization
Graphics should reveal the data• show the data
• not get in the way of the message
• avoid distortion
• present many numbers in a small space
• make large data sets coherent
• encourage comparison between data
• supply both a broad overview and fine detail
• serve a clear purpose
E. Tufte Visual Display of Quantitative Information
many examples on the following slides are taken from Tufte’s books
![Page 15: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/15.jpg)
Anscombe’s Quartet
N: 11.0mean X’s : 9.0mean Y’s : 7.5standard error of slope estimate: 0.1sum of squares: 110.0regression sum of squares: 27.5residual sum of squares of Y: 13.8correlation coefficient: 0.8r squared: 0.7regression line: Y=3+0.5X
E. Tufte “Visual Display of Quantitative Information” p 25,
![Page 16: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/16.jpg)
Anscombe’s Quartet
N: 11.0mean X’s : 9.0mean Y’s : 7.5standard error of slope estimate: 0.1sum of squares: 110.0regression sum of squares: 27.5residual sum of squares of Y: 13.8correlation coefficient: 0.8r squared: 0.7regression line: Y=3+0.5X
E. Tufte “Visual Display of Quantitative Information” p 25,
Graphics Reveal the Data
![Page 17: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/17.jpg)
40,000.
45,000.
50,000.
55,000.
60,000.
65,000.
70,000.
75,000.
80,000.
140.0 160.0 180.0 200.0 220.0 240.0 260.0 280.0 300.0
Selling price
Impro
vem
ent
Do I deserve a tax break?
![Page 18: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/18.jpg)
1864 Exports of French Wine
E. Tufte “Visual Display of Quantitative Information” p 25,
![Page 19: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/19.jpg)
Dr John Snow1854
E. Tufte “Visual Display of Quantitative Information”
Deaths by Cholera
![Page 20: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/20.jpg)
Napolean's march to Moscow Charles Minard
E. Tufte “Visual Display of Quantitative Information”
![Page 21: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/21.jpg)
Chart Junk: A common error
Information display is not just pretty graphics• graphical re-design by amateurs on computers gives us
“fontitis,” “chart-junk,” etc.
10
2
5
8
0
2
4
6
8
10Dear Sir; This is a really exciting opportunity! Take advantage of it!
![Page 22: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/22.jpg)
Chart Junk: Cotton production in Brazil, 1927
E. Tufte Visual Display of Quantitative Information
![Page 23: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/23.jpg)
Chart Junk: Removing deception and simplification
58
59
60
61
62
63
64
65
66
Ford GM Pontiac Toyota
Maintenance cost / year
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
Ford GM Pontiac Toyota
Maintenance cost / year
Ford
GM
Pontiac
Toyota
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
Ford GM Pontiac Toyota
Maintenance cost / year
![Page 24: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/24.jpg)
Data density
New York Weather History for 1980• 181 numbers/sq inch
E. Tufte “Visual Display of Quantitative Information”
![Page 25: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/25.jpg)
Small multiples
Learn once• invite comparisons
E. Tufte Visual Display of Quantitative Information
![Page 26: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/26.jpg)
Small multiples: Showing time and change
E. Tufte Visual Display of Quantitative InformationE. Tufte Visual Display of Quantitative Information
![Page 27: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/27.jpg)
Small multiples: Showing time and change
E. Tufte Visual Display of Quantitative Information
![Page 28: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/28.jpg)
Visual information-seeking mantra
Overview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demandOverview first, zoom and filter, then details on demand
- Ben Shneiderman, Designing the User Interface 3rd Ed. 1997 p523
![Page 29: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/29.jpg)
Overview & detail for comparisonsusing small multiples and data density
E. Tufte Visual Display of Quantitative Information
![Page 30: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/30.jpg)
Overview & detail for comparisonsusing small multiples and data density
E. Tufte Visual Display of Quantitative Information
![Page 31: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/31.jpg)
PhotoFinder
University of Maryland Human Computer Interaction Laboratory http://www.cs.umd.edu/hcil/
![Page 32: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/32.jpg)
Table Lens
Inxight Table Lens
![Page 33: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/33.jpg)
Table Lens
Inxight Table Lens
![Page 34: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/34.jpg)
Infinite Zoom
Pad++: A Zoomable Graphical Sketchpad for Exploring Alternate Interface Physics. Bederson et al Journal of Visual Languages and Computing 7, 1996
![Page 35: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/35.jpg)
Fisheye Menus
Bederson, B.B. (May 2000) University of Maryland www.cs.umd.edu/hcil/fisheyemenu/
![Page 36: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/36.jpg)
Saul’s focus (local user)
Carl’s focus
Andy’s focus
FisheyeTextgroupware
Greenberg, Graphics Interface
![Page 37: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/37.jpg)
![Page 38: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/38.jpg)
![Page 39: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/39.jpg)
Main view in foreground
Overview in background
![Page 40: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/40.jpg)
Perspective Wall
Leung and Apperly TOCHI’94
Mackinlay / Robertson / Card: Proc ACM CHI'91
![Page 41: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/41.jpg)
Data Mountain
Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98
![Page 42: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/42.jpg)
www.research.microsoft.com/ui/TaskGallery/
Task Gallery
![Page 43: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/43.jpg)
Cone Trees
Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91
![Page 44: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/44.jpg)
Hyperbolic Lens
Xerox Parc - Inxight
![Page 45: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/45.jpg)
Hyperbolic Lens
Xerox Parc - Inxight
![Page 46: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/46.jpg)
You know now
Good representations• captures essential elements of the event / world & mutes
the irrelevant• appropriate for the person, their task, and their
interpretation
Information visualization• Tufte’s principles• overview first, zoom and filter, then details on demand• many techniques now available
![Page 47: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/47.jpg)
Articulate:• who users are• their key tasks
User and task descriptions
Goals:
Methods:
Products:
Brainstorm designs
Task centered system design
Participatory design
User-centered design
Evaluatetasks
Psychology of everyday things
User involvement
Representations
low fidelity prototyping methods
Throw-away paper prototypes
Participatory interaction
Task scenario walk-through
Refined designs
Graphical screen design
Interface guidelines
Style guides
high fidelity prototyping methods
Testable prototypes
Usability testing
Heuristic evaluation
Completed designs
Alpha/beta systems or complete specification
Field testing
Interface Design and Usability Engineering
![Page 48: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/48.jpg)
Primary Sources
This slide deck is partly based on concepts and illustrations as taught by:
• The Visual Display of Quantitative Information, Edward Tufte, 1983
• The Power of Representations. Chapter 3 in Norman, D. Things that Make Us Smart, 43-76, Addison-Wesley. (1993)
![Page 49: Representations Part 1: Visualizing Interaction Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649dd25503460f94ac91c7/html5/thumbnails/49.jpg)
Permissions
You are free:• to Share — to copy, distribute and transmit the work• to Remix — to adapt the work
Under the following conditions:Attribution — You must attribute the work in the manner specified by the author (but not in any way that suggests that they endorse you or your use of the work) by citing:
“Lecture materials by Saul Greenberg, University of Calgary, AB, Canada. http://saul.cpsc.ucalgary.ca/saul/pmwiki.php/HCIResources/HCILectures”Noncommercial — You may not use this work for commercial purposes, except to assist one’s own teaching and training within commercial organizations.Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
With the understanding that:Not all material have transferable rights — materials from other sources which are included here are cited Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license.Other Rights — In no way are any of the following rights affected by the license:
• Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;• The author's moral rights;• Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights.
Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.