© 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

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

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

© anselm spoerri lecture 14 – course review human visual perception how it relates to creating...

Documents