Benefits of Animated Scrolling Christian Klein, Benjamin B. Bederson Human-Computer Interaction Lab (HCIL) Computer Science Department University of Maryland, College Park, MD 20742 email@example.com +1-301-405-2764
We examined the benefits of animated scrolling using four speeds and three different document types in terms of task speed, accuracy and user preference. We considered reading tasks involving unformatted and formatted text documents, as well as counting tasks involving abstract symbol documents. We found that, compared with non-animated scrolling, animated scrolling significantly improves average task time, by up to 3.1% using 300 millisecond animations for reading documents and by up to 24% at 500 milliseconds for symbol documents. Animated scrolling also significantly decreases error rates for reading tasks by up to 54%, as well as improving subjective satisfaction.
Many current productivity applications, such as word processors and Internet browsers, do not employ animations during scrolling interactions. While these interactions may seem insignificant, they pervade nearly all common computer tasks. Many users perform hundreds of scrolling interactions per day, allowing even minor improvements to accumulate into considerable benefits to the user. One task analysis of web browsing found that users spent approximately 40 minutes out of a 5 hour session scrolling .
Non-animated scrolling jumps between two views of the document, creating an instantaneous transition. There is no standard displacement either in terms of lines of text or screen pixels, and different applications implement different scroll amounts. Frequently used displacements include between two and five lines of text, a fixed number of pixels regardless of font size, one document page, and one screen. Consequently, users of applications that do not animate scrolling cannot accurately predict the position of screen elements after each scrolling transition. Animated scrolling replaces this abrupt transition with a smooth sequence of steps, allowing users to visually track screen elements as they move. As with all animations, there is a tradeoff between their potential benefits and the additional time of the animations themselves. However, for animations with a short duration (on the order of 500 milliseconds or less), the time spent animating is small compared to the total task time. Thus, if there is a benefit, it is likely to be worth the cost of the animations.
Animating the scrolling transitions allows users to visually follow screen locations. Related work has examined a variety of other mechanisms to provide such continuity in scrolling documents, including enhanced scrollbars. One novel approach has involved adding auditory cues to scrollbars as a means of revealing information hidden in the document . Users preferred scrollbars with auditory feedback, and task time showed a significant improvement. Kaptelinin’s work on transient visual cues confirmed that scrolling can be a significant distraction to reading, and presented several potential graphical remedies in the form of temporary visual changes . These transient visual cues change the appearance of “old” text (which was visible prior to scrolling) that remains visible after scrolling. Transient visual cues are one approach of adding visual landmarks to existing documents, and the technique can be combined with animated scrolling. Also, Bederson & Boltman have examined animated viewpoint changes more generally , and concluded that animations helped users build mental maps of a data space and reconstruct that data space later. However, they failed to find a significant effect on navigation and did not investigate the impact of different animation speeds.
We specifically examined vertical scrolling using the arrow keys to gain an understanding of the degree to which animated scrolling affects efficiency and satisfaction. The experiment used three document types that are representative of many kinds of information commonly viewed on a computer screen, such as text documents, web pages and spreadsheets.
In many cases, we believe that the abrupt transitions created by non-animated scrolling place a burden on the user to find their place in the document. Without a way for users to easily perceive the relationship between the two views before and after scrolling, they are likely to spend time consciously searching for the next line. We believe that the impact of this problem depends on the document type as well as the method and amount of scrolling. In general, documents with visual landmarks are more likely to allow users to track their position easily, regardless of animated scrolling. We believe that the most problematic documents are those in which different, repetitive portions are visually identical at first glance. A clear example of such a document is a spreadsheet composed of long columns of numbers that are very similar in appearance. An instantaneous transition of a few rows in such a document can easily disorient the user.
Our primary hypothesis was that animated scrolling would improve both subjective user satisfaction and objective efficiency as measured by task time and error, and reduce the user’s cognitive load. To indirectly measure cognitive load, we chose to measure the relative subjective duration (RSD) , a percentage difference between the actual and perceived trial times. RSD provides a way to understand a user’s difficulty with a certain task without directly asking the user about the difficulty. In our experiment, a positive RSD value meant that users underestimated the trial time, whereas a negative value corresponded to an overestimation. We hypothesized that animated scrolling would increase RSD, implying a decrease in difficulty. Our secondary hypothesis was that the document type would influence task time and error. More specifically, less repetitive documents containing visual landmarks facilitate faster and more accurate reading.
To test our hypothesis that animated scrolling improves efficiency, we ran a within-subject repeated measures experiment with 20 participants. The experiment involved twelve trials per subject and two basic modes of interaction: reading text out loud and (silently) counting the number of times a symbol appears onscreen. The independent variables were animation speed (4 levels – 0, 100, 300, 500 milliseconds) and document type (3 levels – unformatted text, formatted text, and abstract symbol sequence). The dependent variables for reading trials were trial time, RSD and reading error. The dependent variables for counting trials were trial time, RSD and counting error.
20 people (9 female) participated in this study, with an average age of 23 years. 90% of the participants were students , 78% of whom attend the University of Maryland. All subjects claimed to have at least average experience with basic computer tasks (average 4.0 on a scale of 1 – least to 5 – most) and were fluent speakers and readers of English.
An application developed in Visual Basic .NET was used for this experiment. All trials were conducted on a single PC equipped with a 19 inch LCD monitor with a 1280x1024 resolution and a standard keyboard. There was no mouse or other pointing device connected to the computer. Test Documents
We chose to test three types of documents which we felt together represent most documents commonly viewed on a computer. The three types differ in the degree of repetition and prevalence of visual landmarks. The first two types correspond to reading tasks, likely the most widely performed task involving vertical scrolling. The third type relates to a counting task and is representative more generally of manual searching or tallying tasks common to spreadsheets and other applications dealing with lists of numeric or symbolic data.
The eight reading documents were based on selections of text from articles of the Smithsonian Visual Timeline of Inventions. Each selection was modified slightly to conform to a length of exactly 300 words. These documents were of equal reading difficulty and broad topic. However, the content of individual documents was unrelated. The unformatted text documents are representative of tasks such as reading plain text email messages , electronic books or documents in simple word processors (Figure 1). The four formatted documents each included one title, three subheadings , three paragraphs of text and three images embedded into the text at approximately equal intervals. All images were selected from those accompanying the original articles. These documents are similar in format to many web pages, HTML email and other formatted sources (Figure 2). All eight reading documents required exactly 12 scrolling interactions to be read completely.
The four symbol documents were computer-generated from a set of 12 abstract, meaningless symbols invented for this study. Such abstract symbols provide users with the greatest challenge in finding their place following a scrolling transition. All symbols were black and white, of equal size and similar visual complexity. Symbol documents each included 560 symbols displayed in a grid formation of 40 rows of 14 symbols per row. The number of times each symbol appeared in a given document ranged from 30 to 60 with an average of 45. These documents represent the worst case scenario, with maximal repetition, no readily identifiable meaning and no visual landmarks (Figure 3).
Figure 1: Sample unformatted text document from experiment
Figure 3: Sample symbol document fro m experiment
Figure 2: Sample formatted text document from experiment
All scrolling interactions in this experiment used the up and down arrow keys. All other modes of scrolling, such as the page up and page down keys and the scrollbar, were disabled. Scrolling using only the arrow keys is very well defined, resulting in consistent screen transitions involving a small, fixed displacement. An experiment using the page up and page down keys would have required very long documents to produce an appreciable number of scrolling interactions. By comparison, scrolling using the scroll wheel of a mouse or by dragging the scroll box of a scroll bar produces inconsistent displacements. Although we restricted the study to the arrow keys, we have no reason to believe that animated scrolling would be detrimental to any other form of scrolling interaction. Moreover, we believe that any beneficial effects of animated scrolling observed from the arrow keys will likely generalize to the mouse wheel and other interactions that use a similar scroll amount.
The experiment began with three brief training sessions that familiarized users with reading text of the chosen typeface, counting a symbol in a symbol document, and scrolling using the arrow keys. Each subject performed 12 trials including every permutation of four animation speeds and three document types. The animation speeds were 0, 100, 300, and 500 milliseconds where 0 represents the condition of no animation. The application randomized the order of the 12 trials as well as the association of animation speeds to specific documents. The application presented written instructions for each trial and recorded trial durations automatically. For counting tasks, the application also randomly selected a symbol to count. Immediately following the trial, it recorded the number counted and entered by the user.
Instructions for reading tasks were: “Please read the text on the following screen out loud. Press the spacebar to start the trial and begin reading immediately. Press the spacebar again once you have finished reading to end the trial.” Instructions for an example counting task were: “In the following document, please count the number of times the symbol
appears. You will be asked to input your answer following the trial. Press the spacebar to start the trial and begin counting immediately. Press the spacebar once you have finished counting to end the trial.” The chosen symbol remained clearly visible for reference throughout the trial.
The experimenter recorded instances of five reading errors for all reading trials . The experimenter judged reading errors based on printouts of the texts, without seeing the computer screen and hence without knowing the current animation speed. A weighted sum of these errors was used to compute a measurement of composite reading error. Weights were chosen based on the impact each error has on reading continuity. The five errors and their associated weights were: prolonged verbal pauses (2), skipped and repeated words (1), skipped words that were not repeated (2), wrong word errors (1), and entire skipped lines of text (5). All skipped lines of text were repeated.
In addition to trial time and reading or counting error, each subject was asked to estimate the length of each completed trial. This value was used to compute the relative subjective duration (RSD) ratio between the actual and perceived trial times. Following the experiment, subjects answered a brief questionnaire regarding subjective satisfaction of animated scrolling.
The reading and symbol counting documents were not analyzed together due to the different modes of interaction. A 2 (document type) x 4 (animation speed) RM-ANOVA was performed for the task time , RSD and composite reading error for trials involving the unformatted and formatted text documents. A second RM-ANOVA was performed to separately analyze the task time , RSD and counting error for symbol trials. Pairwise comparisons were conducted using a Bonferroni adjustment for multiple comparisons. All results are summarized in Table 1 and Figure 4.
|Animation Speed (ms)||Reading Time (sec)||Reading Error||Reading RSD||Counting Time (sec)||Counting Error||Counting RSD|
Table 1: Summa ry results: mean trial times, RSD and error rates. Significant measures are shaded.
Figure 4a: Mean trial times for reading trials Figure 4b: Mean trial times for counting trials
Animation speed had a significant main effect on trial time, F(3, 17) = 3.743, p = .031. This effect contains both a significant linear component, F(1, 19) = 5.765, p = .027, as well as a significant quadratic component, F(1, 19) = 6.350, p = .021. Specifically, mean trial times for 0 and 300 millisecond animations are significantly different, by 3.5 seconds or 3.1%. Animation speed also had a significant main effect on composite reading error, F(3, 17) = 20.18, p < .001. This effect similarly contains both a significant linear component, F(1, 19) = 49.11, p < .001, and quadratic component, F(1, 19) = 25.56, p < .001. Mean reading error rates significantly improved by up to 54.5%. Furthermore, document type had a significant main effect on trial time, F(1, 19) = 23.65, p < .001, as well as on composite reading error, F(1, 19) = 4.705, p = .043. Mean trial times for unformatted and formatted documents differed by 5.9 seconds or 5.1%, mean reading errors improved by 12.8% . There were no significant interaction effects, and neither within-subjects factor had a significant effect on RSD.
Animation speed had a significant main effect on trial time, F(3, 17) = 3.568, p = .036. However, no pairs of trial times were significant after the Bonferroni adjustment. Mean trial times for 0 and 500 millisecond animations were borderline significantly different (p = .069) by 24.5 seconds or 23.9%. Animation speed did not significantly affect either counting error or RSD. Satisfaction and Preference
17 out of 20 participants responded that animated scrolling helped them to read the plain text documents. Similarly, 17 out of 20 responded that the animations helped in reading the formatted documents with graphics, and 17 out of 20 responded that the animated scrolling helped when counting the symbols. However, most users commented that the animations were most beneficial for the symbol documents and least so for the formatted text documents. Three users said that the counting tasks were very difficult without animated scrolling. 18 out of 20 participants responded that they would choose to turn on animated scrolling in the programs they regularly use if given the option.
Animated scrolling improves reading speed while decreasing reading errors. Therefore, it is likely that reading comprehension improves as well for any document long enough to require a significant number of scrolling interactions. The quadratic components of the animation speed’s main effects on time and error verify the intuition that the incremental benefit decreases with the duration of the animations. Of the speeds tested, for text documents, the ideal animation speed is 300 milliseconds , whereas the highly repetitive symbol documents benefited most from 500 millisecond animations.
These results are limited to vertical scrolling using the up and down arrow keys, and may not generalize to other types of scrolling interactions. In particular, our subjects reported that they most frequently use the mouse wheel for scrolling. Because most interactions with the mouse wheel result in several discreet transitions (“clicks”) that occur in rapid succession, scrolling using the mouse wheel already has an intrinsic animating effect. While both unformatted and formatted documents benefit from animated scrolling, text documents formatted with titles and graphics have a lower base error rate and hence benefit less. These results show that incorporating visual landmarks produces significant benefits regardless of animated scrolling.
As expected, the symbol countin g tasks suffered the most from disorienting transitions in the absence of animated scrolling, and trial time is substantially effected. While error rates were not significantly affected, users anecdotally preferred slowing down in order to avoid making a numerical counting error. Some users avoided the counting error altogether even without animations, yet still found the task frustrating. By contrast, when reading out loud, users appeared to be more willing to accept an increased error rate in favor of more continuous reading.
This study shows that animated scrolling significantly improves both efficiency and user satisfaction. The magnitude of this improvement is greatest for repetitive documents lacking visual landmarks. Also, visual landmarks do significantly improve reading efficiency. Compared with non-animated scrolling, animated scrolling reduces reading errors by up to 54% and task time by up to 3.1% for reading trials , and reduces task time by up to 24% for counting tasks. Given these results, we can recommend implementing 300 millisecond animations in any application that is dominated by the scrolling interaction studied here. However, the computational implications of animated scrolling should factor into any specific deployment decisio n limited by graphics performance. Future work should investigate other modes of scrolling interactions besides the arrow keys and other scrolling amounts, further narrow down the relationship between document attributes and their corresponding ideal animation speeds, and consider automated methods of adding visual landmarks to existing documents.
We would like to thank Chip Denman and the University of Maryland Statistics Laboratory for assistance with the data analysis .