Lecture 14 – Course Review
Human Visual Perception
How it relates to creating effective information visualizations
Understand Key Design Principles
for Creating Information Visualizations
Studied Major Information Visualization Tools
 Videos and Demos
Studied Visual Text Retrieval Interfaces
– Hearst Overview
– Query Formulation, Document Attributes, Inter-Document Similarities
Human Computer Interaction
– Heuristic Evaluation of searchCrystal
© Anselm Spoerri
Problem Statement & Goal
Scientific Visualization
– Show abstractions, but based on physical space
Information Visualization
– Information does not have any obvious spatial mapping
Fundamental Problem
How to map non–spatial abstractions
into effective visual form?
Goal
Use of computer-supported, interactive, visual
representations of abstract data to amplify cognition
© Anselm Spoerri
Goal of Information Visualization
Use human perceptual capabilities
to gain insights into large data sets
that are difficult to extract
using standard query languages
Exploratory Visualization
– Look for structure, patterns, trends, anomalies, relationships
– Provide a qualitative overview of large, complex data sets
– Assist in identifying region(s) of interest and appropriate
parameters for more focussed quantitative analysis
Shneiderman's Mantra:
– Overview first, zoom and filter, then details-on-demand
– Overview first, zoom and filter, then details-on-demand
– Overview first, zoom and filter, then details-on-demand
© Anselm Spoerri
Information Visualization – Key Design Principles
Information Visualization = Emerging Field
Key Principles
– Abstraction
– Overview  Zoom+Filter  Details-on-demand
– Direct Manipulation
– Dynamic Queries
– Immediate Feedback
– Linked Displays
– Linking + Brushing
– Provide Focus + Context
– Animate Transitions and Change of Focus
– Output is Input
– Increase Information Density
© Anselm Spoerri
Recall?
© Anselm Spoerri
Recognize?
© Anselm Spoerri
Human Visual System – Recap
Sensory vs. Cultural
– Understanding without training
– Perceptual Illusions Persist
Physical World Structured
– Smooth Surfaces and Motion
– Temporal Persistence
Visual System Detects CHANGES + PATTERNS
1 Rapid Parallel Processing
–
–
–
–
Feature Extraction: Orientation, Color, Texture, Motion
Bottom-up processing
Popout Effects
Segmentation Effects: Edges & Regions
2 Slow Serial Goal-Directed Processing
– Object Recognition: Visual attention & Memory important.
– Top-down processing
© Anselm Spoerri
Parallel Processes  Serial Processes
Parallel Processing
•
•
•
•
Orientation
Texture
Color
Motion
Detection
• Edges
• Regions
• 2D Patterns
A
Serial Processing
• Object Identification
• Short Term Memory
5 ± 2 = 3 to 7 Objects
B
C
D
© Anselm Spoerri
Human Visual System – Recap
Luminance Channel
Detail
Form
Shading
Motion
Stereo
(cont.)
Color Channels
Surfaces of Things
Sensitive to Small Differences
Rapid Segmentation
Categories
(about 6-10)
Not Sensitive to Absolute Values
Unique Hues:
Red, Green, Yellow, Blue
Small areas = high saturation
Large areas = low saturation
 Luminance More Important than Color
© Anselm Spoerri
Pre-Attentive - Summary
© Anselm Spoerri
Human Visual System – Recap
(cont.)
900
Pre-Attentive Processing
700
Important for Design of Visualizations
500
Pre-Attentive Properties can be perceived immediately
Laws of Pre-Attentive Display
Must Stand Out in Simple Dimension
Position
Color
Simple Shape = orientation, size
Motion
Depth
3
6
12
Number of distractors
Pre-Attentive Conjunctions
Position + Color
Position + Shape
Position + Form
Color + Stereo
Color + Motion
Design of Symbols
Simple Visual Attributes
Distinct
–
(or combination thereof)
Use different visual channels for different types of information
© Anselm Spoerri
Gestalt Laws – Recap
Proximity
Similarity
Continuity
Symmetry
Closure
Relative Size
Figure and Ground
© Anselm Spoerri
Space Perception – Recap
Depth Cues
Shape-from-Shading
Shape-from-Contour
Shape-from-Texture
Shape-from-Motion
© Anselm Spoerri
Simple Lighting Model – Recap
Light from above and at infinity
Diffuse, Specular and Ambient Reflection Depth Cues
Diffuse
Lambertian
Specular
Ambient
Shadows
© Anselm Spoerri
Depth Cues – Relative Importance – Recap
Depth Contrast
0.001
Motion
parallax
Occlusion
0.01
Relative size
0.1
Binocular
disparity
Convergence
accommodation
1.0
1
Aerial
10
100
Depth (meters)
© Anselm Spoerri
Motion + 3D vs 2D
Motion Coding
– Causality
– Object Constancy
– Anthropomorphic Form from Motion
100%
Direct Launching
Delayed launching
No causality
50%
demo
100
Time (msec.)
200
2D
– Simpler and occlusion less of problem
– 2D faster to render
3D
–
–
–
–
–
Realistic 3D expensive to compute
Increases information density
Depth Cues  Occlusion most important depth cue
Motion important for 3D layout
Shape-from-Shading and Shape-from-Texture important for surface
perception
– Stereo important for close interaction
© Anselm Spoerri
Recognition – Processing Stages
© Anselm Spoerri
Tufte - Escape Flatland: Napoleon's March
Enforce Visual Comparisons
Width of tan and black lines gives you an
immediate comparison of the size of
Napoleon's army at different times during
march.
Show Causality
Map shows temperature records and
some geographic locations that shows
that weather and terrain defeated
Napoleon as much as his opponents.
Use Direct Labeling
Integrate words, numbers & images
Don't make user work to learn your "system.”
Legends or keys usually force the reader to
learn a system instead of studying the
information they need.
Design Content-driven
Show Multivariate data
Napoleon's March shows six: army size,
location (in 2 dimensions), direction,
time, and temperature.
© Anselm Spoerri
Tufte’s Measures
Maximize data-ink ratio
Data ink
Data ink ratio =
Total ink used in graphic
Maximize data density
Data density of graphic =
Number entries in data matrix
Area of data graphic
Measuring Misrepresentation
Lie factor =
 close to 1
Size of effect shown in graphic
Size of effect in data
© Anselm Spoerri
Tufte’s Principles – Summary
Good Information Design = Clear Thinking Made Visible
Greatest number of Ideas
in Shortest Time
with Least Ink in the Smallest Space
Principles
– Enforce Visual Comparisons
Show Comparisons Adjacent in Space
– Show Causality
– Show Multivariate Data
– Use Direct Labeling
– Use Small Multiples
– Avoid “Chart Junk”:
Not needed extras to be cute
© Anselm Spoerri
Human-Computer Interaction (HCI) - Recap
Define Target User Community
– Identify Usage Profiles
Perform Task Analysis
to ensure proper functionality
– Define tasks and subtasks
– Establish task frequencies of use
– Matrix of users and tasks helpful
Select Evaluation Measures
–
–
–
–
–
Time to learn
Speed of performance for key benchmarks
Rate and nature of common user errors
Retention over time
Subjective satisfaction: free-form comments and feedback
Create & Test Design Alternatives
– Use a wide range of mock-ups
© Anselm Spoerri
Recognize Diversity – Summary
Usage Profiles
Novice or First-Time Users
– Use familiar vocabulary and offer few choices
Knowledgeable Intermittent Users
– Emphasize recognition instead of recall
Expert Frequent Users
– Seek to get work done quickly  Macros
Interaction Styles
Direct Manipulation
Menu Selection
Form Fillin
 Novices Users
 Novices and Intermittent Users
 Intermittent and Expert Users
Command Language
Natural Language
 Expert Users
 Novices and Intermittent Users
© Anselm Spoerri
HCI – Eight Golden Rules of Interface Design
1. Strive for Consistency
–
Terminology, Prompts, Menus, Help screens, Color, Layout, Fonts
2. Enable frequent users to use Shortcuts
–
Abbreviations, Special keys, Hidden commands, Macro facilities
3. Informative Feedback
4. Design Dialogs to Yield Closure
–
–
Sequences of actions should be organized into groups
Beginning  middle  end
5. Offer Error Prevention & Simple Error Handling
6. Permit Easy Reversal of Actions
7. Support Internal Locus of Control
8. Reduce Short-term Memory Load
© Anselm Spoerri
Review:
User-Centered Product Design  Term Projects
High Concept
Ethnographic Observation
Prototype
Scenario Development
Anticipated Usage Profiles
Use different Interaction Styles
Software Development
Participatory Design
Expert Reviews
Heuristic Evaluation
Guidelines Review
Consistency Inspection
Cognitive Walkthrough
Formal Usability Inspection
Usability Testing
Acceptance Testing
Product Release
Surveys
Field Testing
© Anselm Spoerri
User-Centered Design Methods
Heuristic Evaluation
–
–
–
–
Quick and cheap
Suitable for early use in usability engineering lifecycle
Evaluate compliance with recognized usability principles
(the "heuristics").
Three to five evaluators: more  diminishing returns
Nielsen's Ten Usability Heuristics
1. Visibility of system status
2. System matches the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10.Help and documentation
 Find Flaws & Suggest Improvements
© Anselm Spoerri
Usability Testing
Goal of Usability Testing
Find flaws and refine interface  create report with findings
Effective Usability Testing
Encourage users to think aloud (two people together can be better)
Support users in completion of task list
Invite general comments or suggestions afterwards
Videotaping
Show designers actual user behavior
Surprise of Usability Testing
Speed–up of project and dramatic cost savings
Limitations of Usability Testing
Emphasizes first-time usage
Limited coverage of the interface features.
Expert reviews can supplement usability testing
© Anselm Spoerri
Information Visualization – Design & Interaction
© Anselm Spoerri
Interaction – Mappings + Timings
Mapping Data to Visual Form
1. Variables Mapped to “Visual Display”
2. Variables Mapped to “Controls”
 “Visual Display” and “Controls” Linked
Interaction Responsiveness
“0.1” second
 Perception of Motion
 Perception of Cause & Effect
“1.0” second
 “Unprepared response”
“10” seconds
 Pace of routine cognitive task
© Anselm Spoerri
Information Visualization – Design & Interaction
© Anselm Spoerri
ConeTree – Hierarchy Visualization
© Anselm Spoerri
Hierarchy – Exponential Growth of Nodes
Branching = 3
Levels
Base Width = B
L-1
© Anselm Spoerri
ConeTree
How to manage exponential growth of nodes?
 Use 3D to “linearize” problem – width fixed
 Use “logarithmic” animation of object or point of interest
to create “Object Constancy”
Location
Logarithmic IN / OUT
linear
Time
© Anselm Spoerri
Information Visualizer
– Reduce Information Access Costs
– Increase Screen Space  Rooms
– Create Visual Abstractions
– ConeTree
– PerspectiveWall
– Increase Information Density  3D and
Animation
Overload Potential
Create “Focus + Context” display with Fisheye Distortion
 Logarithmic Animation to rapidly move Object into Focus
 Object Constancy
 Shift Cognitive Load to Perceptual System
– Tune System Response Rates to “Human
Constants”
– 0.1 second, 1 second, 10 seconds

Cognitive Co-Processor
© Anselm Spoerri
Dynamic Queries & Starfields
Two Most Important Variables Mapped to “Scatterplot”
Other Variables Mapped to “Controls”
“Visual Display” and “Controls” Linked
© Anselm Spoerri
Hierarchical Information – Recap
Traditional
Treemap
ConeTree
SunTree
Botanical
© Anselm Spoerri
Treemaps – Other Layout Algorithms
Hard to Improve Aspect Ratio and Preserve Ordering
Slice-and-dice
Ordered,
very bad aspect ratios
stable
Squarified
Unordered
best aspect ratios
medium stability
© Anselm Spoerri
Treemaps – Shading & Color Coding
© Anselm Spoerri
Hierarchical Information
2D Hyperbolic Tree
3D Hyperbolic Tree
© Anselm Spoerri
Focus+Context Interaction
Nonlinear Magnification InfoCenter
– http://www.cs.indiana.edu/~tkeahey/research/nlm/nlm.html
Nonlinear Magnification
= “Fisheye Views"
= “Focus+Context"
Preserve Overview
enable Detail Analysis
in same view
© Anselm Spoerri
Table Lens
sorting
hidden
focal
Non focal
spotlighting
Control point
© Anselm Spoerri
Interaction Benefits
Direct Manipulation
Reduce Short-term Memory Load
Immediate
Feedback
Permit Easy Reversal of Actions
Linked Displays
Increase Info Density
Animated Shift of
Focus
Offload work from cognitive to perceptual
system
Object Constancy and Increase Info
Density
Dynamic Sliders
Reduce Errors
Semantic Zoom
 O(LOG(N)) Navigation Diameter
Focus+Context
 O(LOG(N)) Navigation Diameter
Details-on-Demand
Reduce Clutter & Overload
Output  Input
Reduce Errors
© Anselm Spoerri
User Interfaces and Visualization for Text Retrieval
Users have
fuzzy understanding of their information need
Information Access = Iterative process
User Interface should help users
•
Formulate Queries
•
Select Information Sources
•
Understand Search Results
•
Track Progress of Search
© Anselm Spoerri
Starting Search – Expand Category  Cat-a-Cone
© Anselm Spoerri
Query Formulation – “Power Set” Visualizations
© Anselm Spoerri
Visualization of Document Attributes
© Anselm Spoerri
Ranked List  Spiral
© Anselm Spoerri
Visualization of Inter-Document Similarities
© Anselm Spoerri
Visualization of Inter-Document Similarities  Point of Reference
© Anselm Spoerri
Visualization of Inter-Document Similarities  2D Maps
© Anselm Spoerri
Visualization of Inter-Document Similarities  2.5D Maps
© Anselm Spoerri
Visualization of Inter-Document Similarities  3D
© Anselm Spoerri
Information Visualization – “Toolbox”
Perceptual Coding
Interaction
Position
Direct Manipulation
Size
Immediate Feedback
Orientation
Linked Displays
Texture
Animate Shift of Focus
Shape
Color
Shading
Depth Cues
Surface
Dynamic Sliders
Semantic Zoom
Focus+Context
Details-on-Demand
Output  Input
Motion
Stereo
Proximity
Similarity
Continuity
Information Density
Maximize Data-Ink Ratio
Maximize Data Density
Minimize Lie factor
Connectedness
Closure
Containment
© Anselm Spoerri
Course Review
Human Visual Perception
How it relates to creating effective information visualizations
Understand Key Design Principles
for Creating Information Visualizations, Web Sites and Film / Video
Studied Major Information Visualization Tools
 Videos and Demos
Studied Visual Text Retrieval Interfaces
– Hearst Overview
– Query Formulation, Document Attributes, Inter-Document Similarities
Human Computer Interaction
– Heuristic Evaluation of Grokker and Ujiko
© Anselm Spoerri