Luettavissa 5 minuutissa

Keskusteleeko sivustosi käyttäjän kanssa?

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.

Viimeisimmät artikkelit

Blogi
27.11.2020
Brändipuhelimesta haloo, kuuluuko?
Lue lisää
Blogi
20.11.2020
Lapsen oikeudet ja vähän isänkin
Lue lisää
Ihmiset
17.11.2020
Sanni Kivipelto
Lue lisää
Blogi
09.11.2020
B2B-jälleenmyynti, parisuhde ja partnerikokemus
Lue lisää
Webcast
05.11.2020
Huono jälleenmyyjäkokemus kasvun jarruna
Lue lisää
Case
03.11.2020
Treon: Tuotevideot täyttämään puuttuva palanen IoT-firman viestintään
Lue lisää
Blogi
19.10.2020
Käytettävyyttä käyttäjän ehdoilla
Lue lisää
Case
13.10.2020
Visiot todeksi videolla
Lue lisää
Case
05.10.2020
Mahdoton mahdolliseksi: Kreaten brändin kirkastus oli rosoinen ja rouhea
Lue lisää
Case
28.09.2020
Haarla: Raaka osaaminen on parhaimmillaan taidetta
Lue lisää
Blogi
17.09.2020
10 vuotta eikä ilman suota
Lue lisää
Case
10.08.2020
Kauppakeskukset Arabia ja Duo: brändiuudistus
Lue lisää