1. © Anselm Spoerri 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. © 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

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

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

5. © Anselm Spoerri Recall?

6. © Anselm Spoerri Recognize?

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

8. © Anselm Spoerri 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. © Anselm Spoerri 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. © Anselm Spoerri Pre-Attentive - Summary

11. © Anselm Spoerri Human Visual System – Recap (cont.) 3612 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 Symbols Simple Visual Attributes (or combination thereof) Distinct – Use different visual channels for different types of information Pre-Attentive Processing Important for Design of Visualizations Pre-Attentive Properties can be perceived immediately Pre-Attentive Conjunctions Position + Color Position + Shape Position + Form Color + Stereo Color + Motion

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

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

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

15. © Anselm Spoerri Depth Cues – Relative Importance – Recap Depth Contrast Depth (meters) 0.001 0.01 0.1 1.0 110100 Occlusion Relative size Convergence accommodation Binocular disparity Motion parallax Aerial

16. © Anselm Spoerri Motion + 3D vs 2D Motion Coding –Causality –Object Constancy –Anthropomorphic Form from Motion demo 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. © Anselm Spoerri Recognition – Processing Stages

18. © 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. 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. © 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 data Lie factor = Data ink ratio = Data ink Total ink used in graphic Maximize data-ink ratio

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

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

22. © 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  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. © 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

24. © Anselm Spoerri 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. © 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

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

27. © Anselm Spoerri Information Visualization – Design & Interaction

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

29. © Anselm Spoerri Information Visualization – Design & Interaction

30. © Anselm Spoerri ConeTree – Hierarchy Visualization

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

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

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

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

35. © Anselm Spoerri Hierarchical Information – Recap Treemap Traditional ConeTree SunTree Botanical

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

37. © Anselm Spoerri Treemaps – Shading & Color Coding

38. © Anselm Spoerri Hierarchical Information 2D Hyperbolic Tree3D Hyperbolic Tree

39. © Anselm Spoerri Focus+Context Interaction Nonlinear Magnification InfoCenter –http://www.cs.indiana.edu/~tkeahey/research/nlm/nlm.htmlhttp://www.cs.indiana.edu/~tkeahey/research/nlm/nlm.html Nonlinear Magnification = “Fisheye Views" = “Focus+Context" Preserve Overview enable Detail Analysis in same view

40. © Anselm Spoerri Table Lens hiddenfocal Non focal sorting spotlighting Control point

41. © Anselm Spoerri Interaction Benefits Direct ManipulationReduce Short-term Memory Load Immediate Feedback Permit Easy Reversal of Actions Linked DisplaysIncrease Info Density Animated Shift of Focus Offload work from cognitive to perceptual system Object Constancy and Increase Info Density Dynamic SlidersReduce Errors Semantic Zoom  O(LOG(N)) Navigation Diameter Focus+Context  O(LOG(N)) Navigation Diameter Details-on-DemandReduce Clutter & Overload Output  InputReduce Errors

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

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

44. © Anselm Spoerri Query Formulation – “Power Set” Visualizations

45. © Anselm Spoerri Visualization of Document Attributes

46. © Anselm Spoerri Ranked List  Spiral

47. © Anselm Spoerri Visualization of Inter-Document Similarities

48. © Anselm Spoerri Visualization of Inter-Document Similarities  Point of Reference

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

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

51. © Anselm Spoerri Visualization of Inter-Document Similarities  3D

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

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