Keresés
Header Háttér

Webshark Blog

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

2017-11-200 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.

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.