Perjantaina, 16.8.2019

Sano ei tylsille verkkosivuille Рanimaatio ja liike jää mieleen, katso parhaat esimerkit

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ä!

Pullopostia?

Koottuja kuulumisia sisältävä bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden välein.