Zoomable User Interfaces Chris Gray [email protected] Zoomable User Interfaces – p. 1/20 Prologue What / why. Space-scale diagrams. Examples. Zoomable User Interfaces – p. 2/20 Introduction to ZUIs What are they? Why would we want to use them? Physics based rather than metaphor based. Reduce information required to process for navigation. Semantic aspects. More intuitive to search for an object in a large data set. Less cognitive overhead during navigation. Zoomable User Interfaces – p. 3/20 Semantic aspects We can substitute representations when we zoom in or out. Some types can't be represented in the interface. Like icons. Zoomable User Interfaces – p. 4/20 Physics Based Metaphor Uses physics concepts rather than abstract concepts. Folders and the desktop metaphor are “dead metaphors”. Zoomable interfaces scale better than the metaphor-type interfaces. Zoomable User Interfaces – p. 5/20 Space-Scale Diagrams Formalism to describe different zoomable interfaces. Easy method to calculate trajectories between points in a ZUI. Can be 2-d or 1-d. Zoomable User Interfaces – p. 6/20 Basic math We have (x; z) as the world coordinates and (u; v) as the view coordinates. x is the absolute position in the world, u is the position in the window. Both z and v represent the magnification. Formal relationship is u = xz and v = z (or v = log(z)). Zoomable User Interfaces – p. 7/20 Zoom The most obvious application. Trajectory simply in the v direction along a ray from (0; 0). Zoomable User Interfaces – p. 8/20 Joint pan and zoom For example, moving viewing x1 x2 window from California to (x2,z2) Chicago. s Chicago moving (x ,z ) away from window 1 1 exponentially fast as zoom occurs. Zoomable User Interfaces – p. 9/20 Zoom around a window q p Pan and zoom out from the old point and then back in to the new point. u Zoomable User Interfaces – p. 10/20 Non-traditional zooms “Warps” and fish-eye views v v 5 4 3 4 5 6 7 6 3 7 2 8 2 8 1 9 1 (a) 9 u u Zoomable User Interfaces – p. 11/20 Semantic zooming v Representing things changing as they get closer to the camera. u Zoomable User Interfaces – p. 12/20 Measuring cognitive overhead Want a “movie which compresses well”. Scaling is a logarithmic activity, whereas panning must be linear. Combining a zoom and a pan can be simpler for the user to understand than just panning. Zoomable User Interfaces – p. 13/20 cont'd Space-scale diagrams can be used to find the path which causes the least overhead for the user. v p q u Zoomable User Interfaces – p. 14/20 Pad++ Example zoomable interface. Library, not actual application. Mouse buttons control zoom. Used to implement Web browser File browser Superseded by Jazz. Zoomable User Interfaces – p. 15/20 Efficiency Considerations Only load the part of the database that can be seen. Use different levels of detail. If a detail can't be seen, there is no point in attempting to display it. Clipping. Refinement. Render at low resolution while moving and refine the image when still. Zoomable User Interfaces – p. 16/20 Speed-dependent automatic zooming Uses semantic zooming when possible. Attempts to maintain a constant information density. Can zoom more smoothly than traditional ZUI. v v p q p q xy xy Zoomable User Interfaces – p. 17/20 Tested applications Web browser. Preferred over traditional. Can reduce some areas of documents more than others. Image viewer Can only reduce the size of the images. Zoomable User Interfaces – p. 18/20 Things not Mentioned (but which should be) Clustering. Similar objects should be grouped together so that zooming in shows the similarities. Treemaps. PDAs Zoomable User Interfaces – p. 19/20 Conclusions Zooming as a user interface tool is a useful idea if nothing else. Automatic zooming can be better than manual in some situations. Space-scale diagrams can be a good way to design zoomable interfaces. You will find true love on Flag Day. Zoomable User Interfaces – p. 20/20 References [1] Bederson, B., Hollan, J., “Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics”, Proc UIST, 1994. [2] Furnas, G., Bederson, B., “Space-Scale Diagrams: Un- derstanding Multiscale Interfaces”, Proc SIGCHI, 1995. [3] Igarashi, T., Hinckley, K., “Speed-Dependent Automatic Zooming for Browsing Large Documents”, Proc. UIST 2000. 20-1.