Information Visualization: Navigation Chris North cs3724: HCI

Presentations pat kennedy james walker Vote: UI Hall of Fame/Shame?

Next Mar 21: Proj 2, initial implementation Apr 4: Proj 2, final implementation Presentations: UI critique or HW2 results Thurs: dan kirkpatrick, jason barnett Next Tues: brian ward, juan vera Next Thurs: dan constantin, grant underwood

Review Shneiderman’s Info Vis. mantra? overview first, zoom&filter, details on demand Strategies for Multi-D visualization: tablelens Spotfire: scatterplots, dynamic queries Parallel coordinates

1D and 2D Spaces 1D: info has strong 1D organization timeline, reststops on highway Tape measure text 2D: info has strong 2D organization maps Tables? Pictures, photos

Examples 1D: Project 1, VCR Timeline for scheduling, set on/off flags Calendar shows overview of schedule

PowerPoint Slide Sorter Data Space: 1D array of slides Visualization: 2D array, nav 1d

Typical Navigation 1D scrollbar 2D scrollbars

Keyhole Problem Where am I? Where can I go? Where do I want to go? How do I get there? Lack of context, overview

Visual Overview Show me the data! Map, organization (spatial layout of concepts) What information is (not) available? Adds context info, relationships Enables direct access Encourages exploration HCI metrics: Improves user performance, learning time, error rates, retention, satisfaction Insight

Navigation Strategies Detail Only Zooming Overview+Detail Focus+Context (Distortion, fisheye) Keyhole problem

Zooming: 1D http://www.cs.umd.edu/hcil/lifelines/

Zooming: 2D http://www.cs.umd.edu/hcil/jazz/ Semantic zooming: Don’t just show things at different size change objects to make sense E.g. add/remove detail info Powers of Ten Controls?

Zooming large 2D spaces http://terraserver.homeadvisor.msn.com/image.asp?S=10&T=1&X=2689&Y=20639&Z=17&W=2

Overview+Detail: 1D SeeSoft

Overview+Detail: 2D Overview: Detail: Zoom factor = 5 Square in overview coupled to scroll bars of detail

Overview+Detail Simultaneous overview and detail view Views are linked: Selector in overview navigates detail Navigating detail updates selector in overview

Multiple levels = large scale overview intermediate view intermediate view detail view Zoom factor = 5*5*5 = 125

Multiple Foci

Focus+Context: 1D http://www.cs.umd.edu/hcil/fisheyemenu/

Focus+Context: 2D

Comparison Zooming: O+D: F+C Scales best Simple Lose context, get lost Screen space O+D: Keeps context Limited scale Direct access F+C Multiple foci Distortion disorienting Implementation difficult