• Abstract and Figures
• Public Full-text

Melange:´ Space Folding for Multi-Focus Interaction Niklas Elmqvist1 Nathalie Henry1,2,3 Yann Riche1,2,4 Jean-Daniel Fekete1 {elm, nhenry, yann, fekete}@lri.fr 1INRIA 2LRI, Univ. Paris-Sud 3University of Sydney 4University of Queensland Saclay, France Orsay, France Sydney, Australia Brisbane, Australia (a) (b) Figure 1. Examples of the Melange´ technique: (a) Browsing flight routes on a world map. (b) Displaying a large matrix visualization of a network. ABSTRACT INTRODUCTION Interaction and navigation in large geometric spaces typi- Current visualization applications often involve navigation cally require a sequence of pan and zoom actions. This strat- in large visual spaces — many times the size of the screen egy is often ineffective and cumbersome, especially when — using a sequence of zoom and pan operations. The tasks trying to study several distant objects. We propose a new that are performed on these spaces typically require multi- distortion technique that folds the intervening space to guar- ple objects to be displayed at sufficient scale for precise ma- antee visibility of multiple focus regions. The folds them- nipulation, yet these objects may be separated by long dis- selves show contextual information and support unfolding tances. Zooming and panning is tedious, potentially disori- and paging interactions. Compared to previous work, our enting, and often ineffective [6, 7]. In order to retain view of method provides more context and distance awareness. We multiple objects, the standard practice is to split the screen conducted a study comparing the space-folding technique to into several subwindows, but this means that the context be- existing approaches, and found that participants performed tween the objects is lost. significantly better with the new technique. Consider a researcher planning a conference trip from east- ern Canada to Florence, Italy. Beyond constraints such as ACM Classification Keywords cutting costs and minimizing the number of stops and the H.5.2 Information Interfaces and Presentation: User Interfaces— flight time, the researcher may be interested in combining Interaction styles; I.3.6 Computer Graphics: Methodology such a long trip with visits to other labs and professional and Techniques— Interaction techniques acquaintances in Europe. Thus, our traveler wants to study maps of both the source and destination areas at sufficiently Author Keywords high detail to make informed decisions about departure and interaction, visualization, navigation, exploration, folding, arrival airports as well as appropriate ground transportation split-screen, space distortion, focus+context and lodging, yet is also interested in seeing the context be- tween these areas to get an idea of opportunities for potential detours and research visits. Panning and zooming the map to solve this task is burdensome and ineffective. Similarly, splitting the screen to show several regions of the map si- multaneously causes loss of context of the intervening space. Figure 1(a) illustrates how the Melange´ technique presented in this paper solves this problem. Submitted to CHI 2008. Please do not distribute. 1 The situation is very similar when exploring social networks. • Space distortion: deforming geometric space; and These can be represented as matrices to avoid node overlap • Semantic distortion: deforming semantic space. or edge crossings, which is particularly useful for dense and large networks [9]. Here, nodes are placed on the row and Table 1 gives a summary of these strategies and how they column axes, and a filled cell in the matrix indicates an edge fulfill our design goals. between nodes. Often, several different parts of the same matrix are interesting for a particular task, such as collab- Solution strategy G1 G2 G3 G4 Techniques orating actors, as well as the intermediate context between General navigation – – – – [1, 13] them (the communities they belong to). However, no effi- Split-screen Y Y – – [26] cient interaction technique exists for exploring these matri- Fisheye views Y P Y – [6, 26] ces, leaving the user no option but to pan and zoom to navi- Rubber sheet P P Y – [25, 17, 27] gate. Figure 1(b) shows our approach. Semantic distortion Y Y Y – [4, 21] These are two examples of multi-point interaction tasks [26] that require several concurrently visible focus points. In our Table 1. Design goals fulfilled by existing strategies (P = partially). generalized multi-focus interaction model, we also stipulate that each focus must be independently zoomed so that the user can adapt the magnification to the task. Furthermore, General Navigation as much display space as possible should be dedicated to Zooming and panning are the standard actions for interacting each focus to show its surrounding context. Finally, our with large visual spaces that exceed the size of the viewport. intended user tasks often require an awareness of the con- Furnas and Bederson present the space-scale diagram [8] as tent and quantity of space that lies between the foci. For a comprehensive model for describing these actions as paths the world map example, context and distance helps the user through scale-space. In general, using both zoom and pan quickly estimate flight time and stopovers on the way. For in combination is both more efficient and more informative the social network, they give an indication of the global com- than using just panning [3, 8, 28]. However, zooming and munities and collaboration patterns. panning do not directly support any of our design goals. Based on these requirements, we formulate a number of de- A number of approaches have been developed to better sup- sign goals for our approach to exploring large visual spaces: port navigation in zoomable spaces. Speed-dependent auto- matic zooming [13] (SDAZ) seamlessly zooms out to main- G1 guaranteed focus visibility: multiple foci at the desired tain a fixed visual flow depending on the speed of scrolling zoom level should be visible simultaneously, regardless governed by the user’s cursor. Bourgeois and Guiard [3] of their location on the space; show that bimanual multi-scale navigation outperforms stan- G2 surrounding context visibility: as much as possible of the dard navigation. OrthoZoom [1] allows for controlling both area surrounding each focus region should be visible; zoom and pan using the orthogonal axes of the mouse in a 1D scrolling task, and was recently shown to be the fastest G3 intervening context awareness: the space between focus one-dimensional scrolling technique. regions should be shown to give a frame of reference; and For larger visual spaces, standard navigational aid include an G4 distance awareness: some notion of the distance between overview window showing the position and general context the focus regions should be available. of the viewport on the canvas [20]. A recent trend integrates No existing interaction technique is known to fulfill all of the the overview in the detail view to provide off-screen target above design goals. Therefore, we present the Melange´ tech- awareness; examples include Halo [2], where circles ema- nique that automatically folds intervening space between fo- nating from off-screen targets indicate their approximate dis- cus regions to guarantee their visibility. tance and location, City Lights [29] that show the “shadows” of off-screen targets on window borders, and the EdgeR- The rest of this paper is structured as follows: We begin with adar [10] that provides a rectangular context region on win- a review of the existing work on space deformation and sim- dow edges. Hopping [14] extends the idea by also allow- ilar techniques for exploring visual spaces. We then present ing for direct teleportation to any of the off-screen targets the Melange´ interaction technique. We describe our con- indicated on the viewport edge. However, again, these tech- trolled experiment and present the results and a discussion niques do not provide multiple foci, and provide poor con- of our findings. text awareness. RELATED WORK Split-Screen There are a number of existing techniques (or combinations of techniques) that partially fulfill the design goals outlined Splitting the screen into several windows showing different above. This section reviews the main approaches: parts of the visual space is a standard method employed by commercial applications such as Microsoft Excel and Adobe • General navigation: interaction techniques for navigating PhotoShop. However, there exists no evaluation on the per- in large visual spaces; formance of navigation in such split-screen setups. • Split-screen: dividing the viewport into smaller subwin- Shoemaker and Gutwin [26] present an interaction technique dows, each showing a small region of the space; called split-scrolling that automatically divides the screen 2 into two viewports when two interaction points move apart, MELANGE:´ FOLDING 2D SPACE INTO 3D but they do not empirically evaluate this technique. Melange´ is a space deformation technique that folds 2D space into 3D in order to bring several focus regions of inter- For time-series data, it is useful to be able to summarize or est into view at the same time. Figure 1 shows a large world condense periods of times into aggregated representations. map being folded using Melange´ to bring both northern Italy An example is LifeLines [22], where the time navigation and eastern Canada into view at high magnification, as well scrollbar can be split into several regions with multiple foci. as a matrix visualization of a social network being folded to By definition, split-screen setups support the guaranteed vis- simultaneously view different parts of the network. ibility (G1) and surrounding context (G2) goals, but inter- vening context (G3) and distance (G4) is lost. Adding an Multiple Foci: Guaranteed Focus and Context Visibility overview helps to show the context, but overviews are typi- Given a set of focus points and the location and extents of the cally small and placed in the periphery of the viewport, split- current viewport on the canvas, the objective of the Melange´ ting the user’s attention and consuming screen real estate.

Load more

  10

Copy Link