Pad++: A Zoomable Graphical User Interface

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

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

What is Pad++?

• A 2D alternative graphical interface to the traditional window and icon-based interfaces, that is based on the zooming.

• If interface designers are to move beyond windows, icons menus, and pointers to explore a larger space of interface possibilities, new interaction techniques must go beyond the desktop metaphor.

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

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

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

Visualization Experiments

• HTML Browser

Visualization Experiments

• Directory Browser

Visualization Experiments

• Timeline

Visualization Experiments

• Oval Document layout

Space-Scale Diagram

Space-Scale Diagram

Basic pan-zoom trajectories

Space-Scale Diagram

Solution to the simple joint pan-zoom problem

Space-Scale Diagram

Shortest path in pan-zoom parameter space

Space-Scale Diagram

Semantic Zooming

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

A zoomable choice widget

Procedural Animation

Implementation

• 600,000 Objects : 10 frames/sec

• Rendering times # of visible objects

Substrate

(C++)

TCL/TK

API

KPL

Applications

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

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

Contributions

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

mechanisms

• Space-Scale Diagram – analytical tool for multiscale spaces

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 ?