Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-11-280 komment

Mikor és hogyan érdemes animációt használnod a weboldaladon?

Egy webdesign elkészítése során elsősorban a használhatóságra koncentrálunk, hiszen ezáltal képesek könnyen és gyorsan elérni a céljaikat az a felhasználók. Ugyanakkor a felhasználói élmény többet jelent, mint a maximális használhatóság elérése. A jó design ugyanis gyönyörködtet. Erre pedig nagyon alkalmasak az animációk a weboldalon.

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 a használhatóságot. Általában két esetben használunk a felhasználói élmény erősítésére animációt:

  • 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.

Miért is lehet hasznos számodra animációk alkalmazása?

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.

(Forrás: dribbble.com/shots/1673204-Submit-Button)

(Forrás: dribbble.com/shots/1673204-Submit-Button)

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.

(Forrás: https://dribbble.com/shots/2829339-loading)

(Forrás: https://dribbble.com/shots/2829339-loading)

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.

(Forrás: dribbble.com/shots/2597126-404-Got-Lost)

(Forrás: dribbble.com/shots/2597126-404-Got-Lost)

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.

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.

Ahol zavaró az animáció

Ahol zavaró az animáció

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.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.