Pad : A Zoomable Graphical User Interface

1
Pad A Zoomable Graphical User Interface
2
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

3
What is Pad?

• A general-purpose substrate for creating and
  interacting with structured information based on
  a zoomable interface

4
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.

5
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

6
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

7
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

8
Visualization Experiments

• HTML Browser

9
Visualization Experiments

• Directory Browser

10
Visualization Experiments

• Timeline

11
Visualization Experiments

• Oval Document layout

12
Space-Scale Diagram
13
Space-Scale Diagram
Basic pan-zoom trajectories
14
Space-Scale Diagram
Solution to the simple joint pan-zoom problem
15
Space-Scale Diagram
Shortest path in pan-zoom parameter space
16
Space-Scale Diagram
Semantic Zooming
17
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

18
Procedural Animation
A zoomable choice widget
19
Implementation

• 600,000 Objects 10 frames/sec
• Rendering times ? of visible objects

20
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

21
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

22
Contributions

• A new strategies for interface design
• Physics-Based Strategy
• Exploring more effective computer-based
• mechanisms
• Space-Scale Diagram
• analytical tool for multiscale spaces

23
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 ?