Zoomable User Interfaces

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 magniﬁcation. 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.

Zoomable User Interfaces – p. 10/20 Non-traditional zooms

“Warps” and ﬁsh-eye views

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

Representing things changing as they get closer to the camera.

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 ﬁnd the path which causes the least overhead for the user.

p q

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 Efﬁciency 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. Reﬁnement. Render at low resolution while moving and reﬁne 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 ﬁnd 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