Mikki Hiirestä IOS:n on/off-kytkimeen – näin animaatio tukee käyttökokemusta

helmikuu 8, 2016 // Shengjun Shi
Animaatio ja sen alkujuuret

Animaation hyödyntäminen käyttöliittymissä on yleistynyt nykyisten mobiililaitteiden ja selainten suorituskyvyn kasvaessa jatkuvasti. Ei ole salaisuus, että animaatiot voivat parantaa käyttökokemusta. Rachel Hinman sanoo osuvasti, että ”liike puhaltaa henkiin kaiken, mihin se osuu.” Liikkuva kuva lisää litteällä näytöllä näkyvään käyttöliittymään uuden ulottuvuuden.

Kaikki alkoi yli 90 vuotta sitten, kun Walt Disney perusti animaatioimperiuminsa. Disneyn ikivihreä studio loi monet tunnetut hahmot Mikki Hiirestä lähtien. Animoidut hahmot eivät ainoastaan jätä lapsille iloisia muistoja, ne muokkaavat ihmisten odotuksia ja tapaa hahmottaa liikettä. Aivomme on ohjelmoitu tunnistamaan inhimillistä käyttäytymistä ja tunteita kaikkialla ympärillämme, sillä se auttaa meitä päättelemään vastapuolen aikeita (William F. Allmann). Siksi alla olevassa kuvaparissa liike 1 vetoaa meihin enemmän kuin liike 2.

movements
2 eri tyyppistä liikettä

Liike 1 (lähtee liikkeelle vähitellen – kiihdyttää – hidastaa – menee hieman pitkäksi – ponnahtaa hivenen takaisinpäin – pysähtyy) muistuttaa tosielämässä näkemäämme liikettä.

Käyttöliittymäsuunnittelun työkaluna animaatiot ovat kanava, jolla tarjota käyttäjälle vihjeitä. Äkkinäiset muutokset tilasta toiseen ilman silminnähtävää siirtymää voivat olla vaikeita hahmottaa. Animoimalla tilasiirtymät voimme kertoa, mistä objekti tulee ja minne se on menossa. Tummeneva tausta modaalisen ikkunan ympärillä ohjaa käyttäjän huomion siihen osaan ruutua, jossa hän voi tehdä jotain, ja vihjaa mitä saattaa tapahtua seuraavaksi.

Animaation raamattu (ja 12 periaatetta)

Animoidun liikkeen teoriaa voi lukea ”animaation raamatusta” nimeltä The Illusion of Life. Kaksi suurta Disney-animaattoria, Frank Thomas ja Ollie Johnston, paljastavat kirjassaan joukon niksejä, joihin animaatiohahmojen todentuntuisuus ja eloisuus perustuu. Kirja toimii hyvänä perustana myös liikkeen hyödyntämiselle käyttöliittymissä. Kirjassa eritellään seuraavat 12 animaation perusperiaatetta:

  • Squash and stretch
  • Anticipation
  • Staging
  • Straight ahead and pose-to-pose
  • Follow through and overlapping action
  • Slow in and out
  • Arcs
  • Secondary action
  • Timing
  • Exaggeration
  • Solid drawing
  • Appeal
The Illusion of life
Kansikuva kirjasta The Illusion of life (Frank Thomas ja Ollie Johnston)

Sen sijaan että toistelisin tässä kirjan sanoja, suosittelen katsomaan oheisen lyhyen videon, jossa Cento Lodigiani havainnollistaa kirjassa esitettyjä periaatteita – animaation avulla.

https://vimeo.com/93206523

Tutkimalla nykyaikaisia sovelluksia ja web-käyttöliittymiä löydät paljon animoituja siirtymiä, jotka hyödyntävät yhtä tai useampaa näistä periaatteista.

Käytä erottuaksesi ja luodaksesi hauskuutta, mutta maltillisesti

Animaatiot ovat luonnostaan hauskoja. Hyvin suunniteltu liike oikeassa kohdassa käyttöliittymää voi aikaansaada käyttäjässä ”wow”-reaktion ja parantaa brändikokemusta. Voi olla houkuttelevaa yrittää maksimoida ”wow”-vaikutus kylvämällä käyttöliittymään niin paljon animaatioita kuin suinkin.

Käyttöliittymissä animaatioiden yliviljelystä voi kuitenkin olla enemmän haittaa kuin hyötyä. Animoitu siirtymä on aina välitöntä muutosta hitaampi, ja liika hidastelu haittaa käytön tehokkuutta. Tarkoitushan on auttaa käyttäjää, ei häiritä järjestelmän toimintojen käyttämistä. Tämä koskee jopa pelejä: hauskuus tulee pelaamisesta, ei ylenmääräisillä animaatioilla kuorrutettujen valikoiden selaamisesta. Lisäksi osalle ihmisistä runsaiden liiketehosteiden näkeminen voi aiheuttaa jopa fyysistä pahoinvointia. Paljon kertoo iOS 7:n animaatioiden saama ristiriitainen palaute – eräässä kyselyssä noin puolet vastaajista oli kytkenyt päälle iOS:n Reduce Motion -toiminnon (joka vähentää ja nopeuttaa eräitä järjestelmän animaatioita).

Toisaalta iOS:ssä on paljon taidokkaita, hienovaraisia animaatioita, jotka ovat osasyy sen menestykseen. Järjestelmän on/off-kytkin on oiva esimerkki: siinä yhdistyy neljä Disney-animaattoreiden perusperiaatteista (squash and stretch, anticipation, slow in and out sekä pose-to-pose) yhteen animaatioon, jonka kesto on alle puoli sekuntia. Lopputulos on aivan ihana, kuten tästä pätkästä näkyy:

ios_toggle
iOS 9:n on/off-kytkimen animaatio

Yhteenvetona voi sanoa, että animaatio käyttöliittymissä on tärkeää, siinä missä layoutit ja sujuvat tehtävänkulut. Oikein käytettynä se voi tehostaa ja tukea käyttökokemusta läpi koko käyttöliittymän. Se on myös mahdollisuus rakentaa tuotteeseen tunnistettava visuaalinen identiteetti, joka miellyttää käyttäjän silmää. Toisaalta liiallisilla animaatioilla voi sabotoida hyvän käyttökokemuksen. On löydettävä sopiva tasapaino ja muistettava, että käyttöliittymäanimaatioiden tarkoitus on palvella vuorovaikutuksen sujuvuutta.

Lisälukemista (tätä blogipostausta inspiroineet artikkelit):

The Illusion of Life (Frank Thomas and Ollie Johnston)

UI Animation and UX: A Not-So-Secret Friendship (Val Head)

A New Mobile UX Design Material (Rachel Hinman)

UX Lab: How vivid animation can uplift digital experiences (Matthias Wagler)

Shengjun