Animated transitions in web applications

Abstract

Animations and other visual cues can be used to support interaction in user interfaces. Variants of animations and animated transitions provide means to visualize the effects of user operations and communicate changes in the state of the underlying application. However, proper incorporation of animation effects into an application requires additional design and implementation effort, as improperly applied animation can even worsen the interaction experience. Therefore, the use of animations needs to be justified.

The goal of this study is to discover ways in which animation effects affect user experience in a realistic context. The approach is twofold. First, the effect of animated transitions is studied with a real web application and with a realistic use case related with the context of online shopping. Additionally, user preferences regarding animation properties is measured. Second, the suitability and effectiveness of the selected study methods and process is evaluated with regards to the relevancy of the results and the set goals.

While most of the users tested with did not pay attention to animated transitions in the test application, all of them preferred a user interface with animations over a user interface with no animations. While our findings do not provide a solid ground for general conclusions regarding the duration and playback style of animations, we observed that some types of animations seem to clearly be more desirable and preferred than others.

Our iterative approach to developing the methods of the study with a pilot study preceding the actual study produced positive results. Validating the test setting with pilot users helped to avoid misunderstandings and discover new types of variables to measure. The contextual approach functioned well even with a rather small amount of test users.

Käyttäjän ja järjestelmän välistä vuorovaikutusta voidaan tukea visuaalisilla keinoilla kuten animaatioilla. Animoitujen transitioiden avulla käyttäjän toimenpiteet ja järjestelmässä tapahtuvat muutokset voidaan visualisoida ja ymmärrettävämmin esiin. Animaatiot tulee kuitenkin suunnitella erityisen huolellisesti, sillä huonosti toteutetut animaatiot voivat jopa haitata vuorovaikutusta ja käyttökokemusta. Tästä syystä animaatioiden käyttö tulee olla perusteltua.

Tämän työn tavoitteena selvittää käyttöliittymäanimaatioiden vaikutusta käyttäjän kokemukseen vuorovaikutuksesta järjestelmän kanssa. Tutkimus on luonteeltaan kaksijakoinen. Käyttöliittymäanimaatioita tutkitaan realistisessa käyttötilanteessa liittyen verkko-ostamiseen. Lisäksi käyttäjien mieltymyksiä käyttöliittymäanimaatioiden suhteen tutkitaan erillisellä ohjelmalla. Tutkimuksen tavoitteena on myös selvittää valittujen menetelmien sopivuutta animaatiotutkimukseen.

Suurin osa testatuista käyttäjistä ei kiinnittänyt huomiota käyttöliittymässä esitettyihin animaatioihin, mutta kaikki käyttäjät ilmoittivat haluavansa käyttää kahdesta vaihtoehtoisesta käyttöliittymästä sellaista, joka sisälsi käyttöliittymäanimaatioita. Tutkimuksen tulokset animaatioiden mieltymysten suhteen eivät mahdollista yleisluontoisia johtopäätöksiä animaatioiden keston ja toistotavan suhteen, mutta viittaavat siihen, että käyttäjillä on animaatioiden suhteen selkeitä mieltymyksiä.

Tutkimusmenetelmien iteratiivinen kehittäminen pilottikokeen avulla osoittautui hyödylliseksi tavaksi löytää menetelmien epäkohtia ja estää väärinymmärryksiä lopullisissa kokeissa. Realistiseen käyttötilanteeseen pohjautuva menetelmä toimi hyvin myös pienellä käyttäjämäärällä.