Head näited animatsiooniga veebilehtedest annavad enamat kui lingikogu imetlemiseks. Nende taga on korduvkasutatavad animatsioonivõtted: kursorile reageeriv avavaade, kerimisel pöörduv toode, rida-realt ilmuv pealkiri ning paigal püsiv jaotis, kus lugu edasi areneb. Kui neid võtteid tunned, saad inspiratsiooniks leitud veebilehte mõne sekundiga hinnata.
Siin on 15 võtet, rühmitatud asukoha järgi lehel. Igaühe juures selgitame, millal see aitab ja millal segab.
Avavaate animatsioon
1. Kursorile reageeriv avavaade. Taust, tekst või objekt kaldub kursori poole. Millal aitab: muudab avavaate kahe sekundiga elavaks. Mida arvestada: puuteekraanil pole kursorit, seega vajad alternatiivi: güroskoobiga juhtimist, õrna taustaliikumist või staatilist kaadrit.
2. 3D-objekt avavaates. Reaalajas kuvatav toote- või skulptuurimudel, mida saad pöörata. Millal aitab: tootebrändidel, kelle müügiargument on kuju ja materjal. Mida arvestada: 3D laadimine võib lehe esmast kuvamist takistada. Näita esmalt asenduspilti ja käivita seejärel 3D.
3. Sissejuhatav animatsioon või laadimiskuva. Lühike brändi stiilis animatsioon enne veebilehe ilmumist. Millal aitab: ainult siis, kui katab mahukate materjalide laadimiseks kuluvat aega. Mida arvestada: peaaegu kõigil muudel juhtudel segab see kasutajat. Meie jätaksime selle ära.
Kerimisega seotud animatsioon
4. Kerimisega juhitav tootevaade. Pildijada või video on seotud kerimisasendiga: kerides toode koostub, avaneb või pöörleb. Millal aitab: selgitab toimimist ilma videomängijata. Mida arvestada: pikad pildijadad muutuvad kiiresti mahukaks. Määra kaadrite arvule ja failimahule piirid.
5. Lugu paigal püsivas jaotises. Üks paneel jääb paigale, samal ajal kui tekst või visuaalid selle kõrval muutuvad. Millal aitab: loo järkjärgulisel esitamisel, funktsioonide tutvustamisel ja ajajoonte puhul. Lähemalt loe artiklist „Kerimisega jutustavate veebilehtede näited“. Mida arvestada: liiga pikalt paigal püsiv jaotis tekitab tunde, et kasutaja on lehel kinni.
6. Parallaksikihid. Esi- ja tagaplaan liiguvad eri kiirusega. Millal aitab: lisab tasapinnalisele fotole sügavust. Mida arvestada: WCAG juhend Animation from Interactions nimetab parallaksi sagedaseks vaevuste vallandajaks tasakaaluelundi häiretega inimestel. Lülita see vähendatud liikumise eelistuse korral välja.
7. Horisontaalselt keriv jaotis. Vertikaalne kerimine liigutab sisu külgsuunas. Millal aitab: galeriides ja tootevalikute esitlemisel. Mida arvestada: ilma nähtava edenemisnäitajata võib kasutajal olla raske lehel orienteeruda.
8. Ilmumine clip-path’i ja maskide kaudu. Pilt tuleb nähtavale kujundi kaudu, mitte tavapärase sujuva ilmumisega. Millal aitab: toimetuslikes projektides, moes ja arhitektuuris. Mida arvestada: kui nii ilmub iga pilt, pole efekt enam eriline.
Tekstianimatsioon
9. Teksti ilmumine osade kaupa. Pealkiri ilmub ridade, sõnade või tähtede kaupa. Millal aitab: annab tugeva sõnumi esitamisele rütmi. Mida arvestada: kui pealkiri on algul nähtamatu ja ootab JavaScripti, võib Largest Contentful Paint hilineda. Chrome ei arvesta opacity 0 väärtusega elemente LCP kandidaatidena enne nende nähtavaks muutumist.
10. Liikuv tüpograafia ja jooksvad tekstiread. Suur tekst kerib, venib või kordab sama liikumist. Millal aitab: jõulise kuvandiga brändidel, turuletoomisel ja ürituste veebilehtedel. Mida arvestada: WCAG 2.2.2 nõuab peatamise, seiskamise või peitmise võimalust automaatselt liikuvale sisule, mis kestab muu sisu kõrval üle viie sekundi.
11. Kasvavad arvuloendurid. Näitajad loendatakse lõppväärtuseni, kui need vaatevälja jõuavad. Millal aitab: ühe või kahe olulise arvu puhul. Mida arvestada: kaheteistkümnest loendurist koosnev ruudustik tekitab visuaalset müra.
Navigeerimine ja kursoriefektid
12. Lehtedevahelised üleminekud. Vana leht hajub või muundub uueks ilma valge välgatuseta. Millal aitab: loob mitmelehelisest saidist tervikliku mulje. Brauserisse ehitatud View Transition API töötab nüüd nii eraldi lehtede vahel navigeerimisel kui ka üheleherakendustes, kuigi brauserite tugi on endiselt erinev. Mida arvestada: üle poole sekundi kestvad üleminekud jätavad aeglase navigeerimise mulje.
13. Eelvaade kursori pealeviimisel. Kui viid kursori projekti pealkirjale, ilmub pilt või video, mis järgib kursorit. Millal aitab: portfooliotes, projektide loendites ja kollektsioonides. Mida arvestada: puuteekraanil seda efekti pole, seega peab loend toimima ka ilma selleta.
14. Magnetnupud ja mikrointeraktsioonid. Tegevusnupp liigub kursori poole ning ostukorvinupp kinnitab klõpsu väikese hüppega. Millal aitab: annab märku, et klõps toimis. Mida arvestada: efekt ei tohi toimingut edasi lükata.
15. Sujuv kerimine. Teegid nagu Lenis siluvad hiirerattaga kerimist, et liikumine tunduks pehmem. Millal aitab: hoiab keeruka kerimisanimatsiooni ühtses rütmis. Mida arvestada: lahendus ei tohiks telefonis tavapärast kerimist segada ega ankrulinke rikkuda.
Kiirülevaade: võte ja risk
| Võte | Milleks sobib | Peamine risk | Kulutase |
|---|---|---|---|
| Kursorile reageeriv avavaade | Esmamulje brändist | Mobiilis pole kursorit | Keskmine |
| 3D-objekt avavaates | Tootebrändid | Aeglane esmane kuvamine | Kõrge |
| Kerimisega juhitav tootevaade | Toimimise selgitamine | Suur failimaht | Keskmine kuni kõrge |
| Lugu paigal püsivas jaotises | Funktsioonide tutvustus | Kinnijäämise tunne | Keskmine |
| Teksti ilmumine osade kaupa | Pealkirjad | Hilinenud LCP | Madal |
| Lehtedevahelised üleminekud | Mitmelehelise saidi terviklikkus | Aeglane navigeerimine | Keskmine |
| Eelvaade kursori pealeviimisel | Portfooliod, kollektsioonid | Puuteekraanil pole nähtav | Madal |
Kuidas võtet läbimõeldult üle võtta
Efekti kopeerida on lihtne. Kvaliteetse mulje loob täpne ajastus.
Nielsen Norman Group soovitab enamiku kasutajaliidese animatsioonide kestuseks 100-500 ms: lihtsa tagasiside jaoks umbes 100 ms ja suuremate muutuste jaoks 200-300 ms. Peatuvate elementide puhul soovitatakse ease-out-kõverat. Erand on kerimisega juhitav animatsioon, mille tempo määrab kasutaja.
Kui võtame eeskuju meeldivast animatsiooniga veebidisainist, järgime kolme reeglit:
- Üks peamine võte lehe kohta. Kombineeri jõuline avavaade rahulike jaotistega.
- Kasuta kogu saidil sama tüüpi liikumiskõveraid. Eri tüüpi kõverad jätavad mulje juhuslikest osadest kokku pandud veebilehest.
- Iga võte vajab vähendatud liikumisega versiooni. Mitte väljalülitamist, vaid rahulikumat varianti.
Kui vajad võtteid, millega külastaja saab ise suhelda, mitte neid ainult vaadata, loe artiklit „Interaktiivne veebidisain“.
