pad++ a zooming graphical sketchpad for exploring alternative interface physics benjamin b....

Pad++A Zooming Graphical Sketchpad for Exploring Alternative Interface Physics

Benjamin B. Bederson, James D. Hollan, Ken Perlin, Jonathan Meyer, David Bacon, George

Furnas

Presented by Evren Sirin

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

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

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

What is Pad++ A general-purpose substrate

creating and interacting with structured information based on a zoomable interface

PadDraw: Real application based on Pad++

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

Visualization Examples Variable resolution for

representation & interaction There is always more room to put

information “between the cracks” Suitable for visualizing hierarchical

data

HTML Browser

Directory Browser

TimeLine

Oval Document Layout

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

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

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

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

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)

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

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

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

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.

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

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

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

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

Outline view

Zoom into files

Read contents

Zoom out & pan

Create a portal

Move away the copy

Portal is NOT a copy

Pan & zoom in a portal