Animaatiot verkkosivuilla: milloin ne auttavat ja milloin karkottavat

Kannattaako verkkosivuille laittaa animaatioita?

Kannattaa, kun liikkeellä on tehtävä: se kertoo, että jotain tapahtui, ohjaa katseen oikeaan kohtaan tai näyttää asian, jota pysäytetty kuva ei näytä. Animaatiot, jotka ovat pelkkää koristetta, hidastavat sivua, vievät huomion sisällöltä ja voivat aiheuttaa osalle kävijöistä huimausta tai pahoinvointia.

Hyvä animaatio huomataan harvoin. Kun painike painuu alas painettaessa ja lomakkeen lähettämisen jälkeen näkyy selvä vahvistus, kävijä ei ajattele liikettä, vaan tietää, että asia hoitui. Huono animaatio huomataan heti, koska se pakottaa odottamaan tai vetää katseen pois siitä, mitä kävijä yritti lukea.

Kysymys ei siis ole siitä, onko sivulla liikettä vai ei. Kysymys on siitä, osaatko sanoa jokaisen liikkeen kohdalla, mitä se tekee kävijän hyväksi. Jos et osaa, liike on koriste, ja koristeesta maksaa kävijä.

Mihin liikettä oikeasti tarvitaan

Verkkosivuilla liikkeellä on muutama tehtävä, joissa se toimii paremmin kuin mikään muu keino:

• Palaute: painike reagoi, tuote lisättiin ostoskoriin, lomake lähti. Kävijä tietää, että hänen toimintansa rekisteröitiin.
• Tilan muutos: valikko avautuu, lisätiedot laajenevat ja kalenteri siirtyy seuraavaan viikkoon niin, että kävijä näkee, mistä uusi sisältö tuli.
• Huomion ohjaaminen: virheellinen kenttä korostuu, ja kävijä löytää sen etsimättä.
• Selittäminen: tuotteen kokoaminen, palvelun vaiheet tai muutos ennen ja jälkeen näkyvät liikkeenä nopeammin kuin tekstinä.

Kaikissa näissä liike on lyhyt ja liittyy kävijän omaan tekemiseen. Se ei kilpaile sisällön kanssa, vaan auttaa ymmärtämään sen. Tämä on hyvä mittapuu myös silloin, kun suunnittelija ehdottaa uutta efektiä.

Millaiset animaatiot tukevat myyntiä?

Myyntiä tukevat animaatiot, jotka poistavat epävarmuutta tai selittävät tuotteen nopeammin kuin teksti. Epävarmuus on ostamisen jarru: menikö tilaus läpi, lisättiinkö tuote koriin, varattiinko oikea aika. Pieni ja selvä liike vastaa näihin ennen kuin kävijä ehtii epäillä.

Toinen myyvä käyttötapa on tuotteen tai prosessin näyttäminen. Konepaja voi näyttää, miten osa koneistetaan, huonekaluvalmistaja, miten tuoli kootaan, ja remonttiyritys, miltä sama kylpyhuone näyttää ennen ja jälkeen. Vierityksen mukana etenevä kuvasarja kertoo tällaisen asian niin, että kävijä ohjaa tahtia itse. Sellainen on esimerkiksi näyttävän verkkosivuston ydin, ja se toimii, kun se on tehty kevyeksi eikä estä sivun käyttöä.

Myyntiä ei tue liike, joka yrittää kiskoa huomion väkisin, kuten vilkkuva tarjousmerkki tai heiluva painike. Ne voivat saada yksittäisen klikkauksen, mutta samalla ne tekevät sivusta levottoman ja vähemmän luotettavan näköisen.

Animaatiot, jotka karkottavat

Suurin osa ärsyttävistä animaatioista on tehty hyvässä tarkoituksessa. Ne syntyvät, kun sivusta halutaan eloisampi, mutta kukaan ei kysy, mitä liike maksaa kävijälle:

• Jokainen osio liukuu tai häivyttyy esiin vierittäessä, jolloin kävijä joutuu odottamaan tekstiä, jonka hän jo haluaisi lukea.
• Itsestään vaihtuva karuselli vaihtaa kuvan kesken lukemisen.
• Latausruudussa pyörii animoitu logo ennen kuin sivu näytetään.
• Vieritys on kaapattu omaan ohjaukseen ja liikkuu eri tahtiin kuin sormi tai hiiren rulla.
• Numerot laskevat nollasta ylöspäin, kun ne tulevat näkyviin.
• Taustalla liikkuu kuvio tai video tekstin takana.
• Merkit vilkkuvat ja painikkeet heiluvat.

Ensimmäinen on helppo tehdä huomaamatta. Yksi liukuva osio näyttää hienolta suunnittelijan esittelyssä, mutta kolmekymmentä liukuvaa osiota tekevät pitkän sivun lukemisesta hidasta.

Kun animaatio piilottaa sisällön

Ilmestymisanimaatioissa on riski, joka ei näy suunnittelijan koneella. Jotta osio voi liukua esiin, se on usein ensin piilotettu, ja skripti tuo sen näkyviin, kun kävijä vierittää kohdalle. Jos skripti ei jostain syystä toimi, lataus katkeaa tai selain ei tunnista, että osio tuli näkyviin, sisältö jää näkymättömäksi.

Kävijä näkee silloin tyhjän kohdan, jossa pitäisi olla hinnasto tai yhteystiedot. Hän ei tiedä, että sisältö on olemassa, eikä hän ilmoita asiasta kenellekään. Sama voi näkyä kuvakaappauksissa ja tulosteissa, joissa piilotetut osiot jäävät tyhjiksi.

Sääntö on yksinkertainen: sisällön pitää näkyä ilman animaatiota, ja liike on vain lisä sen päälle. Testaa sivu vierittämällä nopeasti alusta loppuun ja lataamalla se hitaalla yhteydellä. Jos jokin kohta jää tyhjäksi edes hetkeksi, animaatio on rakennettu väärin päin.

Hidastavatko animaatiot sivustoa?

Animaatiot voivat hidastaa sivustoa, mutta eivät välttämättä. Hitaus tulee harvoin liikkeestä itsestään. Se tulee siitä, millä liike on tehty: raskaista valmiskirjastoista, isoista video- ja animaatiotiedostoista ja liikkeestä, joka pakottaa selaimen laskemaan sivun asettelun uudelleen jokaisella ruudunpäivityksellä.

Kevyin liike tehdään selaimen omilla tyyliominaisuuksilla, esimerkiksi siirtämällä, skaalaamalla tai häivyttämällä elementtiä. Raskaampi tapa on ladata iso kirjasto, joka ohjaa liikettä skriptillä. Kirjasto pitää ladata ja suorittaa ennen kuin liike alkaa, ja sillä välin selain ei välttämättä reagoi kävijän painalluksiin yhtä nopeasti.

Liike voi heikentää myös Googlen käyttökokemusmittareita. Jos elementit siirtävät muuta sisältöä, sivun vakautta mittaava luku kärsii, ja jos skriptit varaavat selaimen, reagointinopeus heikkenee. Näistä mittareista kerrotaan artikkelissa Core Web Vitalsista ja nopeudesta yleisemmin artikkelissa verkkosivujen latausnopeudesta.

Mitä animaatioista kannattaa kysyä sivujen tekijältä

Et tarvitse teknistä osaamista arvioidaksesi, onko liike tehty järkevästi. Kysy sivujen tekijältä nämä kysymykset ennen kuin hyväksyt suunnitelman:

• Mitä kukin animaatio tekee kävijän hyväksi?
• Tarvitaanko liikkeeseen ulkopuolinen kirjasto, ja paljonko se lisää sivun painoa?
• Näkyykö kaikki sisältö, vaikka animaatio ei käynnistyisi?
• Toimiiko sivu, kun kävijä on valinnut laitteestaan liikkeen vähentämisen?
• Miltä sivu tuntuu edullisella puhelimella eikä vain uudella huippumallilla?
• Voiko itsestään liikkuvan sisällön pysäyttää?

Hyvä tekijä vastaa näihin mielellään, koska ne ovat samoja kysymyksiä, joita hän kysyy itseltään. Jos vastaukset jäävät epämääräisiksi, pyydä nähdä sivu puhelimella ennen kuin hyväksyt sen.

Mitä saavutettavuus vaatii liikkeeltä?

Saavutettavuusohjeisto WCAG vaatii perustasolla, että itsestään alkavan liikkeen voi pysäyttää, ettei mikään välähdä liian usein ja että automaattisesti soivan äänen voi pysäyttää. Tiukimmalla tasolla vaaditaan lisäksi, että kävijän toiminnan käynnistämän liikkeen voi poistaa käytöstä. Liikettä koskevat suoraan nämä kriteerit:

Nimet ovat tässä kuvaavia käännöksiä eivätkä virallisia. Latausanimaatio, jonka aikana sivua ei voi vielä käyttää, ei vaadi pysäytystä, koska se ei näy muun sisällön rinnalla. Tavallisen yrityssivuston tavoite on yleensä AA-taso, jolloin kriteeri 2.3.3 ei ole pakollinen, mutta se on helppo täyttää. Muista AA-tason vaatimuksista kerrotaan artikkelissa WCAG 2.1 AA käytännössä.

Kenelle liike on ongelma

Liike ei ole kaikille makuasia. Osalle ihmisistä suuret liikkeet näytöllä, kuten syvyysvaikutelmaa luovat taustat, liukuvat näkymät ja zoomaukset, aiheuttavat huimausta tai pahoinvointia. Osalle liikkuva elementti vie keskittymisen niin, että tekstin lukeminen on vaikeaa niin kauan kuin jokin liikkuu näkökentässä.

Välähtelevä sisältö on vielä vakavampi asia, koska se voi laukaista kohtauksen ihmiselle, jolla on valoherkkä epilepsia. Siksi välähdyksiä koskeva kriteeri on perustasolla, eikä sitä voi ohittaa ulkoasusyistä.

Myös ruudun suurennusta käyttävälle liike on hankala. Kun näytöllä näkyy vain pieni osa sivusta kerrallaan, esiin liukuva sisältö voi ilmestyä kohtaan, jota hän ei juuri silloin katso, ja jäädä kokonaan huomaamatta.

Liikkeen vähentäminen: prefers-reduced-motion

Puhelimissa ja tietokoneissa on asetus, jolla käyttäjä voi pyytää vähemmän liikettä. Verkkosivu voi lukea tämän toiveen selaimen prefers-reduced-motion-ominaisuuden avulla ja näyttää silloin liikkeen tilalla hillityn version tai ei liikettä lainkaan.

W3C mainitsee tämän tavan riittävänä tekniikkana kriteerille, joka koskee kävijän toiminnan käynnistämiä animaatioita. Tekniikan testiohje on yksinkertainen: kytke laitteen liikkeen vähentäminen päälle ja tarkista, että liikeanimaatio joko on välttämätön tai jää pois. Tekniikka on kuvattu W3C:n sivuilla.

Liikkeen vähentäminen ei tarkoita, että kaikki palaute katoaa. Painikkeen tila voi edelleen vaihtua ja vahvistus näkyä, mutta liukumisen ja zoomauksen tilalla on esimerkiksi nopea häivytys tai pelkkä tilan vaihtuminen. Kävijä saa saman tiedon ilman liikettä, joka tekee hänen olonsa huonoksi.

Miten animaatiot toimivat puhelimella?

Puhelimella animaatiot toimivat, kun ne ovat kevyitä, eivät riipu hiiren liikkeestä eivätkä taistele sormen vierityksen kanssa. Moni efekti, joka näyttää hienolta tehokkaalla tietokoneella, nykii edullisella puhelimella, kuluttaa akkua ja tekee vierittämisestä tahmean tuntuista.

Vieritykseen sidotut efektit ovat puhelimella herkimpiä. Sormella vieritetty sivu liikkuu vauhdilla ja jatkaa liukumista, kun sormi irtoaa. Jos sivu on kaapannut vierityksen omaan ohjaukseensa, kävijä tuntee, ettei sivu tottele. Hän ei välttämättä osaa sanoa, mikä on vialla, mutta hän lähtee.

Testaa animaatiot aina tavallisella keskihintaisella puhelimella ja mobiiliyhteydellä, ei vain uusimmalla mallilla toimiston langattomassa verkossa. Mobiilikäytön perusasioista kerrotaan artikkelissa mobiiliystävällisistä verkkosivuista.

Hiiren varaan rakennettu liike katoaa kosketusnäytöllä

Kosketusnäytöllä ei ole osoitinta, joka voisi leijua elementin päällä. Kaikki, mikä tulee näkyviin vain, kun hiiri viedään kuvan tai kortin päälle, jää puhelimella näkemättä tai vaatii kävijältä arvailua.

Tyypillisiä esimerkkejä ovat palvelukortit, joiden kuvaus paljastuu vasta hiiren alla, kuvat, joiden päälle ilmestyy hinta, ja valikot, jotka avautuvat hiirellä osoitettaessa. Puhelimella ensimmäinen napautus voi avata elementin ja toinen viedä eteenpäin, tai tieto ei tule näkyviin lainkaan.

Ratkaisu on näyttää tärkeä tieto aina ja käyttää hiiren alla näkyvää liikettä vain lisävihjeenä. Jos kortin kuvaus on tärkeä, se näkyy kortissa valmiiksi. Liike voi korostaa korttia, mutta se ei saa olla ainoa tapa päästä tietoon käsiksi.

Kesto ja tahti ratkaisevat tuntuman

Käyttöliittymän animaation pitää olla niin lyhyt, ettei kävijä joudu odottamaan sitä. Valikon avautuminen tai painikkeen reaktio kestää hyvin toteutettuna sekunnin murto-osan. Kun sama liike kestää sekunnin, jokainen klikkaus tuntuu hitaalta, vaikka sivu olisi teknisesti nopea.

Tahti vaikuttaa yhtä paljon. Liike, joka alkaa nopeasti ja hidastuu loppua kohti, tuntuu luonnolliselta, koska esineet liikkuvat todellisuudessakin niin. Tasainen liike tuntuu mekaaniselta, ja pomppiva liike sopii harvoin yrityksen sivustolle.

Johdonmukaisuus viimeistelee kokonaisuuden. Kun kaikki sivuston animaatiot käyttävät samoja kestoja ja samaa tahtia, sivu tuntuu yhdeltä kokonaisuudelta. Kun jokainen efekti on tehty erikseen, sivu tuntuu kootulta eri paikoista, vaikka kävijä ei osaisi sanoa miksi.

Näin testaat sivun animaatiot

Animaatiot voi testata itse ilman erityisiä työkaluja. Tee nämä tarkistukset ennen julkaisua ja aina, kun sivustolle lisätään uusi efekti:

• Kytke laitteen liikkeen vähentäminen päälle ja lataa sivu uudelleen.
• Vieritä sivu nopeasti alusta loppuun ja katso, jääkö jokin kohta tyhjäksi.
• Lataa sivu puhelimella mobiiliyhteydellä ja katso, milloin ensimmäinen teksti näkyy.
• Käy sivu läpi näppäimistöllä ja katso, näkyykö kohdistus myös animoiduissa osissa.
• Etsi itsestään liikkuvat osat ja tarkista, että ne voi pysäyttää.
• Aja sivu PageSpeed Insightsiin ennen efektin lisäämistä ja sen jälkeen.

Viimeinen tarkistus on paras apu päätöksentekoon. Kun näet, mitä yksi efekti maksaa sekunneissa ja mittareissa, on helppo päättää, onko se sen arvoinen.

Yhteenveto

Animaatiot kannattaa laittaa verkkosivuille silloin, kun liikkeellä on tehtävä: palaute, tilan muutos, huomion ohjaaminen tai tuotteen selittäminen. Koristeeksi lisätty liike hidastaa, vie huomion sisällöltä ja voi aiheuttaa osalle kävijöistä pahaa oloa.

Liike ei itsessään hidasta sivua, mutta raskaat kirjastot, isot tiedostot ja asettelua muuttava liike hidastavat. Saavutettavuus vaatii perustasolla, että itsestään alkavan liikkeen voi pysäyttää, ettei mikään välähdä liian usein ja että automaattisen äänen voi pysäyttää. Liikkeen vähentämisen asetus kannattaa huomioida aina.

Puhelimella liike on kevyt, ei nojaa hiireen eikä kaappaa vieritystä. Tärkein sääntö koskee kaikkia laitteita: sisältö näkyy ilman animaatiota, ja liike on vain lisä sen päälle.