OrthoZoom Scroller: 1D Multi-Scale Navigation Caroline Appert* Jean-Daniel Fekete* LRI/INRIA Futurs INRIA Futurs/LRI Bât. 490, Univ. Paris-Sud, 91405 Orsay, France Bât. 490, Univ. Paris-Sud, 91405 Orsay, France [email protected] [email protected] ABSTRACT Information visualization applications commonly use This article introduces the OrthoZoom Scroller, a novel sliders to select values within large ranges but require a text interaction technique that improves target acquisition in field entry to specify a precise value. Entering text to select very large one-dimensional spaces. The OrthoZoom a value over a continuous range breaks Shneiderman’s Scroller requires only a mouse to perform panning and principles of direct manipulation [23] and consumes screen zooming in a 1D space. Panning is performed along the real-estate. To deal with large spaces, multi-scale interfaces slider dimension while zooming is performed along the [11, 22] introduce the scale dimension, sometimes called Z orthogonal one. We present a controlled experiment (we use the words scale and zoom interchangeably in this showing that the OrthoZoom Scroller is about twice as fast article). This article introduces OrthoZoom Scroller, a as Speed Dependant Automatic Zooming to perform mouse-based multi-scale 1D scrolling and pointing pointing tasks whose index of difficulty is in the 10-30 bits technique that performs better than the only other known range. We also present an application to browse large multi-scale technique that uses standard input devices. textual documents with the OrthoZoom Scroller that uses OrthoZoom Scroller allows users to achieve very difficult semantic zooming and snapping on the structure. 1D pointing tasks (~30 bits) by controlling panning with one mouse dimension and zooming with the other. Using Author Keywords this technique, a user could select one base pair out of the 3 Interaction technique, multi-scale navigation, pointing task, billions (~32 bits) of the human genome in one continuous scrolling task. multi-scale pointing gesture. ACM Classification Keywords We first review related work and then present the H.5.2. [User Interfaces]: Interaction styles; I.3.6 OrthoZoom Scroller. We evaluate it by comparing it with [Methodology and Techniques]: Interaction techniques. the Speed Dependant Automatic Zooming technique [14] which aims at similar goals and has been well studied INTRODUCTION before. Finally, we present an application to browse large One-dimensional (1D) navigation and selection tasks such textual documents with the OrthoZoom Scroller. as using a slider or a scrollbar involve selecting a value within a bounded range through pointing. Screen-size and RELATED WORK resolution limitations pose problems when the range We classify interaction techniques for selecting a precise becomes too large to map one value per pixel. For value within a range into two categories: discrete example, in a 1000 pixel-wide slider representing a range techniques and continuous techniques. from 1 to 10,000, each pixel represents ten values. It is therefore impossible to scroll continuously over a large Discrete techniques document in which the number of pages far exceeds the Discrete techniques use non-continuous mechanisms such number of pixels in the scrollbar. as filtering to remove values from the range or multiple interactions to control the zoom. * Projet in|situ| (http://insitu.lri.fr), Pôle Commun de Recherche en Informatique du plateau de Saclay CNRS, Ecole Polytechnique, BinScroll [16] is a technique that requires four buttons to INRIA, Université Paris-Sud perform a dichotomic search in a list of textual data. Two buttons allow the user to progressively reduce the list by Permission to make digital or hard copies of all or part of this work for selecting the top half or bottom half of the list relative to a personal or classroom use is granted without fee provided that copies are current item. The two other buttons are used to select an not made or distributed for profit or commercial advantage and that copies item or cancel an operation. bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior LensBar [17] is a listbox augmented by a slider and a text specific permission and/or a fee. entry field to perform selections within a large list of data. CHI 2006, April 22–27, 2006, Montréal, Québec, Canada. Copyright 2006 ACM 1-59593-178-3/06/0004...$5.00. The list can be reduced by entering a pattern into the textual entry to select the matching data or by performing zooming around the current item. Clicking the current item and moving to the left zooms out, displaying a coarser sampling Using a standard input device of items. LensBar controls the visibility of items using a Two recent techniques use circular motion to control the degree of interest function (DOI) computed around the zoom factor. Both use clockwise motion to scroll the view current item. Thus, LensBar requires both a keyboard and down and counterclockwise motion to scroll it up. data pre-processing to assign a DOI to each item. The scale The Radial Scroll Tool [24] uses the circle radius to adjust factor and pan are controlled using the mouse but cannot be the scrolling rate: smaller circles mean faster scrolling, specified in one continuous interaction. while larger circles mean slower scrolling. The Virtual The Alphaslider [1] is an augmented slider consisting of Scroll Ring [19] interprets circular movements differently: two or three sub-sliders, each one representing a different it uses the distance traveled along the circumference of the granularity of movement within the depicted range of the circle instead of the radius. Larger or faster movements whole slider. Although each sub-slider is manipulated in a produce faster scrolling while smaller or slower movements continuous way, switching between two sub-sliders produce slower scrolling. On some input devices, such as “breaks” the interaction. Furthermore, the granularity is the mouse, circular movements can be difficult to do. limited to three levels. The FineSlider [18] extends the Furthermore, controlling a linear parameter using a circular Alphaslider’s idea by allowing users to adjust the dimension can be disturbing for novice users. granularity of the slider’s control: clicking on the slider at a The other techniques use two linear dimensions to control spot other than the knob moves the knob toward the cursor zoom and pan. location at a speed proportional to a distance between the knob and the clicked point. The PVSlider [2] uses a grid to The Position+Velocity Slider is a stylus-based technique provide feedback on the transition from one granularity proposed in LEAN [21], a prototype to manage video level to another, the transition being fired when clicking a streams. To browse videos, the user begins a drag button. The FineSlider and PVSlider have a wider range of anywhere in the video window, moves horizontally to precision than the AlphaSlider but, once again, switching browse and vertically to adjust the browsing velocity (the between granularity levels is not continuous. user always starts at the minimum velocity). The authors have qualitatively evaluated the whole interface making it The Control Menu [20] uses a circular menu to trigger the difficult to measure the specific benefits of the control of a 1D or 2D continuous parameters. The article Position+Velocity Slider. shows how to navigate a zoomable interface using a continuous zoom triggered by a horizontal item and a pan at The InfoVis Toolkit [6] provides multi-resolution sliders: the current zooming level triggered by a vertical item. the precision is increased with the orthogonal distance to the slider track. However, no evaluation has been Continuous techniques conducted on the effectiveness of the technique and no Guiard et al. [9] demonstrate that high precision selection feedback is provided so users are usually not aware of the tasks can be thought of as multi-scale navigation tasks. feature. Continuous techniques make use of two categories of Speed-Dependent Automatic Zooming (SDAZ) [14] is dimensions, the scale/zoom dimension and the pan/scroll designed to facilitate navigation tasks over large spaces. dimension, to select a precise value with a continuous Navigation is controlled by a dragging interaction that can interaction. be activated anywhere. The scrolling speed is proportional to the distance between the clicking point and the current Using a non-standard input device Some techniques use non-standard input devices to perform point. This technique also keeps the visual flow of the navigation in a multi-scale world. navigation constant by adjusting the zoom factor dynamically: the zoom factor is linked to the scrolling Zhai et al. [26] show the benefits of controlling zoom and speed. This behavior allows users to continuously adjust pan with bi-manual techniques. For example, in [9, 11, 12], their granularity. It requires fine tuning to adapt the visual users control panning by moving a stylus on a tablet with flow to the user’s abilities. Cockburn et al. [5] have shown their preferred hand while they control zooming with a that SDAZ was the most efficient technique to reach a joystick with their non-preferred hand. These techniques target in a scrolling interface for large text documents, are challenging to transfer to handheld devices. compared with traditional scrolling techniques. Zoom Sliding, or Zliding [22], does not necessary require All the techniques controlling a 2D space require either a both hands by using a pressure-sensitive tablet. It fluidly non-standard input device or linking two dimensions such integrates zooming via pressure control with panning via x- as the scrolling speed and the zoom factor, as in SDAZ. y cursor movement. The limited range and precision of pressure levels requires additional techniques such as clutching or using the keyboard to achieve a precise control of scaling.