# Acceptance and Speed of Animations in Business Software

Lisa Mattes, Martin Schrepp, Theo Held, Patrick Fischer

► To cite this version:

Lisa Mattes, Martin Schrepp, Theo Held, Patrick Fischer. Acceptance and Speed of Animations in Business Software. 13th International Conference on Human-Computer Interaction (INTERACT), Sep 2011, Lisbon, Portugal. pp.438-441, 10.1007/978-3-642-23768-3_52. hal-01596987

HAL Id: hal-01596987

https://inria.hal.science/hal-01596987

Submitted on 28 Sep 2017

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
Acceptance and speed of animations in business
software

Lisa Mattes¹, Martin Schrepp¹, Theo Held¹, Patrick Fischer¹

¹SAP AG, Dietmar-Hopp-Allee 16, 69190 Walldorf, Germany
{Lisa.Mattes, Martin.Schrepp, Theo.Held, Patrick.Fischer}@sap.com

**Abstract.** Well-designed animations can improve the usability of graphical user interfaces for business software. It is crucial in this area that the user considers animations to be helpful and that they do not decrease perceived work efficiency. Thus, both the acceptance of animations and the selection of an appropriate animation speed are of high importance. We investigate those aspects in three explorative studies. Results show that animated interactions are considered to be useful by a considerable majority of participants. The observed settings for the animation speed show that quite fast animations are generally preferred. We demonstrate that for some of these animations the observed settings for animation speed can be explained by cognitive modeling.

**Introduction**

Well-designed animations can improve the usability of an interface. They can be used
effectively to catch users’ attention [1]. Animations can visualize changes on the user
interface as a continuous transformation. This reallocates cognitive load to the visual
system [2] and creates the impression of a direct manipulation of objects [3]. In
addition, animations can improve the visual attractiveness of an interface [4].

Especially in the context of business software it is important that animations do not interrupt the work flow by being too fast or too slow. Thus, an appropriate setting for the speed of animations is very important in this domain. In addition, users should perceive animations as helpful in their daily work. Therefore, user acceptance is an important factor.

**Investigations**

We conducted three studies to investigate users’ preferences concerning the speed of
animations as well as the acceptance of the tested animations. In all three studies a
quite similar procedure is used. First, the context of the current animation was
explained to the participants. This should enable them to choose a suitable animation
speed and to decide if the animation makes sense in this context. Second, the handling
of the animation speed adjustment was explained by a short text and a video. After
these instructions participants could switch to the adjustment of the animation speed.
The upper part of the corresponding screen showed the initial state of the animation. Participants could start it by an instructed action (like clicking a button). Animation speed could be set by moving a slider on the bottom of the same page. Participants could adjust the speed and try out the animation as often as required to come to a decision. When the speed was considered to be adequate, the current setting could be confirmed by pressing a button. The initial speed of the animation was randomized per participant. Additionally, in studies 2 and 3 after confirming their setting, participants were asked if the animation was desirable in the described context (answer categories *Yes*, *No*, *Not Sure*). Here a lower animation speed implies a longer time until the animation ends. Thus, we report in the following the duration of an animation as a measure for the animation speed.

## Study 1

This study scrutinizes an animation in the context of ecommerce. The animation is designed to provide feedback that a product chosen from the product catalogue in a web shop has been added to the shopping cart. After selecting the product, an overlay is opened that shows the current content of the cart, highlighting the new product with a green out-fading background.

Participants were recruited via email. The study was started by 52 persons. The data of 36 persons (average age: 34.42 years, 72% male, 22% female, 6% unknown) were complete and could be used in the analysis. In average the setting for the animation duration was 1838 ms (SD = 1492 ms). This observed value could be described by cognitive modeling. In the considered scenario the user had to move the visual focus to the shopping cart, perform a cognitive operation ('Think' [5]; 'Mental Operator' [6]) and had to process the product info in the cart (read 3 words). If we model this sequence, for example, with CogTool [5] this yields an estimated duration of 1850 ms, which is quite close to the observed value of 1838 ms.

## Study 2

This study examines five different animations in a Customer Relationship Management (CRM) system:

* Animations 1 - 3: Participants should collapse three tables of differing sizes sequentially by clicking on an icon in the table header. Collapsing didn't occur instantly, but progressed stepwise so that the table seemed to get squeezed. The number of rows of the table was varied to scrutinize the influence of this parameter on the preferred animation speed. The three tables contained 5, 15, and 25 rows respectively.

* Animation 4: This animation visualized hiding a block of information on a page. After clicking a corresponding icon in the header of the block, the block faded out until it completely disappeared.

* Animation 5: Lines in a table can be removed by clicking on a delete icon in the line. After this icon has been clicked, the content of the line first faded out
completely and then the row collapsed until it wasn't visible anymore. For this animation two sliders were offered to set the durations for the two components of the animation separately.

A link to the study was placed in a newsletter of a German university. The experiment was started by 60 persons. The data of 54 persons (average age: 22.58 years, 68.5% male, 29.6% female, 1.9% unknown) were complete and could be analyzed.

Table 1 shows the observed values for the animation duration and desirability ratings. For animation 5, the entry 5a refers to the time to fade out the content and 5b refers to the time for collapsing the line.

<table><caption>**Table 1.** Observed durations and evaluation of usefulness.</caption><thead><tr><th rowspan="2">Animation</th><th rowspan="2">Duration (ms)<br>Mean (SD)</th><th colspan="3">Animation desirable? (%)</th></tr><tr><th>Yes</th><th>No</th><th>NA</th></tr></thead><tbody><tr><td>1</td><td>261 (199)</td><td>70.4</td><td>16.7</td><td>13.0</td></tr><tr><td>2</td><td>297 (173)</td><td>72.2</td><td>16.7</td><td>11.1</td></tr><tr><td>3</td><td>336 (314)</td><td>70.4</td><td>16.7</td><td>13.0</td></tr><tr><td>4</td><td>341 (223)</td><td>88.8</td><td>5.6</td><td>5.6</td></tr><tr><td>5 a</td><td>289 (222)</td><td></td><td></td><td></td></tr><tr><td>5 b</td><td>245 (192)</td><td>88.9</td><td>1.9</td><td>9.3</td></tr></tbody></table>

The attitude towards the animations was very positive. All investigated animations were considered to be desirable by more than 70% of the participants, while durations of the animations were set to quite small values.

## Study 3

This study investigates again an animation in the context of a CRM system. When users make errors in entering data, a corresponding error message is displayed at a specific location on the user interface. To increase salience of this message an animation is used. The error message first fades-in with a red background, then stays constant for a certain time and fades-out after that. Hence, this animation consists of three parts that participants can adjust with three separate sliders.

Participants were recruited via email. The study was started by 61 persons. The data of 51 persons (average age: 28.7 years, 77% male, 23% female) were complete and could be used in the analysis.

In total 60.8% of the participants considered this animation to be desirable in the described context, 17.6% found it not desirable, and 21.6% were unsure. Thus, also this animation is quite highly accepted. Concerning animation speed we observed the following mean values for the three components of the animation: Fade-in 652 ms (SD = 560 ms), staying constant 2672 ms (SD = 1013 ms), and fade-out 924 ms (SD = 607 ms). If we add the average durations of the single components we get a total of
4248 ms for the whole animation. Again this observed value for animation duration
can be described by cognitive modeling. First, the user had to set the visual focus to
the message and to read the message text (11 words). Under the assumption of a
common reading speed of 300 words per minute [7] a cognitive model predicts 4750
ms to complete this cognitive sequence. Again this is close to the observed value.

Conclusion

A considerable majority of participants rated the investigated animations as desirable. But because of interindividual differences, differences in the acceptance of various animations, and general accessibility requirements there is a need of providing users with an option to disable animations in a software product.

There are substantial interindividual differences concerning the preferred
animation speed as can be seen from the high standard deviations. This requires that
users not only have to be allowed to disable animations, but also to adjust the speed to
some degree. It is conceivable that there are differences because of users' age.
However, an additional analysis didn't reveal such a result.

The investigated animations can be grouped into two categories. First, there are
animations that visualize changes in the state of the user interface (expand/collapse
areas, fade in/out content). Second, there are animations that guide the user's attention
to a certain screen area and trigger a cognitive process (shopping cart, error message).

For animations of the first type, rather small durations are preferred (around 300 ms). For animations that trigger cognitive processes cognitive modeling helped predicting the animation durations quite accurately. This indicates that animations should run approximately as long as the cognitive processes triggered by the corresponding situations. Thus, we can hope to estimate the optimal duration of future animations that require thinking with the help of cognitive modeling.

REFERENCES

[1]Hong, W.; Thong J. & Tam K.Y. Does Animation Attract Online Users' Attention? The Effects of Flash on Information Search Performance and Perceptions. Information Systems Research 15, 1 (2004), 60–86.

[2]Robertson, G.G., Mackinlay, J.D. & Card, S.K. Cone Trees: Animated 3D Visualizations of Hierarchical Information. In *Proc. CHI 1991*, ACM Press (1991), 189–194.

[3]Thomas B.H. & Calder, P. Applying Cartoon Animation Techniques to Graphical User Interfaces. ACM Transactions on Computer-Human Interaction 8, 3 (2001), 198–222.

[4]Sundar, S.S. & Kalyanaraman, S. (2004): Arousal, Memory, and Impression-Formation Effects on Animation Speed in Advertising. Journal of Advertising, 33, 1 (2004), 7-17.

[5]John, B., Prevas, K., Salvucci, D. & Koedinger, K. Predictive Human Performance Modeling Made Easy. In *Proc. CHI 2004*, ACM Press (2004).

[6]Card, S. K., Moran, T. P. & Newell, A. (1980). The keystroke-level model for user performance time with interactive systems. Commun. ACM,

[7]Fry, E.B. Teaching faster reading: a manual. Cambridge University Press (1963).