Animation guidelines for hybrid mobile applications

Abstract

This thesis focuses on the creation of the animation guidelines for flat design hybrid mobile applications (HMA). The purpose of this study is to create a guideline that can be used to create HMAs for both the iOS and Android platforms without compromising user experience (UX). The objective of this thesis was set because no guidelines for HMA animation exists.

The need for the guidelines is researched through a questionnaire on the end users’ perception of the user interface (UI) animations in mobile applications. The results demonstrate that the user understanding of animations in mobile applications is insufficient. Furthermore, the results shed light on how difficult it is to find a mobile application that does not use any animations.

A comprehensive study is conducted into the major mobile platforms and their respective best practices for implementing animation. Based on the results of this thesis, a guideline document is formulated to aid the developers of HMAs. Furthermore, the guideline is tested with a simulated application that collects data enabling a comparison between the simulated HMA using animation according to the guideline and an application without animation.

In addition, based on the results of this thesis, a universal animation guideline in flat design HMAs is proposed. A usability study indicates that adhering to the guidelines results in an application that is 161% more user-friendly than an application that does not use animation. Moreover, the usability test in this thesis reveal that the application adhering to the guidelines is used 1.3 times longer. The results of this study demonstrate a significant correlation between better UX, the use of UI animation and the time spent on using an application. Therefore, the UX of the HMA can be enhanced by adhering to the guidelines devised in this thesis.

Insinöörityössä oli tavoitteena tuottaa ohjeistus animaatiokäytännöistä hybridisovelluksissa mobiilikäyttöjärjestelmillä. Mobiilisovelluskehittäjän kannalta tavoitteena oli luoda viitekehys, jonka pohjalta tuotetuilla animaatioilla voidaan kehittää hybridisovellus niin Android- kuin iOS-käyttöjärjestelmälle siten, että käytettävyys ei kärsi kummallakaan alustalla. Projektin tavoitteenasettelu pohjautui vallitsevaan tilanteeseen, jossa vastaavaa dokumentaatiota ei ollut saatavilla.

Insinöörityön tarvetta arvioitiin kyselytutkimuksella. Tutkimuksen tulokset osoittivat, että loppukäyttäjien ymmärrys animaatioiden yleisyydestä mobiilisovelluksissa on puutteellista. Vastaavasti kyselytutkimuksen tulokset osoittivat, että suurin osa mobiilisovelluksista hyödyntää animaatioita käyttökokemuksen parantamiseksi.

Insinöörityössä tutkittiin kahden merkittävimmän mobiilikäyttöjärjestelmän käytäntöjä animaatioiden suhteen, ja havaintojen pohjalta työstettiin yleisohjeistus hybridisovellusten kehittämistä varten. Tuotettu ohjeistus koestettiin luomalla simuloitu mobiilisovellus, jonka koekäytöstä kerätyn aineiston avulla analysoitiin animoidun sovellusversion käytettävyyttä verrattuna sovellukseen, joka ei hyödyntänyt animaatioita.

Insinöörityön lopputuloksena syntyi yleistasoinen ohjeistus animaatiokäytännöistä hybridimobiilisovelluksille. Ohjeistuksen mukaisesti tuotetun sovelluksen käytettävyysmittaus osoitti käyttökokemuksen olevan 161% parempi verrattuna vastaavaan sovellukseen ilman animaatioita. Erityisen kiinnostavaa on tulos, jonka perusteella animaatioita hyödyntävän sovelluksen parissa vietettiin 1.3 kertaa enemmän aikaa. Tulokset osoittavat, että sovelluksen parissa vietetyn ajan ja animaatioiden kautta parannetun käytettävyyden välillä on merkittävä korrelaatio. Toisin sanoen noudattamalla tuotettua ohjeistusta, voidaan animaatioilla parantaa hybridisovelluksen käyttökokemusta.