Kaj se je zgodilo

Agencija Isadora je pri razvoju interaktivne spletne igrače Stress Release, digitalne "stiskalne" igrače za sproščanje stresa, naredila nekaj, kar gre proti industrijskemu refleksu. Namesto da bi za tipično zahtevo po "tipčni", odbojni in razgrajujoči interakciji posegla po fizikalnem motorju, kot sta Matter.js ali Cannon.js, so celotno izkušnjo zgradili brez ene same vrstice WebGL kode. Rešitev je bila kombinacija Lottie animacij, ki jih upravljajo programsko, DOM manipulacije in matematike na osnovi razdalje od klika do centra lika.

Zakaj je to pomembno? Ker razkriva nekaj, kar se v svetu spletnega razvoja prepogosto pozablja: bolj "napredna" tehnologija ni vedno boljša izbira. Fizikalni motorji ustvarjajo verjetno gibanje, animatorji pa so pri tem projektu potrebovali namerno, natančno določeno gibanje. Ko so ekipe pri Isadori to spoznale, so fizikalni motor preprosto opustile in dosegle boljši, bolj nadzorovan rezultat z enostavnejšim orodjem.

Ozadje: zakaj so opustili fizikalni motor

Pri projektu Stress Release je bila osnovna zahteva popoln, determinističen nadzor nad animacijo. Animatorji so pripravili natančne .json Lottie datoteke, kjer je na primer "mega squeeze" reakcija zahtevala natančno 181 sličic uvoda in nato posebno zaporedje sproščanja. Fizikalni motor bi te ročno izdelane ključne sličice prepisal z algoritemskimi približki, kar bi uničilo natančno delo animatorjev.

Rešitev je bila programski nadzor stanj prek Lottie API-ja. Vsak klik uporabnika je bil pretvorjen v lokalne koordinate lika, nato pa je razdalja od centra (izračunana s Pitagorovim izrekom) določala vse: število točk, jakost odziva in mesto eksplozijske animacije. Sistem je deloval kot tarča, koncentrični krogi okoli centra lika, kjer vizualna kompleksnost Lottie SVG-ja sploh ni vplivala na zaznavo zadetka, saj je bilo območje klika vedno preprost krog.

Poleg tega je bila celotna izkušnja odzivna zgolj prek CSS spremenljivk, ki so se preračunavale ob vsaki spremembi velikosti okna. Tako so se Lottie animacije naravno prilagajale različnim napravam, ne da bi izgubile svoje stanje, kar je bistveno enostavneje kot preračunavanje ograjujočih okvirjev in kolizijskih vektorjev pri fizikalnih motorjih.

Kaj to pomeni za slovensko malo in srednje podjetje

Verjetno se sprašuješ, kaj ima stiskalna igrača za sproščanje stresa opraviti s tvojo spletno stranjo za mizarstvo, zobozdravstveno ordinacijo ali trgovino s pohištvom. Odgovor je preprost: princip, ne primer. Vsak lastnik podjetja, ki je kdaj naročil "sodobno, interaktivno" spletno stran, je verjetno naletel na razvijalca, ki predlaga najtežjo možno tehnično rešitev, ker je "trendovska". Rezultat so pogosto počasne, nestabilne strani, ki na mobilnem telefonu tečejo slabo, baterijo praznijo hitreje in uporabnika odvrnejo, še preden vidi tvojo ponudbo.

Ta primer iz sveta razvoja iger jasno kaže, da izkušeni razvijalci raje izberejo enostavnejše, bolj nadzorovano orodje, če ta dosega enak ali boljši vizualni učinek. Za slovensko malo podjetje to pomeni predvsem eno stvar: hitrost nalaganja in stabilnost delovanja spletne strani sta pogosto pomembnejša od kompleksnih animacij. Stranka, ki na tvoji strani čaka tri sekunde, da se naloži nepotreben 3D efekt, bo v tem času že odprla konkurenčno stran.

To ne pomeni, da so animacije in interaktivni elementi slabi. Nasprotno, dobro premišljena animacija, na primer ob dodajanju izdelka v košarico, ob potrditvi rezervacije termina ali ob prikazu cene, lahko občutno izboljša uporabniško izkušnjo in zaupanje v znamko. Razlika je v pristopu: namerna, ciljno usmerjena animacija, ki jo nadzoruješ do zadnje podrobnosti, je za majhno spletno stran vedno boljša izbira kot težek fizikalni sistem, ki poskuša simulirati realnost, a v resnici samo upočasnjuje stran.

Konkretni nasveti in posledice za tvojo spletno stran

Ko razmišljaš o prenovi ali izdelavi nove spletne strani, upoštevaj naslednje:

  • Vprašaj izvajalca, zakaj predlaga določeno tehnologijo. Odgovor "ker je moderna" ni dovolj, odgovor mora biti povezan s tvojimi poslovnimi cilji, na primer hitrejšim nalaganjem ali boljšo pretvorbo obiskovalcev v stranke.
  • Preveri, kako se stran obnaša na mobilnem telefonu s počasnejšo povezavo. Večina slovenskih obiskovalcev spletnih strani danes brska prek mobilnega telefona, zato je hitrost na tej napravi ključna.
  • Zahtevaj, da se vsaka animacija ali interaktivni element opraviči sam po sebi, torej da ima jasen namen, ne da je tam zgolj zaradi vizualnega učinka.
  • Razmisli o dolgoročnih stroških vzdrževanja. Kompleksnejše tehnologije, kot so fizikalni motorji, pogosto zahtevajo več časa za posodobitve in popravke napak, kar se pozna tudi na tvojem računu za vzdrževanje strani.

Pri Carpolabu pri vsakem projektu izhajamo iz istega načela, kot ga je uporabila ekipa pri Stress Release: najprej definiramo, kaj mora spletna stran doseči, šele nato izbiramo tehnologijo. Če potrebuješ hitro, stabilno in vizualno privlačno spletno stran, ki ne žrtvuje hitrosti zaradi modnih tehničnih rešitev, si oceno svojega projekta lahko pripraviš prek našega kalkulatorja, kjer v nekaj minutah dobiš okvirno predstavo o obsegu in ceni izdelave.

Pogosta vprašanja

Ali animacije na spletni strani upočasnijo nalaganje? Odvisno od tega, kako so implementirane. Slabo optimizirane animacije, predvsem tiste, ki temeljijo na težkih fizikalnih motorjih ali velikih video datotekah, lahko občutno upočasnijo stran. Lahke, ciljno usmerjene animacije, kot je prikazan primer z Lottie tehnologijo, imajo lahko minimalen vpliv na hitrost, če jih razvijalec pravilno vgradi.

Ali moje podjetje sploh potrebuje animacije na spletni strani? Ne nujno vse podjetje potrebuje kompleksne animacije. Za marsikatero malo podjetje je pomembnejša jasna struktura, hitro nalaganje in enostavna pot do kontaktnega obrazca ali telefonske številke. Animacije so smiselne takrat, ko konkretno podpirajo poslovni cilj, na primer poudarijo ceno akcije ali olajšajo razumevanje storitve.

Kako vem, ali je moja trenutna spletna stran prepočasna zaradi nepotrebnih tehničnih rešitev? Najlažje preveriš tako, da stran odpreš na mobilnem telefonu s slabšo povezavo in spremljaš, koliko časa potrebuje za nalaganje. Če imaš dvome ali želiš strokovno mnenje o tem, kaj bi lahko izboljšali, se lahko obrneš na nas prek kontakta, kjer skupaj pregledamo tvojo trenutno stran in možnosti za izboljšave.

Vir: Smashing Magazine