Innovative UI Ideas

Marti HearstSIMS 213, UI Design &

DevelopmentApril 20, 1999

2

Note

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

3

Today

Dynamic queries on data– IVEE/Filmfinder– Toolglass/Magic Lenses

Intro to distortion-based views– focus+context– fisheye lenses

4

Dynamic QueriesDynamic Queries - Adjusting sliders, buttons, etc and

getting immediate feedback Also called direct-manipulation queries

Use 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 IVEE/Spotfire/Filmfinder (Ahlberg &

Shneiderman 93)

6

Specifying Queries on Data

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?

Selecting from menu interrupts the flow of activity

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 operatorsExample: change underlying

color(Bier et al. 93)

Original Change Fill Color

Change Outline Color

10

Combine OperatorsOutliner + 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)

Brushing a scatter plot– use a lens with a range setting

Combining boolean operators– combine AND and OR lenses

Complex queries– one filter for medium priced homes in CA– another for medium priced homes in MI– can view both sets simultaneously

Find missing data– overlay a lens with all city data on any variable with data

points for cities Expand out clumped-together data points

14

Dynamic Queries with Movable Filters

15

Viewing Huge Datasets Problem:

– The computer display is a small window through which to view huge datasets

Standard Solutions:– Display a portion at a time

»scrolling / paging / cropping»subdivide (into hierarchical structure)

navigate the hierarchy

– Problem:»Lose the context / get lost»Comparisons difficult

16

Distortion-based Techniques

Another solution:– Use pixels more carefully

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 Distortion-based views

17

Example of Focus + Context

A huge table of data– Our census data has over 3000 records– Nominal, ordinal, and quantitative types

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)

Focus on the records of interest 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

Tables Hierarchies Networks Maps Artificial “worlds”

21

Views

A variation on Focus + Context– Make objects of interest large, detailed– Less important objects successively

smaller Goal:

– Smooth integration of local detail and global context

Technique:– Reposition and resize objects

22

Noik’s Demonstration

23

Sark

ar

& B

row

n 9

4Pari

s M

etr

o, im

port

ance

corr

esp

onds

to

num

ber

of

connect

ions

24

Hyperbolic Browser Focus + Context Technique

– detailed view blended with a global view First lay out the hierarchy on Poincare’

mapping of the hyperbolic plane Then map this plane to a disk Use animation to navigate along this

representation of the plane Start with the tree’s root at the center

25

Hyperbolic Tree Browser (Lamping et al. 95)

26

Hyperbolic Browser In the hyperbolic plance, the circumference and area

of a circle grow exponentially with its radius Allocate each node a wedge of the hyperbolic plane 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 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

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?