Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales...
-
Upload
annice-dixon -
Category
Documents
-
view
218 -
download
0
Transcript of Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales...
![Page 1: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/1.jpg)
Pad++: A Zoomable Graphical User Interface
![Page 2: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/2.jpg)
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
![Page 3: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/3.jpg)
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
![Page 4: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/4.jpg)
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.
![Page 5: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/5.jpg)
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
![Page 6: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/6.jpg)
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
![Page 7: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/7.jpg)
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
![Page 8: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/8.jpg)
Visualization Experiments
• HTML Browser
![Page 9: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/9.jpg)
Visualization Experiments
• Directory Browser
![Page 10: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/10.jpg)
Visualization Experiments
• Timeline
![Page 11: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/11.jpg)
Visualization Experiments
• Oval Document layout
![Page 12: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/12.jpg)
Space-Scale Diagram
![Page 13: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/13.jpg)
Space-Scale Diagram
Basic pan-zoom trajectories
![Page 14: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/14.jpg)
Space-Scale Diagram
Solution to the simple joint pan-zoom problem
![Page 15: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/15.jpg)
Space-Scale Diagram
Shortest path in pan-zoom parameter space
![Page 16: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/16.jpg)
Space-Scale Diagram
Semantic Zooming
![Page 17: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/17.jpg)
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
![Page 18: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/18.jpg)
A zoomable choice widget
Procedural Animation
![Page 19: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/19.jpg)
Implementation
• 600,000 Objects : 10 frames/sec
• Rendering times # of visible objects
Substrate
(C++)
TCL/TK
API
KPL
Applications
![Page 20: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/20.jpg)
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
![Page 21: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/21.jpg)
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
![Page 22: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/22.jpg)
Contributions
• A new strategies for interface design– Physics-Based Strategy– Exploring more effective computer-based
mechanisms
• Space-Scale Diagram – analytical tool for multiscale spaces
![Page 23: Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.](https://reader033.fdocuments.us/reader033/viewer/2022051621/5697bfae1a28abf838c9c68a/html5/thumbnails/23.jpg)
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 ?