Pad A Zooming Graphical Sketchpad for Exploring Alternative Interface Physics

1. Pad++A Zooming Graphical Sketchpad for Exploring Alternative Interface Physics Benjamin B. Bederson, James D. Hollan, Ken Perlin, Jonathan Meyer, David Bacon, George Furnas

2. Overview Motivation Description of Pad++ Visualization Examples with Pad++ Space-Scale Diagrams Procedural Animation Implementation Critique

3. Motivation Massive amount of information Current metaphor-based approach is limited When designing with metaphors you are limited to those that exist Metaphors don�t scale easily to larger amounts of data Metaphors only bridge concepts temporarily Metaphors may be misleading The alternative is to design using interface physics

4. Informational Physics Strategy View information at multiple scales Elastic stretchable infinite sheet Semantic zooming Make it more intuitive and easier to find specific information in large data spaces Filter or recommend a subset of the data Provide a useful substrate to structure information

5. What is Pad++ A general-purpose substrate creating and interacting with structured information based on a zoomable interface PadDraw: Real application based on Pad++

6. Description Intuitive navigation Animated panning & zooming Visual searching + Content-based search Portals Provide views onto other areas (+filtering) Index: sticky portal Lenses Portals that change the way objects presented Semantic zooming Change the way things look depending on their size

7. Visualization Examples Variable resolution for representation & interaction There is always more room to put information �between the cracks� Suitable for visualizing hierarchical data

8. HTML Browser

9. Directory Browser

10. TimeLine

11. Oval Document Layout

12. Space-Scale Diagrams Analytical tool for describing  multiscale spaces Static representation of multiscale movements Used to solve two basic problem Joint pan & zoom Shortest paths between two points

13. Simple space-scale diagram A one dimensional space-scale diagram of six points as the view zooms in from (a) to (b) to (c) around the point q

14. Pan-zoom trajectories Basic pan-zoom trajectories are shown in the heavy dashed lines. (a) is a pure pan, (b) is a pure zoom (out), and (c) is a zoom around the point q

15. Solving joint pan-zoom problem Solution to the simple joint pan-zoom problem. The trajectory s monotonically approaches point (x2, z2) in both pan and zoom

16. Shortest path between two points Each arrow represents one unit of cast. Because zoom is logarithmic, it is often "shorter" to zoom out (a), make a small pan (b), and zoom back in (c), than to make a large pan directly (d)

17. Procedural Animation User-definable animated objects To support an informational physics in which objects animate naturally Clearly structured animated narrative vs. assortment of disjoint temporal events Simple widgets defined at a behavioral level Zoomable Choice Widget

18. Implementation Substrate implemented in C++ Scripting language interface Easily extensible (no need for C++ code) Implemented as a widget in Tcl/Tk Efficient byte-compiled language: KPL Efficiency results 600,000 Objects & 10 frames/sec Rendering times ? # of visible objects

19. Efficiency methods Spatial Indexing Clustering Refinement Level-Of-Detail Region Management Clipping Adjustable Frame Rate Interruption Ephemeral Objects Optimized Image Rendering

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

21. Contributions Alternative to WIMP Informational physics strategy for interface design Exploring potentially more effective computer-based mechanisms Space-Scale Diagram Analytical tool for multiscale spaces

22. Notes on the references Sketchpad, Sutherland The first interactive computer graphics Pad, Perlin & Fox Semantic Zooming, Portals Constraint-Based Drawing, Borning Generalized Fisheye Views, Furnas Perspective wall, Card, Robertson & Mackinlay visualizing linear information by smoothly integrating detailed and contextual views. Information Visualizer, Card Information workspace, Cone-trees

23. Strengths Effective complement to traditional metaphor-based approaches Space-Scale Diagram Weaknesses No experiment on HCI metrics Orientation problems: Zooming loses overview Jump back & forth between topics Critique

24. What has happened to this topic? Pad++: version 0.9 available in UCSD Jazz: in UMD General-purpose 2D graphics toolkit for creating ZUI CounterPoint: Zoomable presentation tool KidPad: a collaborative story authoring tool for children PhotoMesa: Zoomable image browser Zomit: generic package for developing ZUI Visualize biological data and to navigate in a large space of biological information

29. Outline view

30. Zoom into files

31. Read contents

32. Zoom out & pan

33. Create a portal

34. Move away the copy

35. Portal is NOT a copy

36. Pan & zoom in a portal