Jinwook Seo

Pad++: A Zoomable Graphical Sketchpad For Exploring Alternati

ve Interface Physics

Benjamin B. Bederson, James D. Hollan, Ken Perlin, Jonathan Meyer, Dav

id Bacon, George Furnas

Jinwook Seo

Paper Outline

• Introduction : Motivations• Descriptions of Pad++ features• Visualization : Visualization Example with Pad++• Space-Scale Diagrams : Analytical tool• Procedural Animation : Smooth animation• Implementation• Physics-Based Strategies For Interface Design• Future Directions• Availability

Jinwook Seo

Motivations• Limited space vs. Infinite space

– Elastic stretchable infinite sheet

• Metaphor-based approachvs. Physics-based approach

– beyond the desktop metaphor– new computer-based mechanisms

• Interface Design = Development of a physics of appearance and

behavior for informational objects

Informational physics

Material

physics

activity use

representation wear

Jinwook Seo

Motivations• View information at multiple scales

– Semantic zooming

• Tap into natural spatial ways of thinking– Central focal area + periphery in detail

• Make it more intuitive and easier to find specific information in large dataspaces Filter or recommend a subset of the data

Provide a useful substrate to structure information

Jinwook Seo

What is Pad++?• A general-purpose substrate for creating an

d interacting with structured information based on a zoomable interface

Substrate

(C++)

TCL/TK

API

KPL

Applications

Jinwook Seo

Features of Pad++• Semantic Zooming

– Change the way things look depending on their size

• Portals and Lenses– Provide views onto other areas(+filtering)– Index : sticky portal– Lenses: change only the way objects are

presented

• Visual searching + Context-based search

Jinwook Seo

Visualization Experiments

• Multiple-resolution space

vs. Fixed-resolution layout– There is always more room to put information

“between the cracks”.– Suitable for visualizing hierarchical data

• Deeper the hierarchy, smaller the size

Jinwook Seo

Visualization Experiments

• HTML Browser– Graphical depiction of semantic relationship

between windows– Tree structure : Parent-child relationship– Overview Lense– Arbitrary cyclic graph

• Choose the root node, and BFS

Jinwook Seo

Visualization Experiments

• HTML Browser

Jinwook Seo

Visualization Experiments

• Directory Browser

Jinwook Seo

Visualization Experiments

• Timeline

Jinwook Seo

Visualization Experiments

• Oval Document layout

Jinwook Seo

Space-Scale Diagram

Jinwook Seo

Space-Scale Diagram

Basic pan-zoom trajectories

Jinwook Seo

Space-Scale Diagram

Solution to the simple joint pan-zoom problem

Jinwook Seo

Space-Scale Diagram

Shortest path in pan-zoom parameter space

Jinwook Seo

Space-Scale Diagram

Semantic Zooming

Jinwook Seo

Procedural Animation

• To support an informational physics in

which objects animate naturally

• KPL : fast post-fix stack language

• Morphing : Transition between two actions having different tempos

• Example : Zoomable Choice Widget

• Example : Mouse and Cheese

Jinwook Seo

A zoomable choice widget

Procedural Animation

Jinwook Seo

Implementation

• 600,000 Objects : 10 frames/sec

• Rendering times # of visible objects

Substrate

(C++)

TCL/TK

API

KPL

Applications

Jinwook Seo

Efficiency Methods in Pad++• Spatial Indexing : bounding box• Clustering : balanced tree• Refinement : skip detail while navigating• LOD : render item depending on its size• Region Management : changed region update• Clipping• Adjustable Frame Rate• Interruption• Ephemeral Objects• Optimized Image Rendering

Jinwook Seo

Physics-Based Strategies For Interface Design

• Effective complement to traditional metaphor-based approaches

• Exploit radical new computer-based mechanism (zoom/scale)

• appearance and behavior knowledge

• Large and complex information needs scale

Jinwook Seo

My favorite sentence

If interface designers are to move beyond window, icons, menus, and pointers to explore a larger space of interface possibility,

additional ways of thinking about interface that go beyond the desktop metaphor are required.

Jinwook Seo

Contributions

• A new strategies for interface design– Physics-Based Strategy– Exploring more effective computer-based

mechanisms

• Space-Scale Diagram – analytical tool for multiscale spaces

Jinwook Seo

Notes on the references

• Sketchpad, Sutherland, MIT,1963 – The first interactive computer graphics– TX-2 : 320KB, 9 inch CRT, lightpen– 2000:1 scale many acres of drawing space

• Constraint-Based Drawing, Borning, 1979

• Pad, Ken Perlin and David Fox, NYU, 1993– Semantic Zooming, Portal

Jinwook Seo

Notes on the references

• Generalized Fisheye Views by Furnas

• Perspective wall by Mackinlay

• Information Visualizer by Stuart Card– Information workspace– E.g. Cone-tree

Jinwook Seo

Critique

• Strengths– Alternative strategies for interface design– Space-Scale Diagram– Well organized, easy to read.

• Weaknesses– Limitations of ZUI ? (lost in space, irreversible)– Usability test/Performance analysis ?

Jinwook Seo

What has happened to this topic?

• Pad++ version 0.9 available in UCSD

• Jazz in UMD– General-purpose 2D graphics toolkit for creatin

g ZUI– Monolithic Design vs. Minilithic Design

• KidPad (Jazz Application)– a collaborative story authoring tool for children