CHI 97 Electronic Publications: Late-Breaking/Short Talks
CHI 97 CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

Window navigation with and without animation: a comparison of scroll bars, zoom, and fisheye view

Misha Donskoy, Victor Kaptelinin
Donskoy Interactive Software Company
81, Vavilov Str., 97
Moscow 117335 Russia
email: donskoy@kaissa.msk.su

Victor Kaptelinin
Department of Informatics
Umeå University
S-901 87 Umeå, Sweden
email: vklinin@informatik.umu.se

ABSTRACT

Each of three window navigation techniques -- scroll bars, zoom, and fisheye view -- were implemented in two versions: with animation (a gradual transition from one state to another was provided) and without animation. A highly significant effect of navigation technique, but not of animation, was found in the experiment reported in the paper.

Keywords

animation, window navigation, scroll bars, zoom, fisheye view.

© 1997 Copyright on this material is held by the authors.



INTRODUCTION

Animation is currently considered an important and still to a large degree unexplored resource in Human-Computer Interaction [1,3]. While it is often claimed that animation can help to make user interfaces more usable, more empirical data is needed to substantiate these claims.

One of the main benefits of animation is believed to be its support of "object continuity" in dynamic visual environments. If an event is presented to the user with static images, for instance as snapshots displaying the initial and the final state of a system, an interpretation of the images might require a considerable effort. To update his/her understanding of a dynamic situation, the user needs to relate every image he/she sees to previous images. If objects change their appearance or disappear, interpretation of a changing visual scene can be far from trivial. In such cases animation seems to be of significant help. Instead of inferring possible transformations from differences in the initial state/ final state snapshots, the user can literally see these transformations actually take place.

The above conclusion undoubtedly applies to the case of window navigation, where the user is presented with a dynamic view of an object or a system of objects, and has to integrate partial images into a coherent representation. Introducing animation into window navigation can make navigation more efficient. This hypothesis was tested in an empirical study in which we compared "animation" and "no animation" versions of three window navigation techniques: scroll bars, zoom, and fisheye view. We expected animation to be most beneficial in the case of fisheye view, because visual transformations associated with fisheye navigation are especially complex and can potentially be confusing for the user [4]. The effect of animation was expected to be least pronounced in zoom navigation, because in this case the user can rely on an explicit overview of the whole system which can be accessed at any moment by simply zooming out.

METHOD

Subjects

Twelve subjects from 19 to 24 years old, undergraduate students at a Swedish university, participated in the study. All subjects had a prior experience of using Windows 3.1.

Materials.

An interactive program for the Windows environment written in C++ was used in the study. In every task subjects were presented with four windows, one of which (window 1) was empty and the other three (windows 2 - 4) were filled randomly with 144 objects looking like standard Windows files (48 "files" in each window). These 144 objects contained twelve "text type files", which the subjects had to drag to window 1. The names of these objects had extensions .txt, .doc, and .wrt and were consistently associated with three types of icons. When all the twelve "text files" were collected in window 1, next task was presented. Windows 2-4 normally displayed only about 25 percent of their entire content and had to be navigated in order to find all the target files.

Three types of window navigation techniques were employed in the experiment. The first technique was the standard Windows scroll bar navigation. The second one was zooming . Pressing the right mouse button switched the window between the normal mode and the "zooming out" mode, which displayed a picture of the whole content of the window scaled down to fit its screen size. When the content of a window was represented in this way, file names were not readable, but icons were partly recognizable. Subjects could either operate on these small icons or click on any part of the "map" to see the corresponding part of the whole picture in detail. Finally, the third technique was a fisheye view. The icons in the window were of different size: those near the focus were larger, while those farther from the focus were smaller. All icons could always be seen on the screen. The focus can be moved to another place by pointing out this place and pressing the right mouse button.

There were two versions of each of the above techniques. In "no animation" techniques every navigational action (clicking on a scroll bar arrow, zooming out, changing the fisheye focus, etc.) immediately resulted in displaying a new image of the window content. When the "animation" techniques were used, the transition from the old image to the new one was more gradual. It was achieved by displaying not only the initial and the final phases of the transition, but an intermediate phase, as well.

Design

A 2 (Animation) X 3 (Navigation technique) two-factor within-subjects design was used. In every of the six experimental conditions the subjects worked through a block of six tasks, which consisted of a learning phase (two tasks) and the main phase (four tasks). A sequence of six blocks was selected for each subject individually according to a Latin Square plan. Data on the nature and on the time of every user's action were collected in a log file. At the end of the session subjects evaluated the six kinds of techniques according to their general preferences by assigning numbers from "-3" (most negative rating) to "+3" (most positive rating).

RESULTS

Table 1 shows mean times taken by individual tasks (the Task Completion Time variable) and mean subjective evaluation results (the Subjective Preference variable).

Table 1. Mean task completion times, in seconds, and subjective evaluation results (in parentheses) for experimental conditions.

Animation



yes
no

Scroll Bars

101.2

(.58)

92,8

(-.25)

Zoom
83.0

(2.29)

63.4

(2.21)

Fisheye
146.5

(-.71)

153.7

(-.79)

ANOVA run on the Task Completion Time variable produced significant main effect of the Navigation Technique factor (p< .0001). The highest performance was associated with Zoom, while Fisheye showed the lowest task completion times. Both the main effect of the Animation factor and the interaction effect were not significant (p= .3745 and p= .3679, respectively). ANOVA run on the Subjective Preference variable produced a similar pattern of results, that is, significant effect of the Navigation Technique factor (p< .0001), but not of Animation (p= .2078) and interaction (p= .4075).

While the two analyses yielded similar results, the trends in the differences between "animation" and "no animation" techniques, even though not statistically significant, were different. Zoom and Scroll Bars, in contrast to Fisheye, demonstrated slower performance when animation was added. However, subjects preferred the "animation" versions of these techniques to the "no animation" ones. In other words, in these cases slower techniques received higher subjective ratings.

DISCUSSION

The differences in performance associated with scroll bars, zoom, and fisheye navigation, found in the experiment, are in agreement with results described in the literature [2,4]. The absence of a statistically significant effect of animation neither validate nor disprove the initial hypothesis. Also, the data obtained in the study suggest that users may prefer animation even if it is not associated with any gains in efficiency.

The data obtained in the study can be explained in several ways. First, one can assume that animation could be helpful but it was not properly implemented in the interactive prototype used in the study. Probably, one extra transitional phase just did not make the transition smooth enough. An alternative explanation could be that no extra transitional phases were required to provide animation. Given an appropriate combination of factors like brightness, size, time interval, and distance, changes in a picture can be perceived as a smooth movement (the so called apparent movement ) without any need to display intermediate states of moving objects. In the case of zoom, which was the fastest technique, the display of an extra state could actually slow down the performance, hence the negative effect of animation.

The possible explanations of the findings, described above, suggest concrete experiment designs for further studies, in which these alternative hypotheses can be tested empirically.

REFERENCES

1. Baecker, R., Small, I. (1990). Animation at the interface. In: B. Laurel (Ed.) The Art of Human-Computer Interface Design . Addison-Wesley.

2. Beard, D., Walker, J.Q. (1990) Navigational techniques to improve the display of large two-dimensional spaces. Beh. Inf. Techn. , 9 (6).

3. Gonzales, C. (1996). Does animation in user interfaces improve decision making? Proceedings of the CHI 96 Conference on Human Factors in Computing Systems, (Vancouver, BC Canada, April 13-18, 1996)

4. Kaptelinin, V. (1995). A comparison of four window navigation techniques in a 2D browsing task. The CHI'95 Conference on Human Factors in Computing Systems, Conference Companion (Denver, Colorado, May 7-11, 1995)


CHI 97 CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

CHI 97 Electronic Publications: Late-Breaking/Short Talks