Blogi | 22.10.2018
Saavut verkkosivustolle ensimmäistä kertaa. Näet sivun ylälaidassa menun, josta tiedät pystyväsi navigoimaan sivuston eri osiin. Muistat, että joskus menu on jonkinlaisen napin takana piilossa, mutta sekin löytyy ylälaidasta. Tiedät, että firman logoa painamalla pääset takaisin etusivulle ja huomiota herättäviä nappeja seuraamalla pääset eteenpäin. Nopean tiedon tarpeessa osoitteet ja puhelinnumerot löytyvät tuttuun tapaan jokaisen sivun pohjalta omasta laatikostaan. Värit, kuvat ja videot kilpailevat huomiostasi. Liikuttaessasi hiirtä yhden kuvan päälle mietit, että voikohan tätä painaa. Painettuasi lopulta jotakin linkkiä sivu alkaa lataamaan. Sivun latautuessa tuijotat tyhjyyteen – valkoiseen ruutuun. Odotat ja mietit, että tapahtuukohan tässä nyt jotain.
Luontevaa, mutta luonnotonta
Paljoa yleistämättä voidaan sanoa, että ihmiset puhuvat nykyään sujuvasti webin kieltä. Netin selaaminen on niin luonnollinen osa ihmisten elämää, että navigointi on kuin lehden sivuja kääntelisi ja monet interaktiot tehdään sen enempää miettimättä. Webbi on tuttu paikka, mutta välillä se tuntuu kolkolta ja irralliselta. Selaaminen on intuitiivista, mutta sivusto ei aina keskustele käyttäjän kanssa. Kyse on pienistä jutuista, mutta usein pienet jutut ovat niitä tärkeimpiä.
Ihmiset puhuvat sujuvasti webin kieltä.
Vaikka nettiä selataankin fyysisillä laitteilla, siihen ei pääse käsiksi samalla tavalla kuin sanomalehteen. Lehteä on kiva selata, koska siihen liittyy paljon muutakin kuin pelkkää lukemista. Paperin tuntu, tuoksu ja paino tekevät sanomalehden selaamisesta miellyttävää – ne tekevät lehden selaamisesta kokemuksen. Webbi ei tunnu, tuoksu tai paina, minkä vuoksi täytyy käyttää muita keinoja, jotta selaaminen olisi yhtä miellyttävää.
Liikkeellä kohti parempia käyttökokemuksia
Animaatioista voi ensimmäisenä tulla mieleen animaatioelokuvat tai pelit, mutta tässä on kyse hieman pienemmistä jutuista. Alalla käytetään välillä termiä mikrointeraktiot, mutta tuttavallisemmin voidaan puhua animaatioista tai ihan vaan liikkeestä. Motion design on kuuma aihe tällä hetkellä ja sille on syynsä.
Animaatioita on käytetty verkkosivustoilla jo pitkään erilaisiin tarkoituksiin, mutta viime vuosina kyky ja tarve ovat olleet kasvussa. Sitä mukaan, kun ihmisten käytössä olevien laitteiden prosessointiteho on kasvanut, ovat myös kehittäjien käyttämät työkalut kehittyneet. Vanha liitto käytti Flashia ja tätä nykyä hommat hoituvat uusimmalla CSS:llä ja JavaScriptillä.
Ihminen ymmärtää liikettä todella hyvin ja tulkitsee visuaalista informaatiota moninkertaisesti tehokkaammin kuin tekstiä. Hyödyntämällä käyttöliittymissä liikettä ja animaatioita voidaan käyttäjälle paremmin viestiä se, mitä ruudulla tapahtuu ilman, että asiaa tarvitsee ilmaista tekstillä. Pienestä siirtymäanimaatiosta voi olla merkittävästi hyötyä käyttäjälle, joka on juuri painanut linkkiä toiselle sivulle tai nappia avatakseen lomakkeen. Liike viestii mitä juuri tapahtui. Oikean balanssin löytäminen vaatii työtä, mutta lopputuloksena on parempi kokemus käyttäjälle.
Oikeassa maailmassa kaikelle on paino ja tavallinen ihminen ymmärtää fysiikan päälle yllättävän paljon; epäaidosti liikkuva virtuaalinen objekti näyttää välittömästi väärältä. Fyysisen maailman tuntua voidaan matkia menemättä kuitenkaan liiallisuuksiin. Liikkeen tulee aina näyttää ja tuntua hyvältä, muuten se saattaa pilata käyttäjän kokemuksen. Matkimalla aidon tuntuista liikettä voidaan luoda helpommin lähestyttäviä, hyvän tuntuisia ja ilahduttavia käyttöliittymiä.
Ei mikään muoti-ilmiö
Vielä jokin aika sitten web-kehittäjät pystyivät käyttämään responsiivisuutta myyntivalttina, mutta nykyään käyttäjät vaativat, että verkkosivusto toimii laitteella kuin laitteella. Enää ei puhuta responsiivisesta web-suunnittelusta, puhutaan vain web-suunnittelusta. Samanlainen elinkaari on monilla uusilla jutuilla webissä, vaikka ne eivät saisi niin paljoa huomiota kuin responsiivisuus aikanaan sai. Ymmärrys GDPR:stä tai saavutettavuus ovat nyt siinä, missä responsiivisuus oli vielä muutama vuosi sitten – harva ymmärtää, mutta muutaman vuoden päästä voidaan jo olettaa, että kaikki ymmärtävät. Animaatioista puhutaan vielä hyvin vähän, mutta muutaman vuoden päästä animaatiota kaivataan ja vaaditaan entistä enemmän. Ilman animaatioita käyttöliittymät tuntuvat keskeneräisiltä.
Googlen Android-käyttöjärjestelmästä tuttu animaatio LÄHDE: Google Material Design
Animaatiot eivät ole ilmiö pelkästään verkkosivuilla ja ovatkin pitkään olleet näkyvämmin esillä mobiilisovelluksissa ja käyttöjärjestelmissä. Apple on tunnettu hyvin toimivista käyttöliittymistään ja omenafirma onkin panostanut viime aikoina entistä enemmän käyttöliittymien sulavuuteen, jotta ne olisivat luonnollisempi osa ihmisten arkea. Monesti se on nähty: Mihin omena menee, muut tulee perässä.
Animaatiot ovat webissä vielä sekä väärin ymmärrettyjä että paljolti väärin käytettyjä. Visuaalisesti näyttäviä animaatioita ei tulisi koskaan tehdä käytettävyyden kustannuksella vaan animaatio on työkalu, joilla verkkosivuston käyttökokemusta voidaan parantaa. Ensisijaisesti sivuston täytyy kuitenkin olla toimiva, saavutettava ja lähtökohtien täytyy olla kunnossa.
Animaatiot oikein käytettyinä
- Herättävät mielenkiintoa
- Ohjaavat käyttäjää
- Rytmittävät kerrontaa
- Auttavat ymmärtämään sisältöä
- Viestivät laatua
- Jäävät mieleen
- Ilahduttavat
- Parantavat käyttökokemusta
Niin kuin kuvat, videot ja tekstisisältö, myös liike on kieli, jolla voidaan keskustella käyttäjän kanssa.
