Animációk: Használd okosan, az UX javítására!

Hogyan használhatod hatékonyan az animációkat?

Emlékszel még azokra a korai weboldalakra, amelyek GIF-ekkel telezsúfolva, rikító színekben, jópofának szánt kis figurákkal vagy pörgő-forgó feliratokkal igyekezték túltölteni az agyunkat? Nem véletlenül ódzkodnak sokan attól, hogy animációt használjanak weboldalaikon, pedig ma már messze jobb megoldásokkal rendelkezünk.

Az ezredforduló óta eltelt időben a webdizájn hatalmas technikai fejlődésen ment keresztül. Az olyan megoldások, mint az infinite scroll vagy a lebegő elemek egykor a gyakorlatban megvalósíthatatlanok voltak, ma hódító trendként élnek velünk.

Ilyen az animációk szerepe is. Ma már nem GIF-eket használunk, a cél a weboldal használhatóságának javítása és a figyelem irányítása, nem egyszerűen a dekoráció.

A felhasználói élmény javítása

Nézzünk egy egyszerű példát arra, hogyan használja sok weboldal az animációt arra, hogy segítsen a felhasználónak az egyes elemek használatában.

Érkezőoldalakon gyakran kérnek arra minket, hogy töltsünk ki űrlapokat, adjuk meg adatainkat – akár vásárláshoz, hírlevél-feliratkozáshoz vagy máshoz van szükség erre.

Persze minél több adatot kell megadnunk, annál nagyobb az esélye, hogy hibát vétünk. Bizonyos esetekben ez elnézhető, sokszor azonban a mezők kitöltése kötelező, és a rendszer még azt is figyeli, hogy megfelelő információkat adunk-e meg.

Ilyenkor a dizájner megteheti azt, hogy a küldésre szolgáló gombot egy egyszerű animációval, rezgéssel ruházza fel. Ez az emberi fejcsóválás megfelelője: a user azonnal észreveszi majd, hogy valami gond van, és még egyszer átnézi a kitöltött információkat. Leggyakrabban persze bejelentkezéskor találkozhatunk ilyen megoldással.

A navigációban is használhatunk animációkat, hogy megkönnyítsük a felhasználó dolgát. A legújabb kutatások szerint azokat az oldalakat, ahol az információ nem hozzáférhető szinte azonnal, ahol a navigáció túlságosan bonyolult vagy nehézkes, a látogatók nagy része azonnal elhagyja. A “három klikk szabály” értelmében bármilyen tartalmat, információt, aloldalt legfeljebb három kattintással el kell tudnunk érni egy weboldalon belül.

Megtehetjük tehát például azt, hogy a navigációban animációval választjuk szét a fő- és alkategóriákat.

Ha feleletválasztós tesztet tölt ki a felhasználó, megtehetjük, hogy a kiválasztott opció kivételével mindet elhalványítjuk.

Ezekben a megoldásokban egy a közös: diszkrétek. Úgy kell az animációkat használnunk, hogy ne legyenek öncélúak. Jelenlétük bírjon konkrét funkcióval, azért használjuk fel őket, mert valamilyen kézzelfogható módon megkönnyítik a látogató dolgát, és ezzel a mi céljainkat is szolgálják.

Fokozzuk az interaktivitást

Animációk segítségével fokozhatjuk az interaktivitást is, és nem csak a navigáció terén. Egy webáruházban például lehetővé tehetjük, hogy a felhasználó ne egyszerűen végigkattintsa a termékről készült képeket, de egy kis animáción megmutathatjuk neki azt is, éppen milyen szögből látja azt.

Híroldalakon vagy blogokon, de valójában bármilyen nagyobb szövegtestet tartalmazó oldalon jobban tagolhatunk a segítségével. Az oldal szélén megjeleníthetünk például néhány pontot, melyek közül mindig az aktiválódik, amely szakasznál a felhasználó jár, azokra kattintva pedig (ismét a navigációhoz kanyarodva vissza) más szakaszokhoz ugorhat. Ez az egyszerű scrolling helyett egy konkrétabb, kényelmesebb alternatívát kínálhat akár arra is, hogy a folyamatosan frissülő új információkat megjelenítsük.

A figyelem irányítása

Természetes, hogy a különféle animációk nagyszerűen alkalmasak arra, hogy irányítsuk a figyelmet: egy statikus weboldalon egy mozgó, változó elem természetes módon vonzza a tekintetet.

Ily módon remekül használható arra, hogy a CTA-kat vagy más fontos részleteket kiemeljük, óvatosan kell azonban bánnunk velük. Egy átlagos felhasználót ma már egy-két oda nem való animáció is zavarhat. Az internetezők hozzászoktak, hogy az élményt irányíthatják: a videók akkor indulnak el, ha rájuk kattintanak, a navigáció akkor jelenik meg, ha az egeret fölé viszi és így tovább. A nagyobb kontroll nagyobb biztonságérzetet ad.

Egy olyan oldal tehát, ahol minden izeg-mozog, valószínűleg inkább visszatetszést kelt a közönségben, mintsem pozitív reakciót.

A diszkréció itt is alapelv: ha például a CTA gomb színe lassan változik és nem túl széles skálán, az nem kirívó. Ha viszont a gomb magától mozog, ugrál, az zavaró.

Fordulj a fizikához

Ha a material design alapelveit követi oldalad, a különféle animációk jó barátaid lehetnek. A segítségükkel „valósabbá” teheted oldaladat: az egyes elemek mozgása, ha a fizikát vesszük alapul az animációk megtervezésekor, megmutatja a felhasználónak, hogy azok „nehezek” vagy „könnyűek”, hogy mi a szerepük, mit tehetünk velük.

A Google szerint például jól használhatóak az olyan elemek, amelyek attól függően, hogy éppen szükség van-e rájuk megjelennek vagy eltűnnek az oldalról. Nem csak a navigációs elemekről van szó, akár a CTA-t is megtervezhetjük úgy, hogy csak a stratégiailag fontos helyeken jelenjen meg, akkor viszont úgy bukkanjon fel, hogy felhívja magára a figyelmet.

Vannak hátrányai?

Nos, ez attól függ, pontosan hogyan használod az animációt.

Értelemszerűen az egyik alapvető tényező az oldal betöltési sebessége. Ha ezen az általad alkalmazott animációs megoldások jelentősen lassítanak (és egy-két töredékmásodperc ma már jelentősnek számít) akkor érdemes azokat újragondolnod.

A felhasználók nem szeretnek várakozni: bármilyen szolgáltatást vagy terméket kínálsz is, azt mástól is megszerezhetik, és ha az oldalaid túl lassan töltenek be, rengetegen döntenek úgy, hogy inkább máshol kutakodnak – anélkül, hogy egyáltalán látták volna az oldaladat.

Magától értetődő, hogy az animációknak reszponzívnak is kell lenniük, magával a weboldallal egyetemben. Sokszor ez azt jelenti, hogy a desktopon használt animációkat meg kell változtatnod vagy teljesen elhagynod, de ne sajnáld: a cél az, hogy a felhasználó számára könnyebbé tedd oldalad használatát.

Ha bármilyen mértékben is akadályoz az animáció, akkor nem érdemes használnod. Ha töltődéskor jeleníted meg, mert például az oldalad videós háttérrel bír, lehet, hogy egy kreatív betöltési animáció rábírja a felhasználót a maradásra. Ha viszont a menü indokolatlan helyeken jelenik meg, ha egyes lebegő navigációs elemek az oldal más részeit kitakarják vagy megakadályozzák a kattintást, akkor rossz úton jársz.

Mielőtt úgy döntenél, hogy akár a legkisebb animációt is beépíted oldaladba, mindig tisztázd, az milyen szereppel, funkcióval bírna. Az egyszerű dekoráció itt nem szempont – a felhasználó vizuális megnyerésére mozgó elemek nélkül is rengeteg lehetőséged van. Ha az animációnak valamilyen különleges szerep jut ebben, akkor továbbléphetsz, de kerüld el, hogy úgy érezzék, visszavágysz a kilencvenes évekbe.

És ha lehet, mindig legyél diszkrét. Nem véletlenül hangsúlyozzuk ezt: ha túlságosan beleéled magad a weboldalad animálásába, nem csak használhatatlanná teheted azt szándékolatlanul, de egyenesen visszatetszővé is. Egy webdizájner portfóliója talán megengedheti magának a merészebb megoldásokat, de ha egy webáruházban túl sok a mozgó elem, az öngyilkosság.

Ha mindezeket betartod, bátran alkalmazhatsz ilyen elemeket az oldalaidon. Semmi sem akadályoz benne, hogy mindenkinél jobb felhasználói élményt biztosíts, hogy a lehető legkreatívabb módokon tedd egyszerűbbé a felhasználó dolgát, vagy éppen hívd fel a figyelmét arra, ami éppen fontos lehet a számára.