You are currently using a browser that is no longer supported and may therefore cause display errors. Feel free to switch to another browser to experience a better design.

Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.

Close

Thinking Out of the Box

Benefits and Drawbacks of Animations Concerning User Experience

Anna Günther
February 26th, 2010

As described in January’s post, animations can fulfill essential purposes in user interface design. This article provides some insight into a study that has been conducted with the goal of exploring the effects of animations regarding user experience.

Prototype and Tasks

The object of the study was the interactive prototype of a facility management system. Its main functionality was to give an overview of a building (floors and rooms), adjust the temperature and assign the right employee to arising problems in order to solve them. (For a more detailed overview of the prototype and its design see also the blog article from January.)

Overview of facility management prototype (animated version)

Overview of facility management prototype (animated version)
Loading...

The participants first had to increase the temperature in the building. The result of this increase was an overheated server in the building. The participants then had to navigate to the source of the error and assign the IT Administrator to this problem in order for her to solve it.

Study Design

Participants in the study were divided in two groups. While one group interacted with an animated version of the prototype, most of the animations were replaced with static counterparts for the second group (“static group”). The differences between the two versions of the prototype affected, amongst other things

  • help display: whereas the interaction for assigning a staff member to a problem was described with a text for the static group, the animated help version consisted of an animated arrow showing the connection between the staff repository and the room overview and thus giving a visual hint on the required drag & drop interaction
  • transitions between screens: for the static group, one screen state was simply replaced with another whereas in the animated prototype, there was a continuous change from start state to end state
  • alert icons: the static group was presented with static exclamation marks whereas in the animated version of the prototype the exclamation mark icons were “pulsating”

The tasks to be performed were the same for both groups.
Interaction with the prototype was observed and a questionnaire was administered after the participants had concluded their interaction with the prototype in order to gain additional insight into user experience issues.

Results

In this section, four findings of the study are described in order to shed some light on the effects of animations on user experience.

  1. Attention-directing function of animations: Subjects in the “static group” had more problems with assigning an employee to the problem because the help text on the screen next to the error was oftentimes not recognized – in contrast to the animated help.
  2. Influence of user proficiency on judgment of animation speed: The subjects who don’t work with computers on a daily basis, were much more grateful for the animations and liked the animations more than the ones who use the computer every day. This also showed in regard to animated screen transitions. While most of the regular computer users liked them, but thought they were too slow and that they would rather annoy them after some time, the more inexperienced subjects found them very helpful and had no such concerns. This shows that the speed of animations has to be chosen carefully considering user characteristics.
  3. Influence of user proficiency on feeling of urgency as created by animations: When asked if they were afraid of making mistakes when using the prototype the differences between advanced computer users and the occasional computer users became apparent again. While the ones that don’t work much with the computer answered that the animated alert icon (blinking exclamation mark) created a certain atmosphere of panic for them the advanced users sensed something completely different. They said that due to the heavy use of animations used in the prototype they felt more like in a computer game than in an actual application and thus had less fear of making mistakes. They didn’t sense the animated exclamation mark to be as threatening as the occasional users. That shows that the use of animation in an application should be adjusted to the target audience in order to gain the desired effects.
  4. Influence of animations on joy of use: What became very clear during the tests as well as in the questionnaire afterwards was that the subjects who used the animated version of the prototype had much more fun while using the application. While all of them agreed, that the user interface was very nicely designed, the animated group still had more fun using it. This result showed that animations have a huge impact on the joy of use of a modern application.

Conclusion

After analyzing the data gathered in the study, first answers regarding the question of benefits and drawbacks of animations in user interfaces emerged. On the positive side, animations made users like the application more and used in the right way they were able to help inexperienced users to work with the applications. But there were also drawbacks: experienced users felt limited in their use of the application due to the employment of animations. So it is crucial to consider user characteristics in order to decide when and how to use animations.
Of course, the study has far from answered all the questions that can reasonably be asked regarding the influence of animations on user experience. There is still a variety of interesting questions that can be asked in that area and the future will hopefully see more answers in order to employ animations in a way that enhances user experience.

This blog article is an edited version of material originally written by Anna Günther based on her bachelor thesis conducted at Centigrade.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Corporate Experience Manager
+49 681 959 3110
Contact form

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119