A Zoomable User Interface for Presenting Hierarchical Diagrams on Large Screens C. Geiger1, H. Reckter2, R. Dumitrescu3, S. Kahl3, and J. Berssenbrügge3 1 Düsseldorf University of Applied Sciences, Düsseldorf, Germany [email protected] 2 Harz University of Applied Sciences, Wernigerode, Germany [email protected] 3 Heinz Nixdorf Institute / University Paderborn, Paderborn, Germany {Roman.Dumitrescu,Sascha.Kahl, Jan.Berssenbruegge}@hni.uni-paderborn.de Abstract. We present the design, implementation and initial evaluation of a zoomable interface dedicated to present a large hierarchical design model of a complex mechatronic system. The large hierarchical structure of the model is il- lustrated by means of a visual notation and consists of over 800 elements. An efficient presentation of this complex model is realized by means of a zoomable user interface that is rendered on a large Virtual Reality wall with a high resolu- tion (3860 x 2160). We assume that this visualization set-up combined with dedicated interaction techniques for selection and navigation reduces the cogni- tive workload of a passive audience and supports the understanding of complex hierarchical structures. To validate this assumption we have designed a small experiment that compares the traditional visualization techniques PowerPoint and paper sheets with this new presentation form. 1 Introduction Zoomable User Interfaces (ZUIs) organize information in space and scale, and use zooming and panning as main interaction techniques. A number of projects already presented the successful application of ZUIs in domains like web browsing, story telling or image viewing. User studies examined navigation patterns and the usability of interaction techniques of zoomable user interfaces. These are mainly based on zooming and panning techniques because these interactions seem to be very intuitive for exploring complex information spaces. Colin Ware observed in [12] that users in real life typically make use of zooming by moving their bodies and thus their views mostly forward and backward and seldom sideward. Panning is mostly achieved by head rotation sideways and up/down. Thus, ZUIs seem to support an intuitive and reality-based interaction style. While significant research on this topic exists and first commercial / open-source applications have been released, most ZUIs concentrate on information visualization tasks following Shneiderman‘s InfoVis mantra „Overview, Zoom, Filter, Details on Demand“. These tasks have been largely examined for users that actively explore the information space. On the other hand, there are fewer results how the design of ZUIs affects a passive audience. In this research project, we are mainly interested how a group of people can understand a complex information J.A. Jacko (Ed.): Human-Computer Interaction, Part II, HCII 2009, LNCS 5611, pp. 791–800, 2009. © Springer-Verlag Berlin Heidelberg 2009 792 C. Geiger et al. structure if it is presented by large hierarchical diagrams in a guided presentation. Our approach to visualize the huge information space is two-folded: a large screen set-up with a 4*HD resolution (3840x2160) and the use of zoomable interaction techniques for selection and navigation within the diagrams. In this paper we present the effect of dedicated zoomable interaction techniques on a large screen for the presentation of large hierarchical information spaces. We visualized a diagram comprising of very large number of elements used to model the design of an innovative railway system. This 2D-diagram was visualized on a Virtual Reality Power Wall and used during a presentation for a passive audience and a presenter who interacts with the diagram. 2 Zoomable Interfaces: Basics and Related Work In 2000, Raskin proposed that "The zooming interface paradigm can replace the browser, the desktop metaphor, and the traditional operating system..." [8] . Over the past thirty years the WIMP paradigm dominated the 2D graphical user interface world. Today, the advent of next generation user interfaces employing large multi- screen, multi-touch, multi-view or mobile 2D interfaces calls for new emerging interface paradigms. Among them, the Zoomable User Interface (ZUI) approach, sometimes called multi-scale user interfaces, is of particular interest when the user needs to visualize large information spaces. ZUIs use the metaphor of an infinite two- dimensional plane to represent the user's workspace and the ability to view this plane at an infinite high level of detail. In practice, the metaphor's infiniteness is often re- stricted by technical and conceptual constraints limiting the implemented zoom and pan interactions techniques to a suitable degree of resolution. The user is able to change the view of her workspace with these techniques. Advanced interaction is provided by semantic zooming, which introduces different kinds of representation based on the level of zooming. For example zooming into a hierarchical information structure (e.g. a system model of a complete car) presents details of each subsystem (e.g. the motor engine). The first ZUI system, Pad, is credited to Perlin and Fox, who published their work in 1993 [6]. The Pad system embodied a single shared work- space, where any part could be visible at any time. Pad used semantic zooming as a novel concept and featured a magic lens metaphor, a concept that allows multiple focus points with different representations within a single application. Objects are positioned and scaled on a plane and the user navigates using zooming and panning. ZUIs since then use these techniques and propose that this approach is close to the user's cognitive abilities. Furnas and Bederson worked on formal aspects of multi- scale interfaces and developed a visualization technique called space-scale diagrams [5]. These represent a spatial world and its different magnifications and allow the direct visualization and analysis of important scale-related issues of user interfaces. Scale is explicitly described using the vertical axis of the diagram, thus an object is represented at different scales. Perlin and Meyer combined ZUIs with nested UI wid- gets and developed recursively nested user interfaces [7]. The major goal of this approach was to present an easy-to-navigate user interface by a layered structure of controls. With zoomable nested GUIs, widgets can be hierarchically arranged at arbi- trary depth. Bederson developed the most prominent ZUI framework approach, the Jazz toolkit [3]. It builds on ideas of PAD and its successor PAD++, and adds scene A Zoomable User Interface for Presenting Hierarchical Diagrams on Large Screens 793 graph structure to simplify the design of non-trivial ZUIs. Jazz was written in Java and Swing and allowed embedding a ZUI component inside regular Java program code. This way, 2.5D-space applications could be created easily. A number of appli- cations were built using Jazz and its successor Piccolo [10]. The image browser Pho- toMesa provides the user with a zoomable view into a directory structure containing images [1]. Using the concept of treemaps, an automated screen space management was implemented. Bederson also developed CounterPoint, a presentation tool that enhances PowerPoint by new ZUI features like slide sorting and multiple paths. With CounterPoint it was possible to present one single presentation to different audiences or within different time constraints [9]. While many ZUI systems focus on domain specific applications, ORRIL is a framework that aids the design of ZUIs in general. Based on a set of requirements for ZUI design that is structured in four groups (dis- play, data, interaction, results), ORRIL implements a component-based approach using objects, regions, relations and interface logic as basic building block types of a each ZUI. The authors presented an example that used ORRIL to design a ZUI for a media player[11]. ZUIs for representing abstract graph structures like UML charts have presented by Frisch et al [15]. They address the problem of visualizing the global structure of complex UML diagrams and the detailed relationships of individ- ual UML elements and propose the usage of semantic zooming and other intuitive interactions techniques to ease the navigation between different diagrams. Beside a number of ZUI toolkits and dedicated ZUI applications some authors have studied the design and usability of zoomable interaction techniques in general. Hornbaek et al designed and evaluated navigation patterns and usability of ZUIs with and without overview [16]. Subjects preferred the overview interface and scored this significantly higher. On the other hand the work showed that ZUIs might eliminate the need for overviews in some cases. Recently, Jetter et al have introduced the ZOIL user inter- face paradigm [14]. This approach is aimed at unifying all types of local and remote information objects with their functionality and their mutual relations in a single workspace. ZOIL, the zoomable object-oriented information landscape paradigm is based on five design principles: (1) object-oriented user interface, (2) Semantic Zooming, (3) Nested Information Visualization, (4) information space as information landscape, and nomadic cross-platform user interfaces. The presented UI paradigm was applied to personal information management tasks. 3 Application: System Design in Mechanical Engineering Modern mechanical engineering products are affected by a high degree of information and communication technology. This is aptly expressed by the