Innovative UI Ideas Marti Hearst SIMS 213, UI Design & Development April 20, 1999

2 Note l Figures are removed from the web- version of this lecture due to copyright considerations.

3 Today l Dynamic queries on data –IVEE/Filmfinder –Toolglass/Magic Lenses l Intro to distortion-based views –focus+context –fisheye lenses

4 Dynamic Queries Dynamic Queries - Adjusting sliders, buttons, etc and getting immediate feedback Also called direct-manipulation queries U se sliders and other related controls to adjust the query Get immediate (less than 100 msec) feedback with data Hard to update fast with large databases Need to accomplish the following: select a set of sliders from a large set of attributes specify greater than, less than, or greater than and less than deal with boolean combinations of slider settings choose among highlighting by color, points or light, regions, etc cope with tens of thousands of points permit weighting of criteria

5 Dynamic Queries: Example l IVEE/Spotfire/Filmfinder (Ahlberg & Shneiderman 93)

6 Specifying Queries on Data l Magic Lenses: (Bier, Fishkin, Stone, Pier, others): –Drag around a palette of operators –Click through the palette to apply the operator –Operators can be combined by overlapping them –Two-handed interface

7 How to Specify Operators on Data? l Selecting from menu interrupts the flow of activity l Suggestion: Tool Glass/Magic Lenses (Stone, Fishkin, Bier, others) –drag a translucent operator palette around –combine operators directly on the palette –two-handed interface

8 A Palette of Click-through Operators (Bier et al. 93)

9 Click-through operators Example: change underlying color (Bier et al. 93) OriginalChange Fill Color Change Outline Color

10 Combine Operators Outliner + Magnifying Lens (Bier et al. 93)

11 Simultaneously Choose and Place a Shape (Bier et al. 93)

12 Directly View and Change Font Characteristics (Bier et al. 93)

13 Dynamic Queries with Movable Filters (Fishkin & Stone 95) l Brushing a scatter plot –use a lens with a range setting l Combining boolean operators –combine AND and OR lenses l Complex queries –one filter for medium priced homes in CA –another for medium priced homes in MI –can view both sets simultaneously l Find missing data –overlay a lens with all city data on any variable with data points for cities l Expand out clumped-together data points

14 Dynamic Queries with Movable Filters

15 Viewing Huge Datasets l Problem: –The computer display is a small window through which to view huge datasets l Standard Solutions: –Display a portion at a time »scrolling / paging / cropping »subdivide (into hierarchical structure) l navigate the hierarchy –Problem: »Lose the context / get lost »Comparisons difficult

16 Distortion-based Techniques l Another solution: –Use pixels more carefully l Focus + Context –Show a lot of information at once »Details are too small to be visible –Focus on a subset of interest »Make this subset large enough to be viewed –Also called Fisheye Views l Distortion-based views

17 Example of Focus + Context l A huge table of data –Our census data has over 3000 records –Nominal, ordinal, and quantitative types l How can we visualize the entire table? –TableLens (Rao & Card 94) –Use Focus+Context to view all records –Special interactivity allows for pattern discovery

18 Viewing Huge Tables: TableLens (Rao & Card 94)

19 TableLens (Rao & Card 94) l Focus on the records of interest l Context: other records –depicted graphically –graphics allow for viewing patterns in both nominal and quantititive data types –interaction via sorting for pattern discovery –nearly keyboardless interface

20 Focus + Context Data Types l Tables l Hierarchies l Networks l Maps l Artificial “worlds”

21 Views l A variation on Focus + Context –Make objects of interest large, detailed –Less important objects successively smaller l Goal: –Smooth integration of local detail and global context l Technique: –Reposition and resize objects

22 Noik’s Demonstration

23 Sarkar & Brown 94 Paris Metro, importance corresponds to number of connections

24 Hyperbolic Browser l Focus + Context Technique –detailed view blended with a global view l First lay out the hierarchy on Poincare’ mapping of the hyperbolic plane l Then map this plane to a disk l Use animation to navigate along this representation of the plane l Start with the tree’s root at the center

25 Hyperbolic Tree Browser (Lamping et al. 95)

26 Hyperbolic Browser l In the hyperbolic plance, the circumference and area of a circle grow exponentially with its radius l Allocate each node a wedge of the hyperbolic plane l The node recursively places all its children within an arc of that wedge –at an equal distance from itself –far enough out so the children are separated by at least a minimum distance l Parallel lines diverge in hyperbolic geometry –each child’s wedge will span about the same angle as its parent’s –but not children’s wedges will overlap

27 Summary l Innovative UI techniques –Try to fit more information into the screen via »Animation »Focus+context –Attempts to commercialize still not widely successful –Will this change?