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

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

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

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

Recall?

Recognize?

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

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

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

Pre-Attentive - Summary

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

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

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

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

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

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

Recognition – Processing Stages

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

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 =

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

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

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

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

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

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

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

Information Visualization – Design & Interaction

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

Information Visualization – Design & Interaction

ConeTree – Hierarchy Visualization

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

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

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

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

Hierarchical Information – Recap Treemap Traditional ConeTree SunTree Botanical

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

Treemaps – Shading & Color Coding

Hierarchical Information 2D Hyperbolic Tree 3D Hyperbolic Tree

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

Table Lens sorting hidden focal Non focal spotlighting Control point

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

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

Starting Search – Expand Category  Cat-a-Cone

Query Formulation – “Power Set” Visualizations

Visualization of Document Attributes

Ranked List  Spiral

Visualization of Inter-Document Similarities

Visualization of Inter-Document Similarities  Point of Reference

Visualization of Inter-Document Similarities  2D Maps

Visualization of Inter-Document Similarities  2.5D Maps

Visualization of Inter-Document Similarities  3D

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

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