Keresés
Header Háttér

Webshark Blog

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

2018-03-100 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ó?

1. 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:

2. Fokozatos

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.

3. Összekapcsol elemeket

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.

4. Gyors

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.

5. Világos

Gyakori hiba, hogy a felületeket túlzsúfolják animációkkal, 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.

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.