Zoomable User Interfaces in Scalable Vector Graphics

Martin Rotard, Mike Eissele, Raoul van Putten, Thomas Ertl
Visualization and Interactive Systems Institute
Universitaet Stuttgart
Universitaetsstrasse 38
70569 Stuttgart
{rotard, eissele, ertl}@vis.uni-stuttgart.de, rvputten@gmail.com

Zoomable user interfaces are an evolutionary outgrowth of graphical user interfaces. In this paper we propose a zoomable user interface based on Scalable Vector Graphics. Three-level zooming is proposed as a new paradigm to combine different zooming functionalities in a common interface and support zooming within the window manager. This helps to unify zooming techniques of different applications. To meet the demand of efficient and easy navigation on a user interface, several novel interaction techniques are shown that further support the integration of three-level zooming within the underlying presentation system. For mobile small-screen devices, where the benefit of zooming user interfaces is even higher, the proposed system can be operated with simple pen tap or tap and drag operations. We also present a prototypical implementation, which demonstrates how applications based on the SPARK toolkit can transparently benefit form the proposed technology.

A zoomable user interface is a successor to the traditional windowing graphical user interface. This modern interface paradigm solves the problem of the limited screen real estate and enables the user to have windows, documents, and folders in any position on the desktop and in a special presentation size. Humans tend to remember landmarks and relative positions. This behavior can be adapted for zoomable user interfaces where information is accessed on the desktop by zooming and panning to a specific view. Stepping back to get an overview of the area of interest or over the desktop is given by zooming out. Particularly with regard to small displays like mobile devices have, zoomable user interfaces are an advantage for the user in handling several applications. Zoomable user interfaces are a key feature to deploy advanced applications and desktops on small mobile devices. In general, there is no restriction in the usage of this user interfaces paradigm and, therefore, also small-screen devices and even huge high-resolution powerwalls benefit. To be flexible in the area of application we focus in this paper on presentation and navigation metaphors that have minimal system requirements. Thus our proposed concepts can be used with limited screen space and can even be controlled with just a single-button pen interface.

There is no rule that defines which functionalities - except zooming and panning - a zoomable user interface needs to have. The combination of zoomable user interfaces with a concept of level of detail seems to be very promising. The result will be a desktop where document icons are a preview of the document that will increase in detail when the user zooms in and folders are opened by zooming on them. Another vision is the combination of zoomable user interfaces with focus+context techniques. This will enable users to zoom, e.g., on an image, embedded in a text document. In a defined zoom level the image will directly be editable within another document and the textual information of the context will still be visible. So users can zoom out and edit the entire document and zoom in to focus on editing a part of the document in a predefined application. This will help the users to handle the still increasing number of different applications that are used simultaneously.

The realization of the zoomable user interface paradigm needs to have a scalable graphics technology as basis. Without the mathematical description of widgets a zoomable user interface will result in an unattractive pixelized mosaic. Scalable Vector Graphics (SVG) can be used as an underlying technology, as it supports a mathematical description of shapes and positions. In the recent years, several groups have developed widget sets using SVG, which can be used to realize a zoomable user interface. For the prototypical implementation we chose the SPARK (SVG Programmers' Application Resource Kit) Toolkit and extended it to support zooming. Therewith, applications utilizing SPARK are naturally extended with a zoomable user interface. Several paradigms and interaction techniques are shown that support an efficient handling and navigation on zoomable user interfaces.