Taidokas käyttöliittymän animointi (eng. motion design) on paljon enemmän kuin visuaalista kuorrutusta. Sen avulla voidaan paitsi erottua kilpailijoista paremmalla käyttökokemuksella, myös lisätä helppokäyttöisyyttä ohjailemalla käyttäjää kiinnittämään huomiota haluttuihin asioihin.

Pystyisitkö kuvittelemaan kuinka kankealta viisi vuotta vanha puhelimesi tuntuisikaan jos joutuisit käyttämään sitä nyt? Itse muistelen ajatelleeni jo tuolloin vuosikymmenen vaihteessa, kuinka silloisen älypuhelimeni käyttö tuntui välillä siltä kuin olisi kompastellut kivikossa luistimet jalassa. En puhu kuitenkaan nyt siitä miten suoritustehon kasvaminen on tehnyt laitteista nopeampia käyttää, vaan siitä miten sen myötä graafisten käyttöliittymien liikkeeseen on voitu alkaa kiinnittää enemmän huomiota.

Elämme nykyään aivan eri lailla viuhuvien ja sujahtelevien sovellusten ääressä kuin viisi vuotta sitten. Ikkunat imeytyvät alapalkkiin suljettaessa, kuvakkeet ponnahtavat ruudulle kuin jouset ja valikot sujahtavat alas kuin rullaverhot.

Joitakin vuosia sitten näin tapahtui vain Star Trekissä tai CSI:ssä. Graafisten käyttöliittymien animointi vaikuttaa kuitenkin käyttökokemuksiimme muillakin tavoin kuin vain tuomalla “wow-efektiä” tai kuorruketta pintaan. Oikeanlaisella elementtien “koreografioinnilla” käyttäjän huomiota voidaan kuljettaa olennaisiin paikkoihin ja asioihin, erityisesti silloin kun jokin asia ruudulla muuuttuu. Yksinkertainenkin käyttöliittymä saattaa pudottaa käyttäjän ärsyttävästi kärryiltä vaihtamalla näkymää äkkinäisesti, tai vaikka piilottamalla olennaisia elementtejä ruudulta. Sen sijaan pikkuhiljaa muotoa vaihtavaa sovellusta on huomattavasti helpompi seurata ja siten myös käyttää.

Esimerkki animoidusta käyttöliittymästä
Sävelkellon erikoislaatuinen käyttöliittymä vaati erityistä huomiota, myös liikkeen osalta.

 

Liike vaikuttaa myös siihen miltä sovellus “tuntuu”. Koska emme voi tuntea ruudulla esiintyvien asioiden painoa tai pehmeyttä, voimme imitoida sitä liikkeellä. Hitaasti perässä leijuva pallura tuntuu raskaalta ja pituuttaan edestakaisin muutteleva nappi tuntuu joustavalta. Ja vaikka toki hyvältä tuntuva sovellus kohentaakin käyttökokemusta jo itsessään, voidaan silläkin myös lisätä sovelluksen helppokäyttöisyyttä, korostamalla esimerkiksi eri elementtien tärkeyttä muuttamalla niiden tuntumaa.

On tärkeää, että suunnittelussa muistetaan pitää liikenäkökulma jatkuvasti mielessä, sillä se voi vaikuttaa ratkaisevasti siihen kuinka toimivana ja laadukkaana käyttäjät kokevat sovelluksen. Suunnittelijan tulisi jo aivan suunnittelun alkuvaiheessa pohtia, mistä mikäkin elementti ilmestyy ja mitä se seuraavaksi tekee, jotta käyttöliittymä olisi kokonaisuutena mahdollisimman johdonmukainen. Kun erilaisia interaktioita loppujen lopuksi suunnitellaan eteenpäin erilaisten prototyyppien ja animoitujen demojen avulla, voidaan olla varmoja siitä että sovellusta on lopulta miellyttävä käyttää.

Voisit olla kiinnostunut myös näistä: