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 and 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

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 ?