Kaikkihan sen tietävät, että jokin pieni liike tai interaktiivisuus jättää hyvän mielen. Sille on syynsä, että pyöriviä @-merkkejä ja lapioivia huoltoukkoja näkyi nettisivuilla jo 90-luvulla, sillä olit niistä mitä mieltä tahansa, ne toivat väriä ja pirteyttä sivuille. Siksi onkin hassua huomata vielä nykyäänkin, että joiltakin verkkosivuilta on unohtunut hover-efektit (nyt tuli ammattitermistöä, mutta hoverhan siis tarkoittaa sitä kun vie hiiren elementin kuten linkin tai napin päälle ja sille tapahtuu jotain).
Nykyään saa aikaan paljon muutakin kuin giffejä tai alleviivatun linkin värin muuttumista hiiren viedessä päälle. Nettisivun animoinnissa vain taivas on rajana. Nettiä voi animoida parhaimmillaan Pixar-tyyliin, jos vain ideat ja mielikuvitus riittävät. Täytyy kuitenkin muistaa, että liialliset animaatiot ja efektit pahimmillaan kääntyvät itseään vastaan. Visuaalisuus ja interaktiivisuus ei koskaan saisi mennä saavutettavuuden ja käytettävyyden edelle.
Itse vihaan esimerkiksi jos sivun rullattavuutta on peukaloitu niin, että vieritys ei liiku loogisesti vaan lilluu minne sattuu tai jos sivusto on esimerkiksi lukittu tiettyihin “ruutuihin”, eikä voi rullata vapaasti. Ja tämä on vain yksi esimerkki. Awwwardsin animaatio-osastossa olevista ainakin puolet ovat tällaisia edellä mainitun kaltaisia huonoja esimerkkejä.
No mitä ne hyvät animaatiot ja efektit sitten ovat? Tässä tulee joitakin esimerkkejä, joita mekin tykätään käyttää.
Taustavideo
10-20 sekunnin looppaavalla äänettömällä taustavideolla saa paljon aikaan. Sivusto näyttää elävämmältä ja näyttävämmältä ja kävijä saa samalla heti kopin yleisfiiliksestä. Alla esimerkki Hotelli Alban sivuista. Tietysti jonkun pitää kuvata näyttävä video, siihen suosittelemme lämpimästi Valkeinen Creativea, hän handlaa myös taustavideot.
Liikkuva tausta
Taustan ei tarvitse olla video, se voi olla myös staattista kuvaa, joka yksinkertaisesti liikkuu joko automaattisesti tai hiiren viedessä päälle. Bitwisen sivuilla käytetään SVG-vektorigrafiikkaa, joka on pitkän liuskan muotoinen ja liikkuu ylhäältä alas.
Liikkuvaa taustaa ovat myös (pikku hiljaa vanhanaikaiset) karusellit, joissa taustakuva vaihtuu joko automaattisesti tai nuolista klikkaamalla. Ne eivät kaipaa esittelyjä. Samoin tuossa 2010 kieppeillä tullut “Parallax”-efekti, jossa tausta pysyy paikallaan rullatessa tai liikkuu elementin “takana” oli jossain vaiheessa paljon käytössä, nykyään sitä näkee vähemmän. Efekti on käytössä ainakin Emmin sivuilla:
Lisäksi on olemassa erilaisia hover-taustoja, jotka toimivat parhaiten hillittynä zoomina tai maskina:
SVG-animaatiot
Skaalattavaa vektorigrafiikkaa (Scalable Vector Graphics, SVG) eli lähinnä kuvituksia on aina mukavaa päästä animoimaan. Tekniikka on kuitenkin melko haastavaa ja pitää tietää millaista animaatiota haetaan, ennen kuin sitä pystyy tekemään. Helpoimmillaan kuitenkin jo pelkkä värin vaihtaminen hiiren mennessä päälle luo paljon pirteyttä. Sievon ja Incoming Saarikosken sivuilla on käytetty paria erilaista SVG-animaatiota:
Paikallaan olevat animaatiot ja yleiset hover-efektit
Asioita voi liikuttaa luonnollisesti elementtien ollessa paikallaan, mutta silloin pitää olla jokin idea, ettei elementti ala ärsyttämään. Autosähkötyö Ahosten sivuille laitettiin “nuoleksi” jakoavain, joka heiluu. Huoltoyrityksellä idea oli oikein paikallaan. Tällaisia näkee aika harvoin, mutta parhaimmillaan toimii todella hyvin sivuston piristäjänä.
Yleisiä hover-efektejä (kun vie hiiren päälle) voi olla melko monipuolisestikin. Yllä esitelty muutamia.
Animaatiot kun rullataan kohdalle
Tämä efektityyppi on aivan liian yliarvostettu ja ylikäytetty, liittyy vihaamiini rullausefekteihin. Tarkoittaa siis sitä, että mitään ei näy ennen kuin rullaat kohdalle. Näitä löytyy sivustoilta kymmenen tusinassa, koska isossa maailmassa onhan se nyt “siistiä”, että laatikot ja tekstit putoilevat jotenkin ylhäältä tai sivulta feidaamalla silloin kun kohdalle rullaa. Monesti efekti on kuitenkin huonosti toteutettu niin, että joudut pahimmillaan odottelemaan monta sekuntia ennen kuin näet sisällön. En tykkää.
Meillä näitä on tehty kansainvälisille markkinoille tähtäävissä sivustoissa jonkin verran, mutta erittäin hillitysti niin ettei ala ärsyttämään. Esimerkiksi toteuttamillamme sivustoilla Tavu.io ja Adminlabs.com jotkut taustat ja nostot feidaavat tai liikkuvat kohdalle rullatessa:
Yhteenveto
Siinäpä ne tärkeimmät. Animaatioita on kiva käyttää, mutta ei liikaa. Sivusto ei saa ärsyttää, häiritä tai haitata kävijää missään muodossa. Järkevät animaatiot parhaimmillaan tekevät sivustosta sellaisen, joka piristää ja jolla on kiva vierailla jatkossakin.
Mainittakoon vielä, että tälle nykyiselle sivustollemme dude.fi laitettiin enemmän animaatioita kuin koskaan aikaisemmin, mutta vain smootheja sellaisia (lue miksi lisää omasta bloggauksestaan). Millä sivuilla sinä olet nähnyt kivoimmat animaatiot? Kerro meille Twitterissä!
