Kuidas elavdada oma disaini animatsioonidega?

Me kõik kasutame iga päev mitmeid digitaalseid keskkondi. Kas sulle ei tundu, et enamus neist on pisut külmad ja staatilised? Eriti arvestades seda, et meid ümbritsev maailm on pidevas liikumises...

Interneti varasematel aegadel olid animatsioonid väga trendikad ning pea iga leht vilkus, pöörles või oli kaetud animeeritud GIF’idega.

Suur osa sellest oli tänu Adobe Flash’ile, mis võimaldas disaineritel luua veebianimatsioone ilma suurema arendustööta. Kuigi see võis tollel ajal uudne ja lahe näida, leiti õige pea, et selline lähenemine ei aita kuigi palju kaasa sisu tarbimisele ning interaktsioonide arusaadavusele. Seetõttu hakati ka disainiuuenduste käigus aina vähem ja vähem animatsioone kasutama.

Tulemuseks olid minimalistlikuma disainiga veebilehed, millest oli liikumine peaaegu täielikult eemaldatud, et kasutajal oleks võimalikult vähe segavaid ja tähelepanu kõrvale juhtivaid elemente. Võrreldes eelnevaga, paranes seetõttu kindlasti teenuste kasutaja kogemus, kuid ehk mindi korrektuuridega pisut liiga äärmustesse.

Veebitehnoloogiate edasiarengus ning seadmete ja brauserite võimekuse kasvades on näha, et aina rohkem firmasid on leidnud uue väärtuse animatsioonide kasutuses ning integreerivad neid taas oma teenustesse ja toodetesse.

Miks üldse kasutada animatsioone?

Mõistliku kasutuse puhul võivad animatsioonid anda sinu tootele elu ja iseloomu, luues sealjuures positiivset emotsionaalset väärtust. Animatsioonid on ka hea viis oma brändi kuvandi edendamiseks.

Liikuv graafika suudab kanda endas palju informatsiooni – kui soovida see samaväärselt sõnades edasi anda, siis võib vaja minna pikka ja keerukat teksti. Illustratsioone kasutatakse sageli, et teksti lihtsamini seeditavaks muuta. Graafikale liikumise andmine võib aga veel väärtuslikumaks osutuda, et sõnum paremini kohale jõuaks.

Võib öelda, et tänapäeval on üsna raske inimesi midagi pikemat lugema saada kui Twitteri säuts. Seetõttu võib mõni pisike animatsiooni jupp olla täpselt see, mida vaja, et keerulisem teema lühidalt ja atraktiivselt lahti seletada.

Millal kasutada animatsioone?

Hea reegel on jätta detailsemad ja keerukamad animatsioonid kohtadesse, kus neid näidatakse harva või ainult korra. Sellisteks olukordadeks võivad olla näiteks rakendust tutvustavad slaidid, esmakordsel kasutamisel abistavad dialoogi aknad, e-poe tellimuse sooritamine või kinkekaardi koodi lunastamine.

Lokimo mobiili äppi tutvustavad animatsioonid

Väiksemaid mikro-animatsioone, nagu lihtne suuruse muudatus või nähtavale ilmumine, võib kasutada sagedamini sellisteks interaktsioonideks nagu lemmiku salvestamine, postituse like’imine, toote ostukorvi lisamine jne.

Põhjuseks on see, et keeruka animatsiooni näitamine sagedasti kasutatavate interaktsioonide puhul muutub kergesti korduvaks ning väsitavaks. Lühema ja lihtsama efekti kasutamine annab endiselt rakendusele elu juurde liigset müra tekitamata.

Lisaks sellele on mitmeid praktilisi animatsioone, mis teavitavad kasutajat süsteemi taustaprotsessidest. Isegi tänapäeva kiirete ühenduste puhul on raske leida veebilehte või rakendust, mis saaks hakkama sisu laadimiseta või andmete töötlemiseta. Sellistel puhkudel on suurpärane lahendus kasutada animatsioone, mis annavad aimu, et süsteem toimetab taustal ning paanikaks pole põhjust.

Liikumine on ka hea viis juhtida kasutaja tähelepanu teatud elementidele, kui selleks vajadus tekib. Postkasti uue kirja saabumisel võib näiteks ümbriku ikoon veidi väriseda, et sellest kasutajat teavitada. Samuti kasutatakse sageli lehtede puhul, kus pole koheselt arusaadav, et sisu allpool jätkub, näiteks lehe kerimise indikaatori animatsiooni.

Mida silmas pidada?

Nii nagu ikoonide joonistamisel või kirjatüübi valikul, peaks ka animeerimisel arvestama firma esteetikaga. Ka liikumine mõjutab brändi kuvandit ja kannab endas selle väärtusi.

Üks olulisemaid tööriistu animatsioonide loomisel on ajastus. Kas sinu bränd on lõbus ja mänglev, täpne ja fokuseeritud või hõljuv ja unenäoline? Liikumise disainimisel saab kiirenduste, aeglustuste, pauside ja muude vahenditega luua väga erineva tunnetusega animatsioone. Hea on arvestada ka elementide füüsiliste omadustega.

Kui on soov luua põrkav pall, siis tuleks mõelda materjali peale, millest see pall võiks tehtud olla. Näiteks kerge, aga kõva lauatennisepall deformeerub maaga kokku põrgates üpris vähe ning tagasi põrke kaugus on üsna suur. Samas pehmema apelsini puhul on deformatsioon suurem ning tagasi põrkamine väiksem. Keeglikuuli kukkumisel jääks ilmselt alles vaid auk põrandas.

Kui sinu firma tegeleb näiteks turvalisusega, siis ei ole ehk hea mõte kasutada väga plastilisi või kaootilise liikumisega elemente, mis võivad mõjuda liiga mänglevana. Paremini võivad sobida selge ja fokuseeritud liikumisega jäigad objektid, mis jätavad usaldusväärsema ja stabiilsema mulje.

Kuidas hinnata animatsiooni pikkust?

Animeerides on lihtne hoogu sattuda ning aina rohkem ja rohkem detaile lisada, mis muudavad animatsiooni aina pikemaks.

Tasub silmas pidada, et rakenduse puhul ei ole tegu Disney joonisfilmiga ning ükskõik kui ilusad loodud animatsioonid ka ei oleks, siis tasuks nende pikkus hoida kontrolli all. Kasutajad ei tohiks kunagi oodata animatsioonide järgi, et rakenduses edasi liikuda. Seetõttu on hea idee hoida enamus animatsioonid pigem lühemapoolsed.

Suure tõenäosusega on inimesed selle aja peale juba edasi liikunud, kui pikk animatsioon on oma mängimise lõpetanud. Kui kasutad animatsioone, et mõnda keerukat protsessi kirjeldada, siis tasuks ehk ühe pika animatsiooni puhul see lühemateks osadeks lõigata.

Kokkuvõtteks

Päeva lõpuks on animatsioonid ikkagi kirss tordil ja seetõttu jäetakse need tavaliselt ka disainiprotsessi lõppu. Kuigi on tõsi, et projekti algusfaasis ei tasu veel liiga palju animatsioonidele aega kulutada, ei tohiks neid siiski ka ära unustada ega protsessist välja jätta.

Isegi kui päris animeerimine teostatakse hiljem, tasub siiski võimalikult varakult mõelda, millised elemendid või interaktsioonid tulevikus liikuma hakkavad. See annab parema ülevaate tulevaste tööde ja nende mahu osas. Samuti annab see arendajatele aimu, mida komponentide loomisel silmas pidada ning sisuloojad saavad hinnata, kui palju teksti kuhugi on vaja ning millised osad üldse lahendatakse animatsiooniga.

Ära unusta kasutada animatsioone vastutustundlikult ning nendes olukordades, mis edendavad kasutaja kogemust. Ja nendel hetkedel ära siis unusta kasutajatele naeratust näole tuua :)

Meeleolukat animeerimist!