© Anselm Spoerri Lecture 14 – Course Review Human Visual Perception How it relates to creating...
-
date post
15-Jan-2016 -
Category
Documents
-
view
217 -
download
0
Transcript of © Anselm Spoerri Lecture 14 – Course Review Human Visual Perception How it relates to creating...
© Anselm Spoerri
Lecture 14 – Course Review
Human Visual PerceptionHow 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 ProblemHow to map non–spatial abstractions into effective visual form?
GoalUse 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 + PATTERNS1 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
a
AB
C
D
Detection• Edges• Regions• 2D Patterns
Serial Processing• Object Identification• Short Term Memory 5 ± 2 = 3 to 7 Objects
© Anselm Spoerri
Human Visual System – Recap (cont.)
Luminance Channel
Detail
Form
Shading
Motion
Stereo
Color Channels
Surfaces of ThingsSensitive 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.)
3 6 12
Number of distractors
500
700
900
Laws of Pre-Attentive Display Must Stand Out in Simple Dimension
Position
Color Simple Shape = orientation, size
Motion Depth
Design of SymbolsSimple Visual Attributes (or combination thereof)
Distinct – Use different visual channels for different types of information
Pre-Attentive ProcessingImportant for Design of Visualizations
Pre-Attentive Properties can be perceived immediately
Pre-Attentive Conjunctions
Position + Color
Position + Shape
Position + Form
Color + Stereo
Color + Motion
© 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
DiffuseLambertian
Specular AmbientShadows
Light from above and at infinity
Diffuse, Specular and Ambient Reflection Depth Cues
© Anselm Spoerri
Depth Cues – Relative Importance – Recap
Depth
Con
trast
Depth (meters)
0.001
0.01
0.1
1.0
1 10 100
Occlusion
Relative size
Convergenceaccommodation
Binoculardisparity
Motionparallax
Aerial
© Anselm Spoerri
Motion + 3D vs 2D
Motion Coding – 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
a
100 200
50%
100%
Time (msec.)
Direct LaunchingDelayed launchingNo causality
© Anselm Spoerri
Recognition – Processing Stages
© Anselm Spoerri
Tufte - Escape Flatland: Napoleon's March
Enforce Visual ComparisonsWidth of tan and black lines gives you an immediate comparison of the size of Napoleon's army at different times during march.
Show CausalityMap shows temperature records and some geographic locations that shows that weather and terrain defeated Napoleon as much as his opponents.
Show Multivariate dataNapoleon's March shows six: army size, location (in 2 dimensions), direction, time, and temperature.
Use Direct LabelingIntegrate words, numbers & imagesDon'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
© Anselm Spoerri
Tufte’s Measures
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 dataLie factor =
Data ink ratio =Data ink
Total ink used in graphic
Maximize data-ink ratio
© 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 ProfilesNovice 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 StylesDirect 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
© 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
PrototypeAnticipated Usage ProfilesUse different Interaction Styles
Scenario Development
Participatory Design
Software Development Expert ReviewsHeuristic EvaluationGuidelines ReviewConsistency Inspection Cognitive WalkthroughFormal 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 Heuristics1. 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 TestingFind flaws and refine interface create report with findings
Effective Usability TestingEncourage users to think aloud (two people together can be better)Support users in completion of task listInvite general comments or suggestions afterwards
VideotapingShow designers actual user behavior
Surprise of Usability TestingSpeed–up of project and dramatic cost savings
Limitations of Usability Testing Emphasizes first-time usageLimited 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
Levels
Base Width = BL - 1
Branching = 3
© 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”
Time
Location
linear
Logarithmic IN / OUT
© Anselm Spoerri
Information Visualizer
– Reduce Information Access Costs– Increase Screen Space Rooms
– Create Visual Abstractions– ConeTree– PerspectiveWall
– Increase Information Density 3D and AnimationOverload 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
TreemapTraditional
ConeTree SunTree Botanical
© Anselm Spoerri
Treemaps – Other Layout Algorithms
Hard to Improve Aspect Ratio and Preserve Ordering
Slice-and-diceOrdered, very bad aspect ratios stable
SquarifiedUnorderedbest 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
hiddenhidden focalfocal Non focalNon focalsortingsorting
spotlightingspotlighting
Control pointControl 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”
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
Perceptual Coding Interaction
Information Density
© Anselm Spoerri
Course Review
Human Visual PerceptionHow 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