Pánácz Design Blog
Animációk a weboldalon:
Gagyi - Menő, Zavaró - Hasznos

Előző bejegyzésemben arra kerestem a választ, hogy az Apple oldala miért tetszik olyan sok embernek. Arra jutottam, hogy a kiemelt termékek bemutató oldala az, ami valószínűleg ennyire népszerűvé és sokat emlegetetté tette az oldalukat. Ezeken az oldalakon kreatív, nagyon profin megvalósított animációk egész sora mutatja be az adott készülékeket.

Ebben a bejegyzésben a weboldalakon használt animációkat csoportosítom, elemzem. Melyek azok, amik elérik a kívánt hatást, és melyek azok, amik egyenesen rontják a felhasználói élményt?

Két szempont szerint vizsgálom meg az animációkat:

1. Kivitelezés minősége szerint
2. Betöltött funkciója szerint

Animációk a kivitelezés minősége szerint

Kivitelezés minősége szerint egy, a gagyitól a menőig terjedő skálán helyezkedhet el egy animáció.

Egyre inkább elterjedtek a weboldalakon, hogy jobbról, balról, fentről, stb. beúsznak az egyes elemek, ahogy görgetünk a weboldalon. Ezek legnagyobb része nem egy egyedileg oda kitalált, megszerkesztett animáció, hanem egy előre elkészített animációs csomag (pl. AOS) egy-egy mozgását használja.

Alapvetően nincs ezzel baj, ha ízlésesen válogatjuk össze az animációkat, értelemszerűen sok munkát megspórolhatunk velük, csak legyünk tudatába, hogy nem egy egyedileg oda készített, időzített mozgást látunk. Tehát ha jól használjuk ezeket a csomagokat, akkor egy közepes minőségű eredményt is elérhetünk velük minimális munkával. Mivel ezek már nagyon elterjed dolgok, ezért ezektől a beúszásoktól ne várjunk nagy “wow” hatást.

Tehát ahhoz, hogy tényleg egy nagyon menő animációnk legyen, egyedi, kreatív tervezésre és megvalósításra van szükségünk. Ha az Apple példáját nézzük ott sem sima beúszásokról beszélhetünk. Különböző megoldásokat használnak, például egy videó fut le, majd az utolsó képkocka kimerevedik. Természetesen a videó szépen az oldalba illeszkedve, észrevehetetlenül (nem egy téglalap alakú beágyazott videóról beszélünk). Vagy nagyon szép parallax effekteket is megfigyelhetünk.

Erre törekedtem a saját oldalam készítésénél is. Az oldal megnyitásakor 2 egyedi animáció is egyből látható. Az egyik a kiemelt címben (Legyen kreatív digitális megjelenésed) váltakozó szó rotációja, a másik, pedig a fotóm mögül repkedő kis geometriai elemek. Ezeket természetesen nem lehetett megoldani a már említett előre gyártott mozgásokkal. Szerintem ezek is elég menők lettek és az oldalra látogatók egyből látják, hogy nem egy minden második oldalon használt megoldással találkoznak.

Pánácz Design nyitóoldal megtekintése

Animációk a betöltött funkciójuk szerint

Funkciója szerint egy animáció lehet zavaró vagy hasznos, illetve e két szélsőség között helyezkedhet el valahol.

Milyen esetekben lehet zavaró egy animáció? Biztosan te is találkoztál már olyan oldallal, ahol irritáltak a mozgások. Indokolatlanok voltak, zavarták csak a tartalom fogyasztását. Például egy blogbejegyzés oldalán nagyon zavaró lenne, ha az egyes bekezdések szép lassan jelennének meg, így akadályozva a folyamatos olvasást. Nem is akarom ezt túlmagyarázni, sajnos sok negatív példába bele lehet futni.

Viszont egy animáció, ha jól használjuk, könnyen lehet hasznos is. Itt most nem arról beszélek, hogy menőn néz ki, és ennek köszönhetően “elvarázsolja” a felhasználót, hanem, hogy egy plusz információt ad. De nézzünk erre is egy példát: Telefonon a hamburger menüre kattintva, ha nem csak felugrik a menü, hanem például jobb oldalról beúszik, akkor kapunk egy plusz információt, hogy az a menü egyébként ott a képernyőtől jobbra helyezkedik el, így kicsit jobban megértjük, hogy az ott van jobb oldalt és alkalom esetén onnan tudjuk “előcsalogatni”. Ha a példa alapján még tovább akarjuk optimalizálni a felhasználói élményt, akkor akár egy jobbról bal oldalra elhúzással is behozhatjuk a menüt az oldalon. Mivel már a sima hamburger gombos animációval jeleztük, hogy az ott foglal helyet, így logikus lehet, hogy így is előhívható.

Egy másik példa a már említett saját oldalamon használt szó rotáció. Egyrészt a szavak váltakozásának kivitelezését már az előző pontban leírtam, de másik szempontból ennek az animációnak köszönhetően, több kiemelt szót is meg tudok jeleníteni egy mondatban (kreatív, kiemelkedő, élményszerű).

További funkciója az animációknak, hogy vezethetjük a felhasználó tekintetét az oldalon. Nyilvánvaló, hogy azt vesszük észre ami, mozog, villog vagy egyéb effekttel hívja fel magára a figyelmet. Ezt kihasználva a kiemelt tartalmakra külön felhívhatjuk a figyelmet. Itt is fontos, hogy ne vigyük túlzásba. Ha mindent kiemelünk, akkor semmi nem lesz kiemelve az oldalon.

Kombináció

A két szempont természetesen nem egy egymástól független sávon helyezkedik el. Egyik hatással van a másikra. Így ha ábrázolni szeretnénk, akkor inkább egy mátrixot képzeljünk el:

Nem kell, hogy minden animáció nagyon hasznos legyen. Lehet egy jól kivitelezett, kreatív animáció, aminek nincs sok hozzáadott értéke is nagyon jó elem az oldalon, mivel ez inkább a “wow” faktort növeli. (Szóval ha úgy vesszük mégiscsak hasznos is ezáltal)

Arra viszont figyeljünk, hogy gagyin kivitelezett semmi esetre se legyen. Annál sokkal jobb választás az is, ha egyáltalán nem használunk animációkat. Sőt, bizonyos oldaltípusoknál nem is ajánlott animációkkal nehezíteni a felhasználó böngészését. Ilyenek tipikusan a híroldalak. Oda azért megy az ember, hogy olvasson, tartalmat fogyasszon, amilyen gyorsan csak lehet.

Végszóként tehát azt javaslom, hogy mindig az adott oldalnál vizsgáljuk meg, hogy kell-e egyáltalán animáció, ha igen, akkor pedig tudatosan használjuk a kívánt hatás elérése érdekében.