Webshark Blog

A jó design gyönyörködtet. Erre pedig nagyon alkalmasak az animációk a weboldalon. De van más funkciójuk is, például a felhasználói élmény javítása. (Frissítés, 2021.03.19. – Átrendeztük a bejegyzés, valamint kibővítettük, átírtuk ezt a fejezetet: Mikor és hol használhatsz animációkat?)

Ma már azonban az animációk esetében többről van szó, mint pusztán esztétikáról. Az animációk ugyanis könnyebbé teszik a felhasználóknak a weboldal használatát, az interakciókat, a felhasználói élményt. Az animációk készítése ugyanakkor a webdesign egyik legnehezebb feladata.

Mi az az animáció?

Animációval nem csak rajzfilmekben találkozhatsz, hanem weboldalakon is. Ide tartozik egy finomabb hover effekt vagy akár egy teljes kijelzőt elfoglaló mozgó kép.

Maga az animáció szó a latin anima szóból származik, mely lelket jelent. Alapvetően egy kísérlet arra, hogy életet leheljünk egy statikus, mesterséges dologba, ahogy az Ovidius költeményében a ciprusi Pügmalionnal is megesett, amikor az istenek segítségével keltette életre a maga által készített szobrot, mivel szerelmes lett bele.

A lényeg azonban az, hogy animációvá válik valami, amikor egy mozdulatlan 2D-s ábrázolás a fizika törvényeinek megfelelően megmozdul.

Az animációk néha annyira aprók, hogy a felhasználók nem is tudatosítják, hogy animációkról van szó. Ugyanakkor megjelenhetnek nagy méretben is, mely felkelti a figyelmüket a weboldal iránt.

Az elmúlt években egyre népszerűbbé vált a weboldalakon az animációk alkalmazása, mely trend mögött a a valószerűség illúziójának vonzósága áll. a valóság ugyanis különösen fontos a jelenlegi minimál, flat, material designnal készült oldalak korában, ráadásul egy plusz eszköz, hogy segítse a felhasználókat az oldal használatában. Anélkül vezeti ugyanis őket, hogy nagymértékben beleavatkozna az oldal eredeti esztétikájába.

Mint a webdesign minden elemének, úgy az animációknak is elő kell segíteniük a felhasználók előre jutását a weboldalon. A jó animáció lenyűgöző az emberek számára, ugyanakkor nem rontja, hanem javítja a használhatóságot.

Miért használunk animációt?

• Az animációk elsődleges célja a használhatóság javítása. Egy egyszerű animáció ugyanis segít vezetni a felhasználót, megmutatni neki, hogy melyik gombra kellene kattintania, vagy merre kellene haladnia a tekintetével a weboldalon. Ha jól használjuk, akkor az animáció jó visszajelzést ad a felhasználó számára.
• A második legfontosabb oka az animációk használatának az esztétika. Az animációk nagyon látványosak, ezért sok esetben nincs is más céljuk, mint hogy jól nézzenek ki. Miért? Mert
• Szórakoztatni akarjuk az embereket. Hiszen az animációk felkeltik a figyelmüket a termékünk iránt, és jó első benyomást keltenek bennük. A termékünk ezáltal megjegyezhetőbbé és megoszthatóbbá válik.
• Érzelmeket akarunk becsempészni a designba. Vagyis amikor meg akarod mutatni a céged vagy a terméked emberi oldalát, akkor az animációk sokat segíthetnek ebben. A cél itt az, hogy elérd: az emberek boldogok legyenek, amikor a termékedet (weboldalad) használják.

De lássuk konkrétabban!

1. Fenntartja az érdeklődést a betöltődés alatt

A betöltődési idő egyelőre elkerülhetetlen tényező a különféle digitális termékeknél. De ki mondta, hogy ennek az időnek unalmasan kell eltelnie? Ahhoz, hogy az emberek ne türelmetlenkedjenek várakozás közben, el kell terelned valamivel a figyelmüket erről. Például valami szórakoztató vagy váratlan dologgal. Erre megfelelő megoldás lehet egy animáció is. Alkalmazása ugyan a várakozási időt nem csökkenti, azonban enyhíti a problémát: felkelti az emberek figyelmét, így kevésbé törődnek azzal, hogy várakozniuk kell.

2. Jó első benyomást kelt

Mint az a webdesingban is alaptétel: az első benyomás sokat számít. Az emberek pillanatok alatt megítélik a céged a weboldalad kinézete alapján. Egy jó animáció pedig nagyon sokat segíthet azon, hogy az első benyomás pozitív legyen.

De nem csak a használhatóságot érdemes javítani a jó első benyomás érdekében. Egyedivé is teheted vele a weboldalad. Egy érdekes animáció révén megkülönböztethetővé válik a weboldalad a konkurensekétől, és ezáltal azt üzeneted, hogy az általad kínált termékélmény is teljes egészében más, mint amit a többiektől kaphatnak.

3. Élőbbé teszi a felhasználói felületet

A kreatív animációk képesek arra, hogy a megszokott interakciókat élvezhetőbbé tegyék, és rábírják az embereket arra, hogy kapcsolatba lépjenek a felülettel. A részletekre való odafigyelés révén javítható a használhatóság, valamint vonzóbbá tehető a termék.

4. Érzelmeket vált ki

A felhasználók érzelmeire való odafigyelés sokat számít az interakcióknál. Az animációk használatával érzelmi kapcsolat alakítható ki az emberekkel, és megmutatja számukra, hogy a design mögött valódi emberek állnak.

5. Segít korrigálni a váratlan hibákat

Hibák mindig előfordulnak, akármennyire is törekszel a tökéletességre. Bármi is az okuk, ezek a hibák – és a kezelésük – jelentős hatással van a felhasználói élményre. Ugyanakkor egy hiba megfelelő kezelése a bukás pillanatának súlyát mérsékelheti, vagy akár pozitív irányba tolhatja. Tehát, amikor egy váratlan hibát vagy kénytelen jelezni a felhasználónak, akkor érdemes egy vicces animációt is bevetni, a helyzet rendbe tétele érdekében.

6. A bonyolult feladatokat könnyebbé teszi

Az animációk képesek arra, hogy egy összetett feladatot csábító élménnyé alakítsanak. Erre jó példa lehet a Maichimp által alkalmazott animáció, melyet az első kampány kiküldése során mutat. Empátiát jelenít meg a designban, amikor kombinálja az animált rajzot a poénos üzenettel. A Mailchimp itt képes arra, hogy enyhítse a feszültséget a felhasználóban, amikor az első e-mailjét küldi ki. És erre Te is képes lehetsz az animációk megfelelő alkalmazásával.

Soha se becsüld le tehát az öröm hatalmát, amikor a felhasználói élmény javításáról van szó. A különbség azon termékek között, melyeket szeretünk, és amelyeket inkább csak elviselünk gyakran csak az az öröm, melyet okoznak számunkra. Természetesen mielőtt elkezdenéd kialakítani az érzelmi kapcsolatot a felhasználóiddal, a webdesign alapokat rendesen le kell rakni.

Mikor és hol használhatsz animációkat?

Ideális esetben ezek az animációk nagyon visszafogottak, nem azért jelennek meg, hogy rájuk irányuljon a figyelem a fontos információk helyett, ugyanakkor bátorítaniuk kell a látogatókat, hogy megtegyék a következő lépést a konverziós úton.

Ha egy animáció visszafogott, akkor segít a felhasználónak megmutatni, hogyan is működik egy rendszer, miként tud vele kapcsolatba lépni. Az animációk a használhatóságot javíthatják, hiszen jelzik, mi történik a rendszerrel, miként fognak viselkedni a felület egyes elemei, valamint megmutatják a felhasználónak azt, hogy hol áll az információs térben.

Milyen mikrointerakciókról beszélhetünk, ahol animációt lehet bevetni:

• Felhívni a figyelmet arra, ha egy funkció ki- vagy bekapcsolható.
• Megmutatni a felhasználóknak, hogy a cselekvésük sikeres volt (például egy üzenet elküldése).
• Megmutatni a fontos információkat, például az árakat.
• Cselekvésre ösztönözni a felhasználókat, például azáltal, hogy az ikonokat animáljuk.
• Csúsztatási animációkkal egy kicsit feldobhatod a tartalmad és teljesen természetes hatásúvá teheted a csúsztatást.
• Lapozási animáció: akkor jelenik meg, amikor valamilyen átmenetet kell jelezni oldalak váltásánál. Ide tartozik azonban a görgetési visszajelzés is. Ezek a mikrointerakciók teszik láthatóvá a kapcsolatot a felhasználó számára a jelenlegi és az azt megelőző oldal között.
• Animált beviteli mezőkkel nagyobb kedvet csinálhatsz űrlapok kitöltéséhez.

Állapot-animáció vagy betöltési animáció

Az egyik legpraktikusabb használata az animációknak a betöltéseknél lehetséges. Senki sem szeret várni, de ha egy animációval jelzed a letöltést, feltöltést, mutatod a változást, akkor azzal egy kicsit lekötöd a felhasználókat, és kevésbé frusztráló eseményként élik meg a várakozást.

Az animációval egyedi élményt kínálhatsz a látogatóknak, vagy csak megmutathatod a márkád játékos oldalát. Például így:

Kisebb animációkkal felhívhatod a felhasználók figyelmét egyes weboldal-elemekre, és segíthetsz nekik ellazulni, miközben a weboldaladat használják. Ezek az animációk lehetnek interaktívak vagy sem, arra mindenképpen jók, hogy megállítsák a látogatók frusztrációjának fokozódását, miközben várnak a weboldal betöltődésére.

Minél jobban meg tudod lepni, le tudod nyűgözni a látogatóidat egy betöltési animációval, annál kisebb az esélye, hogy a vissza gombra kattintanak a böngészőben.

Visszajelzések

Az animációk gyakran segítenek abban, hogy egy látható visszajelzést adjon arról, hogy egy felhasználó cselekvést észlelt a rendszer. Egy sokszor látható példa erre a navigációs menü kinyílása, amikor a hamburger ikonra kattintunk.

A mozgással szemben egy statikus vizuális visszajelzést nem vesznek észre a felhasználók. Tehát például nem látják, ha egy webáruházban a bevásárlókocsi ikonnál változás történik, ha a „kosárhoz adás” gombra kattintanak. Ha viszont animálva van, akkor egyből felfigyelnek a mozgásra, így látják, hogy reagált a rendszer.

Az állapotváltozás közlése

A mozgás utalhat arra is, hogy a felület egy másik állapotba került. Például, egy módváltásnál. A különböző „módokat” néha nehéz a felhasználók felé kommunikálni, de egy animáció ezen is segít: a módváltást észlelhetővé teszi, illetve kifejezheti a módváltás lényegét is.

Milyen módváltásokról beszélhetünk? Például, amikor egy mobilos szövegszerkesztő alkalmazásnak van „szerkesztő” és „új hozzáadása” módja. Ha szerkesztő módban vagyunk, akkor egy ceruza ikont látunk, míg hozzáadás módban egy + jelet.

Akkor is hasznos az animáció, ha a váltás nem felhasználói cselekvéshez kapcsolódik, tehát például egy töltésjelző azt mutatja, hogy a rendszer még nem áll készen az adatok bevitelére. Ez lehet akár egy skeleton screen is (ami a felület drótvázát mutatja tartalom nélkül), ami nem teljesen statikus.

Navigáció

Egy összetett információs teret általában elég nehéz anélkül közvetíteni, hogy ne terhelnénk le a felhasználót vagy nem foglalna el túl nagy helyet a kijelzőn. Az például megterhelő lehet egy felhasználó számára, hogy átnézzen egy navigációs menüt vagy akár egy morzsamenüt, és ebből találja ki, hogy hol is jár az információs hierarchiában.

Habár egy animáció önmagában nem tudja helyettesíteni a menüt, azt jelezni tudja a felhasználónak, hogy milyen irányba induljon egy folyamaton vagy egy hierarchián belül. A mozgás által válik a navigáció intuitívvá és érthetőbbé.

Például, ha egy galériában jár, akkor a képekre kattintva, azok megnőnek és betöltik a kijelzőt. A zoom-mozgás által jelzik, hogy éppen merre tart a hierarchiában a felhasználó. De egy oldalra csúszást mutató animáció is jelzi a felhasználónak, hogy előre vagy hátra mozog egy folyamatban.

Az animációk abban is segítenek, hogy a felhasználó ne veszítse el a tájékozódási képességét egy oldalon, különösen mobileszközök esetében, ahol a kontextus könnyen elveszik a kisméretű kijelző miatt. Ha egy galéria vagy egy teljes kijelzős menü mozgás nélkül, hirtelen jelenik meg, akkor a felhasználó elveszhet, hiszen változás történt, de nem látja át, mi és hogyan történt: mozgás nélkül nem látja a kapcsolatot az oldal és az azt eltakaró menü között.

A mozgás, mint jelzés

Az animációk segítenek a felhasználóknak megérteni, hogyan lépjenek kapcsolatba a felhasználói felület elemeivel. Például a mozgás iránya jelezheti az elfogadható cselekvés típusát. Gondolj arra, amikor egy kártya a kijelző aljának irányából tágul a felső rész felé: ez azt jelzi, hogy lefelé húzással visszafordítható a folyamat, azaz bezárható a kártya. Ugyanígy, ha egy kártya jobbról érkezik a kijelzőre, akkor jobbra csúsztatással el is tüntethető.

Figyelemfelhívás vagy figyelemelterelés

Mivel az emberek nagyon érzékenyek a mozgás észlelésére, ezért az animációk könnyen felkeltik a felhasználók figyelmét. Egyfelől ez jó, másrészt azonban lehet rossz is, ha felesleges egy animáció és csak megzavarja a felhasználót a feladata elvégzésében. Sokan persze ezt kihasználják arra, hogy direkt eltereljék a felhasználó figyelmét.

Call to action gombok

A CTA-d azért van az oldaladon, mert azt szeretnéd, ha a látogatók rákattintanának. Ha animációval dobod fel, akkor nagyobb eséllyel fognak kattintani rá, vagy legalábbis kíváncsiak lesznek arra, hogy mi történik.

Horgonyszöveg animáció

Ezzel kreatív módon belecsempészheted a márkád egy nagyon egyszerű funkcióba. Vagy legalábbis feltűnőbben jelzed, hogy egy elem kattintható.

Dinamikus hátterek

Egy animált hátterű weboldal remek megoldás, ha ki akarsz tűnni az egyforma weboldalak tömegéből, ahogy például itt is teszik. Ugyanakkor, mint minden konvencionális megoldástól való eltérésnél, számolni kell a hatékonyság csökkenésével. Annak érdekében, hogy ez minimális legyen figyelned kell arra, hogy ne ess túlzásba az animációval. Ez nem csak megzavarja a felhasználókat, hanem az oldalad is lassíthatja.

Ne felejtsd el, hogy az animációnak ki kell egészítenie a weboldalt, nem pedig eltérítenie a felhasználót attól, amit tenni akar. És mielőtt belevágnál a teljes háttér animálásába, próbálkozz meg először kisebb részletek mozgatásával.

Rejtett elemek felfedése

Egy menü fontos része minden weboldalnak, ugyanakkor sok helyet elfoglalhat. Ilyenkor használunk rejtett menüt, ami csak akkor bomlik ki, ha a felhasználó is úgy akarja. Használhatsz animált lenyíló menüt, ahol az egyes elemek hoverre aktiválódnak, ahogy például itt látod.

Minden azon múlik, hogy mennyire vagy kreatív, amikor az animált menün dolgozol. A legegyszerűbb megoldás, amikor csak megváltozik a szín vagy a forma, ugyanakkor az lehetséges, hogy amikor az egérmutató az elem fölé ér, akkor kibomlik a menü vagy megjelenik egy plusz információ.

Sok helyen lehet például találkozni olyan képekkel a weboldalakon, melyek megfordulnak és így megjelenik az információ, ami a másik oldalukon található. Ezt használhatod egy rólunk oldalon, ahol a csapattagok fényképeihez érve azok megfordulnak és láthatóvá válnak az adatok róluk.

Karuszel

Ez talán a legegyszerűbb és legnépszerűbb megoldása az animációknak a webdesignban. Habár sokan nem kedvelik őket, illetve nem feltétlenül praktikus a használatuk, azonban egy adott weboldal-területen több információk képesek közölni, mint egyébként, némi mozgással vegyítve.

Arra érdemes figyelni, hogy amikor karuszelt készítesz, akkor add meg a lehetőséget a felhasználóknak arra, hogy ők is irányíthassák azt, vagyis szabályozzák, hogy melyik képet akarják látni. Ezen az oldalon is pontok jelzik az egyes képeket, miközben persze a lapozás automatikusan is működik:

A karuszelek mára olyannyira elterjedtek a weboldalakon, hogy a felhasználók szinte számítanak rájuk, ezért, ha a legalapvetőbb szinten akarsz animációt megjeleníteni a weboldaladon, akkor ezzel érdemes kezdeni. Bárhol bevethetsz karuszelt: akár a termékeid bemutatásánál, akár a felhasználói visszajelzések sorolásánál, stb. Bárhol, ahol kisebb helyen akarsz több információt megjeleníteni. Karuszelek kialakításáról itt írtunk bővebben.

Milyen legyen egy jó animáció?

Az animációk tehát sokat tudnak javítani egy termék vagy egy weboldal felhasználói élményén, és akár önmagukban is képesek megoldani design-problémákat. Ugyanakkor nem könnyű összehozni egy valóban jó animációt: sok gondolkodást és szakértelmet igényel. Nagyon vékony a határvonal az igazán jó és az idegesítő megoldások között. Úgyhogy, amikor animációban kezdesz gondolkodni, akkor mielőtt nekifutnál, az alábbiakat fontold meg!

Szándékos

A legfontosabb, hogy az animációidnak legyen valami célja. Annak nem sok értelme, hogy csak azért hozd létre őket, hogy valami mozogjon a kijelzőn, mert az jól néz ki. Az animációknak részt kell venniük a felhasználókkal folytatott kommunikációban.

Természetes

A való életben a legtöbb dolog nem feltűnik és eltűnik, ahogy a digitális világban alapértelmezett módon történne. Tehát, amikor valaminek két vagy három állapota van, akkor a két állapot közötti átmenet érzékeltetése könnyebbé teszi a felhasználó számára a változás lényegének megértését. Itt van rá egy példa:

Az animációnak fel kell hívnia magára a figyelmet, valamint világosan meg kell mutatnia a változás állapotait. A jól kialakított átmenet segít a felhasználóknak a megfelelő pontra figyelni a megfelelő időben. Az, hogy épp mire helyeződik a hangsúly, a céltól is függ. A jól megtervezett animáció révén a felhasználó nem veszik el az appban, nem azt érzi, hogy hirtelen valahol egész máshol jár, mint egy pillanattal korábban. Ez segít neki megtenni a következő interakciós lépést.

Az átmeneteknek be kell mutatniuk, hogy az egyes elemek miként kapcsolódnak. Akkor jó egy animáció, ha az újonnan megjelenő felületet összeköti azzal az elemmel, melyből kialakult. Erre jó példa, ahogy a Mac OS-ben lekicsinyíthetsz egy ablakot. Az animációban az első állapot jól láthatóan kapcsolódik a másodikhoz.

Emellett az is fontos emberek megszokták, hogy a tárgyaknak tömegük van, ami kihat arra, miként mozognak. Mozgás közben fokozatosan gyorsulnak, mielőtt elérnék az állandó sebességüket. Ezeket a jellemzőket figyelembe kellene venned az animációknál is. Ha nem teszed, akkor furcsának fognak tűnni a felhasználók számára.

Irányítja vagy csak megzavarja a felhasználót?

Az animációknak csökkentenie kell a felhasználók kognitív terhelését, ami azt jelenti, hogy kevesebbet kell gondolkodniuk egy feladat végrehajtása során. Segítenie kell abban, hogy a látogató megértse a felület felépítését, és így könnyebben használja azt.

Erre a legegyszerűbb példa egy hamburger menü, mely általában a bal felső sarokból nyílik ki. Ilyenkor világosan látszódnia kell, hogy honnan nyílik és hova tér vissza. Ha egy hamburger menünél nem használsz animációt, akkor a felhasználóknak maguknak kell kitalálni mindezt. Az sem jó persze, ha túlerőlteted az animációkat.

Az animációknak fontos szerepük van a látogatók figyelmének irányításában, hiszen az emberek mindig a mozgó tárgyakra figyelnek. Ezt pedig ki tudod használni, ugyanakkor, ha túl sok dolog mozog a kijelzőn, akkor már nem tudják mire figyeljenek és csak összezavarodnak.

Visszafogott

Gyakori hiba, hogy a felületeket túlzsúfolják animációkkal, túl sokszor jelennek meg, vagy túlságosan összetett interakciók készülnek. Pedig ha túl sok a változás a felületen, akkor az emberek összezavarodnak, és időbe telik nekik, mire kiigazodnak rajta. Ne felejtsd el, hogy minden mozgás felkelti a figyelmet, ezért a túl sok animációt káosznak érzékelik az emberek. Az összetett átmeneteknél legalább egy elem maradjon stabilan látható, hogy az emberek ne veszítsék el a talajt a lábuk alól.

De az sem jó, ha túl gyakran kell végignézniük egy animációt, miközben épp egy feladatot hajtanának végre. Lehet, hogy egyszer-kétszer érdeklődve megnézik, de amikor már századszor látják, pedig tennék a dolgukat, akkor idegesítővé válik. Ugyanígy nem érdemes túl hosszúra nyújtani az animációkat – még, ha Te minden pillanatát élvezed is a sajátodénak -, mert az embereket sokszor csak akadályozza. Ezért minél gyorsabb, annál jobb.

Akadás-mentes

Ha csak egyetlen elvet használsz ezek közül az animációk tervezésénél, akkor az legyen a sebesség. Ez a legfontosabb tényező, amikor animációt készítesz. Gyorsnak és pontosnak kell lenni, akadás nélkül kell működnie. A felhasználónak nem szabadna az animáció indulására várnia, ahogy a befejezésig is zökkenőmentesen kell eljutni. Az egyes állapotok között az animációknak gyorsan kell mozogniuk, hogy elkerüld a várakozást. Ugyanakkor még érthetőnek kell maradnia a változásnak. Ez számszerűsítve azt jelenti, hogy a felhasználói cselekvés után 0,1 másodperccel el kell indulnia, és lehetőleg ne legyen hosszabb 300 ms-nél.

Az animációknál is be lehet vetni azokat a megoldásokat, melyek segítségével gyorsabbnak látszik az animáció, holott nem az. Például egy skeleton screent mutatsz egy adott pillanatban, mikor még nem töltődött be a tartalom. Ezáltal a felhasználók számára gyorsabbnak fog tűnni a megjelenés, és nem érzékelik, hogy várniuk kell rá.

Kifejezi a személyiséged

Egy animáció arra is képes, hogy megmutassa egy márka személyiségét, ahogy azt a betűtípusok, színek, ikonok is teszik. Ezek együtt egy összehangolt vizuális identitást alakítanak ki. Persze annyiféle animációs stílus nincs, mint ahány szín, de ha az image-edhez illő stílust találsz, akkor az javítja a képet, ami a felhasználóban keletkezik a márkádról.

Példák arra, mitől lesz kiváló egy animáció

Mindezek alapján tehát lássunk néhány példát arra, hogy miként lesz egy átlagos animációból valóban kiváló, a felhasználói élményt javító animáció. A példákat Pablo Stanley gyűjtötte össze, aki az elkészítésükhöz felhasználta a Material Motion és az IBM animációs elveit, valamint a The UX in Motion Manifesto-ban foglaltakat. Ezekből számodra is világosan ki fog derülni, hogy miért is olyan nagyszerű és hatékony egy jól kidolgozott animáció.

1. Így csússzanak a tabokon elhelyezett tartalmak!

Egy átlagos animáció már attól is animáció, hogy a tartalmak elhalványulnak és felerősödnek, amikor egyik állapotból a másikba váltanak. Ugyanakkor ennél is jobb megoldás, amikor látni lehet az állapotok közötti átmenetet, illetve mindez a tartalmi résznél is kivitelezhető.

2. Kapcsold össze a két állapotot!

A lényeg itt az, hogy nem elég az átmenetet megmutatni két elem között, hanem a kapcsolatot is jelezni kell az animációval. Ilyen módon:

Tehát, ha van valami közös elem két állapot esetében, akkor azzal kapcsold össze őket az animáció során.

3. Használd a „vízesés” effektet az animációknál!

Vagyis nem feltétlenül elég az, ha egy elem fokozatosan változtatja a helyzetet és az átlátszóságát, hanem jobb megoldás, ha mozgás jelenik meg.

Ez azt jelenti, hogy a tartalom egyes darabjai némi késleltetéssel jelennek meg. Persze minden egyes apró elemnél nem érdemes ezt az effektet bevetni, célszerű megtartani nagyobb tartalmi csoportok megjelenítésére. Az animáció legyen gyors: a Google javaslata szerint az egyes elemek megjelenése között ne teljen el 20ms-nél több idő.

4. A megjelenő tartalom tolja el a többi tartalmat!

Egy animáció megjelenhet úgy, hogy mozognak és feltűnnek elemek, azonban úgy is meg lehet oldani, hogy a megjelenő új elemek szemmel láthatóan hatást gyakorolnak a már jelen lévő elemekre.

5. Legyen látható, hogy hová tartozik a menü!

Egy animációnál megjelenhet úgy a menü, hogy a gomb irányából egyszer csak felbukkan, ugyanakkor jobb megoldás, ha a gombból mintegy „kinő”, azaz láthatóvá válik a kapcsolat vele.

6. Használd a gombokat a különböző állapotok jelzésére!

Egy gomb lenyomására bekövetkező változást meg lehet mutatni úgy is, hogy látszik az interakció, majd egy szöveggel is jelzed, hogy mi történik. Ugyanakkor maga a gomb is kifejezheti a változást:

Vagyis mint látható, a gombon belül történik a jelzése az állapot változásának. Tehát a lényeg itt az, hogy azt a felületet használd jelzésre, mellyel a felhasználó amúgy is kapcsolatba lép. Jó megoldás, ha változtatsz a gomb színén, majd a végén megerősíted a végeredményt.

7. Hívd fel a figyelmet arra, ami fontos!

Mint arról már sokat beszéltünk, egy jó design a színek, a méret, a negatív tér használatával felhívja a felhasználó figyelmét a fontos dolgokra. Ugyanakkor animációt is be lehet vetni ennek érdekében, mégpedig úgy, hogy közben ne váljon zavaróvá.

Vagyis, amikor a felhasználónak valami fontosat kellene tennie a weboldaladon, akkor próbáld animációval is felhívni rá a figyelmét. Kezd egy finom megoldással, majd fokozatosan erősítheted a színt, a méretet és a sebességet, attól is függően, hogy mennyire fontos számodra a kiváltani kívánt cselekvés. Azt azonban ne feledd, hogy csak ritkán használd ezt az eszközt, mert minél többször jelenik meg az oldaladon, annál inkább csökken a hatása, és annál inkább fogja idegesíteni az embereket.

Milyen legyen egy betöltési animáció?

A betöltési animációk mutatják meg a felhasználóknak, hogy valami éppen történik az oldalon, amire várni kell. Ideális esetben csökkentik bennük a várakozás miatt kialakuló feszültséget. Már az úgynevezett 1.0-ás web korszakában is jelen voltak a betöltődést jelző animációk: Fireworks, Flash és persze gif alapú működésre is akadt példa. 2010-ben, a CSS3 indulásával ez átvette az előbbi technológiák helyét, a designerek pedig elkezdtek a Photoshop Cs5-ben betöltési animációkat tervezni.

Milyen típusai vannak?

A betöltési animációk alapvetően három típusba sorolhatók be.

Folyamatjelző sáv

Amit elsősorban akkor használnak, ha a betöltési időt is jelezni lehet. Ez történhet számmal vagy pusztán vizuális jelzéssel, és lehet egyszerű vagy akár kreatív megoldás (hogy melyiket válaszd, arra később még kitérünk), a lényeg, hogy megmutassa, mennyi ideig fog tartani egy művelet. A Gmail például nem jelzi számmal, hogy hol tart a betöltés, mégis látjuk, hogy mennyi van hátra.

Spinner vagy végtelenített animáció

Ezeket akkor használjuk, ha a betöltési idő ismeretlen. Lehet ez egy egyszerű, alapértelmezett spinner, vagy egy ötletes animáció, a fontos az, hogy megmutassa: zajlik valami a motorháztető alatt. Kreatív megoldásoknál használhatók a márka vizuális elemei, így támogatva brand megjelenítését. Általában loopolt animációkat alkalmaznak megoldásként.

Skeleton screen

A skeleton screen esetében maga a weboldal lépésről-lépésre történő betöltődése jelzi a haladást. Az oldalra érkezve csak a placeholderek láthatók, melyek fokozatosan töltődnek meg szöveggel és képekkel. Ezt a megoldást használja a Facebook, a LinkedIn vagy a YouTube is többek között, mivel általában jobb felhasználói élményt jelent, mint a fent említett megoldások.

Mire figyelj?

Minél kevesebb ideig legyen látható

Egyetlen felhasználó sem szereti azzal tölteni az idejét, hogy egy betöltési animációban gyönyörködik, bármilyen ötletes is. A weboldal betöltési idejének javítására fordítsd tehát az időd nagyobb részét, és ne az animáció kialakítására!

Adjon időbecslést

A betöltési animációhoz kapcsolódjon egy becslés a hátralévő időre vonatkozóan. De legalábbis jelezze vizuálisan, hogy hol tart a betöltődés folyamata. Ezzel csökkenthető a várakozás miatti felhasználói frusztráció.

Mondd el, miért kell várni!

Az ugyanis nem mindig egyértelmű a felhasználók számára, hogy egy weboldal vagy egy app valamely funkciója miért nem működik azonnal.

Tedd minél kevésbé frusztrálóvá a várakozást!

Ehhez kellenek a kreatív megoldások, melyek felkeltik a felhasználók figyelmét.

Kevesebbnek érezze a várakozási időt

Ez kapcsolódik az előző ponthoz, ugyanis, ha sikerül felkeltened a felhasználó érdeklődését a várakozás közben, akkor úgy érzi, hogy gyorsabban telik az idő. Megteheti ezt egy szokatlan színkombináció, egy kreatív vagy kedves ötlet.

Mutasd meg a márkát!

Ha már a felhasználónak várnia kell, miért ne használnád ki ezt az időt? Nem kell persze egyből ajánlatokkal bombázni, ugyanakkor érdemes az animációt összhangba hozni a márkád vizuális megjelenésével.

Egyszerű legyen vagy kreatív?

Mára jelentős teret hódítottak a látványos, kreatív betöltési animációk, melyeknek meg van az az előnyük, hogy a várakozás ideje alatt lefoglalják a felhasználót, így az kevésbé lesz türelmetlen. Egyre több cég engedheti meg magának, hogy figyeljen az ilyen részletekre is.

Ugyanakkor a legtöbb alkalmazás vagy weboldal esetében még mindig egyszerű animációkkal találkozol, mivel ezek megjelenítése kevesebb erőforrást igényel a rendszertől, ami különösen fontos a weben. Ezeket az alapértelmezett vagy akár nyitott forráskódú betöltés-jelzőket könnyebb alkalmazni, mint egy egyedi animációt megtervezni és implementálni az oldalba.

Miért lassíthatják le a felhasználókat az animációk? És mi a megoldás?

Ha rosszul használod a weboldaladon az esztétikai megfontolások alapján létrehozott animációkat, akkor azok megakasztják a felhasználókat és lelassítják őket a tartalom fogyasztásában. Ez pedig idegesíti őket, ami nem jó a felhasználói élmény szempontjából.

Azt már régóta tudjuk, hogy egy weboldal lassú betöltődése rontja annak használhatóságát, zavarja az embereket, és befolyásolja azt a képet, amit az oldalról és a cégről alakítanak ki. Amikor az idő csak szűkösen áll a rendelkezésükre, akkor még a legkisebb késlekedés is frusztráló lehet az információ megszerzésében.

A jelentős válaszidő általában a nagyméretű képeknek, felesleges funkcióknak vagy a szerver késésének köszönhető az összetett adatfeldolgozás miatt. Ugyanakkor a Nielsen Norman Group elvégzett használhatósági tanulmányában egy újabb okra lett figyelmes: mégpedig azon vizuális effektre, melynek használatakor csak a görgetés után jelenik meg egy bizonyos szöveg az oldal adott részén.

Az emberek szavaiból kiderült, hogy nem igazán tetszik nekik, hogy csak azután áll össze egy oldal tartalma, miután odagörgettek. Ahogy az sem, hogy minden egyes rész külön töltődik be. Hiszen néha csak annyit szeretnének, hogy lássák az információkat, mindenféle látványos animáció nélkül. A lassulásnak tehát bármilyen oka is van, az eredmény mindig ugyanaz: frusztráció és romló felhasználói élmény.

Az esztétikai célból alkalmazott animáció

Animációkat gyakran csak azért dobnak be a weboldalakon a designerek, hogy felhívják a figyelmet bizonyos elemekre a felületen, vagy modern és innovatív benyomást keltsenek az adott cégről, márkáról. Valóban, a finom animációk és az átmenet-effektek vizuálisan izgalmasabbá tehetik a weboldalt, illetve pozitív hatást gyakorolnak arra, hogy a felhasználó miként értékeli az adott céget.

De csak abban az esetben, ha nem zavarják meg, nem térítik el a felhasználót, és csak alkalmanként a megfelelő helyeken alkalmazod az animációkat. Ilyenkor a jó animációk növelik a felület vonzóságát, vagyis érvényesül az esztétika pozitív hatása a használhatóságnál.

A görgetésre aktiválódó animációk mostanában igen népszerűvé váltak, de mint minden trendnél, itt is könnyű hibákat elkövetni. A rossz vagy a túlzott használat miatt ezek az animációk ahelyett, hogy lenyűgöznék az embereket, csak felidegesítik őket: a felhasználót várakozásra kényszerítik, amíg a szöveg betöltődik az oldalon. (Ezzel párhuzamosan pedig rámutatnak a felhasználói korlátokra a technológiai tudással kapcsolatban, hiszen kiderül, hogy az emberek nem tudnak különbséget tenni a valódi lassúság, illetve a vizuális effektek által okozott lassulás között.)

Ettől még persze nem minden görgetés által aktivált animáció rossz. A kifinomult megoldások gyakran észrevehetetlenek maradnak az NNG tanulmányai szerint. Akkor jó a megoldás, ha nem vonja el a figyelmet a tartalomról. A jó animáció tervezése tehát azt jelenti, hogy meg kell teremteni a megfelelő egyensúlyt annak érdekében, hogy az animáció észrevehető, mégis diszkrét maradjon. Ezáltal ne térítse el a felhasználók az adott feladattól, ne váljon idegesítővé vagy állandóan ismétlődővé.

Hogyan hozz létre jó görgetés által aktivált animációkat?

Vedd figyelembe a kontextust!

Amikor animációt szeretnél használni a szövegeid megjelentetésénél, akkor mindig gondold át a weboldal célját, és hogy mi az elsődleges feladat, amit a felhasználók végre akarnak ott hajtani. Azokon az oldalakon, ahol az emberek számukra különösen fontos feladatokat akarnak végrehajtani (ilyen lehet például egy orvosi vagy pénzügy oldal), nagyon a célra összpontosít a közönség. Ilyenkor könnyebben megzavarják őket a felesleges design-trükkök, mivel ezek csak az idejüket vesztegetik. A feladatukra fókuszáló felhasználók nem akarják, hogy lenyűgözze őket a weboldal a designjával, egyszerűen csak válaszokat, megoldásokat akarnak.

Másrészt ott vannak azok az oldalak, melyek például szórakoztatással, művészettel foglalkoznak. Olyan oldalak, ahol az emberek élveznek egy-egy váratlan és érdekes vizuális trükköt. Például, ha egy múzeum weboldalán nézelődnek, akkor nem egy speciális információ után kutatnak, csak annyit akarnak tudni, hogy mit kínál számukra a múzeum. Ilyenkor nem sürgeti őket egy feladat, nem lebeg a szemük előtt egy fontos cél.

Ugyanakkor ilyen esetekben is fontos figyelembe venni, hogy a felhasználók az útjuk során hányszor találkoznak animációkkal. Egyszer vagy kétszer lehet érdekes egy áttűnési-effekt a görgetés során, de ha túl sokszor ismétled, akkor unalmassá válik, és elkezdi próbára tenni a felhasználó türelmét. Ebben közrejátszik az is, hogy az embereknek nincs közvetlen befolyásuk az animációk megjelenésére, azok indirekt módon bukkannak fel a görgetés hatására.

És míg egy-egy animáció csak kismértékben lassítja le a felhasználót, addig ha ezekből több van, akkor a hatásuk már összeadódik, és igencsak zavaróvá válhatnak. Itt érdemes emlékezni arra, hogy egyetlen másodpercnyi lassulás is elég ahhoz, hogy azt a felhasználó felfigyeljen rá, és azt érezze, hogy ki van szolgáltatva a rendszernek.

Csak a másodlagos tartalomnál használj görgetés által aktivált animációt!

Annak érdekében, hogy csökkentsd az animációk esetleges káros hatását, célszerű ezeket elsősorban a másodlagos, támogató tartalmaknál alkalmazni, és nem a fő szövegben. Ha ilyen módon használod az animációt, akkor az emberek nem kényszerülnek arra, hogy várniuk kelljen a weboldal minden részének megjelenésére, így folytatni tudják az olvasást, miközben az animáció vizuális-esztétikai hatásai továbbra is érvényesülnek.

Mivel a szöveg az a tartalmi rész általában, mely a fő információhordozó minden weboldalon, ezért különösen fontos, hogy ne akadályozzuk a hozzáférést.

A görgetés által aktivált animációk csak egyszer jelenjen meg

A görgetés által aktivált effektnek csak egyszer kellene betöltődnie: amikor a felhasználó először görget le a weboldalon. Ha azonban felgörget, majd újra le, akkor a tartalmaknak már animáció nélkül kellene megjelenni a számára. Ez fontos, erre minden esetben figyelj!

Összegezve tehát elmondható, hogy az animációk remek eszközt nyújtanak a figyelem felkeltésére és a márka erősítésére, de csak korlátozottan alkalmazhatók. A designerek és a fejlesztők is szeretik a csúszó, eltűnő vagy másféle áttűnést produkáló tartalmi elemeket, de azt nem szabad elfelejteni, hogy ezek az effektek inkább kockázatot hordoznak a felhasználói élményre nézve, mintsem segítséget jelentenek.