1. 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

2. 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

3. 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

4. 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

5. Recall?

6. Recognize?

7. 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

8. Parallel Processes  Serial Processes
Parallel Processing
Orientation
Texture
Color
Motion
Detection
Edges
Regions
2D Patterns
Serial Processing
Object Identification
Short Term Memory 5 ± 2 = 3 to 7 Objects

9. Human Visual System – Recap (cont.)
Luminance Channel
Detail
Form
Shading
Motion
Stereo
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

10. Pre-Attentive - Summary

11. Human Visual System – Recap (cont.)3 6 1 2 N u m b e r o f d i s t a c 5 7 9
Pre-Attentive Processing
Important for Design of Visualizations
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
Pre-Attentive Conjunctions
Position + Color
Position + Shape
Position + Form
Color + Stereo
Color + Motion
Design of Symbols
Simple Visual Attributes (or combination thereof)
Distinct – Use different visual channels for different types of information

12. Proximity Similarity Continuity Symmetry Closure Relative Size
Gestalt Laws – Recap
Proximity
Similarity
Continuity
Symmetry
Closure
Relative Size
Figure and Ground

13. Space Perception – Recap
Depth Cues
Shape-from-Shading
Shape-from-Contour
Shape-from-Texture
Shape-from-Motion

14. Simple Lighting Model – Recap
Light from above and at infinity
Diffuse, Specular and Ambient Reflection Depth Cues
Diffuse Lambertian
Specular
Ambient Shadows

15. Depth Cues – Relative Importance – Recap
, 96
Depth Contrast
Depth (meters)
0.001
0.01
0.1
1.0 1 10
100
Motion
parallax
Occlusion
Binocular
disparity
Relative size
Convergence
accommodation
Aerial

16. Motion Coding 2D 3D Motion + 3D vs 2D Causality Object Constancy
Anthropomorphic Form from Motion demo 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

17. Recognition – Processing Stages

18. 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.
Show Multivariate data
Napoleon's March shows six: army size, location (in 2 dimensions), direction, time, and temperature.
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

19. Maximize data-ink ratio
Tufte’s Measures
Data ink ratio =
Data ink
Total ink used in graphic
Maximize data-ink ratio
Maximize data density
Data density of graphic =
Number entries in data matrix
Area of data graphic
Measuring Misrepresentation  close to 1
Size of effect shown in graphic
Size of effect in data
Lie factor =

20. 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

21. 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

22. 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  Novices Users
Menu Selection  Novices and Intermittent Users
Form Fillin  Intermittent and Expert Users
Command Language  Expert Users
Natural Language  Novices and Intermittent Users

23. HCI – Eight Golden Rules of Interface Design
Strive for Consistency
Terminology, Prompts, Menus, Help screens, Color, Layout, Fonts
Enable frequent users to use Shortcuts
Abbreviations, Special keys, Hidden commands, Macro facilities
Informative Feedback
Design Dialogs to Yield Closure
Sequences of actions should be organized into groups
Beginning  middle  end
Offer Error Prevention & Simple Error Handling
Permit Easy Reversal of Actions
Support Internal Locus of Control
Reduce Short-term Memory Load

24. Review: User-Centered Product Design  Term Projects
High Concept
Ethnographic Observation
Prototype
Anticipated Usage Profiles
Use different Interaction Styles
Scenario Development
Participatory Design
Software Development
Expert Reviews
Heuristic Evaluation
Guidelines Review
Consistency Inspection
Cognitive Walkthrough
Formal Usability Inspection
Usability Testing
Acceptance Testing
Product Release
Surveys
Field Testing

25. 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
Visibility of system status
System matches the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
 Find Flaws & Suggest Improvements

26. Goal of Usability Testing Effective 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

27. Information Visualization – Design & Interaction

28. Interaction – Mappings + Timings
Mapping Data to Visual Form
Variables Mapped to “Visual Display”
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

29. Information Visualization – Design & Interaction

30. ConeTree – Hierarchy Visualization

31. Hierarchy – Exponential Growth of Nodes
Levels
Branching = 3
Base Width = B
L - 1

32. 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”
Time
Location
Logarithmic IN / OUT
linear

33. 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

34. Dynamic Queries & Starfields
Two Most Important Variables Mapped to “Scatterplot”
Other Variables Mapped to “Controls”
“Visual Display” and “Controls” Linked

35. Hierarchical Information – Recap
Treemap
Traditional
ConeTree
SunTree
Botanical

36. 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

37. Treemaps – Shading & Color Coding

38. Hierarchical Information
2D Hyperbolic Tree
3D Hyperbolic Tree

39. Focus+Context Interaction
Nonlinear Magnification InfoCenter
Nonlinear Magnification
= “Fisheye Views"
= “Focus+Context"
Preserve Overview enable Detail Analysis in same view

40. Table Lens
sorting
hidden
focal
Non focal
spotlighting
Control point

41. 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
Details-on-Demand
Reduce Clutter & Overload
Output  Input

42. 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

43. Starting Search – Expand Category  Cat-a-Cone

44. Query Formulation – “Power Set” Visualizations

45. Visualization of Document Attributes

46. Ranked List  Spiral

47. Visualization of Inter-Document Similarities

48. Visualization of Inter-Document Similarities  Point of Reference

49. Visualization of Inter-Document Similarities  2D Maps

50. Visualization of Inter-Document Similarities  2.5D Maps

51. Visualization of Inter-Document Similarities  3D

52. Information Visualization – “Toolbox”
Perceptual Coding
Interaction
Position
Size
Orientation
Texture
Shape
Color
Shading
Depth Cues
Surface
Motion
Stereo
Proximity
Similarity
Continuity
Connectedness
Closure
Containment
Direct Manipulation
Immediate Feedback
Linked Displays
Animate Shift of Focus
Dynamic Sliders
Semantic Zoom
Focus+Context
Details-on-Demand
Output  Input
Maximize Data-Ink Ratio
Maximize Data Density
Minimize Lie factor
Information Density

53. Human Visual Perception Understand Key Design Principles
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