A UX dizájnban az animációk használata folyamatos vita tárgyát képezi, ugyanis a tervezés során a legfontosabb feladat, hogy megtaláljuk az egyensúlyt, ahol teljesül a pozitív felhasználói élmény és a zökkenőmentes interakció biztosítása. Sok egyéb trendhez hasonlóan ugyanis itt is előfordulhatnak melléfogások, hiszen nem egy olyan weboldal vagy applikáció létezik, ahol az animáció lassítja a működést, idegesíti a felhasználókat vagy annyira indokolatlan a létezése, hogy nem ad hozzá az élményhez.

Ahelyett, hogy az animációra dekorációként tekintenénk, a funkcionális szerepét kell szem előtt tartanunk. A tervezésnél elemezni kell a használhatóságára gyakorolt hatását, de ha semmilyen pozitív hatást nem látunk, át kell gondolnunk, hogy valóban szükség van-e rá. Cikkünkben megnézzük, milyen lehetséges felhasználási módjai lehetnek az animációknak.

Feedback animáció

A visszajelzésre szolgáló animáció szerepe, hogy tájékoztassa arról a felhasználót, ha egy művelet sikeres vagy sikertelen volt. Ez a megoldás a való életben is létező interakciókra épül: például, ha megnyomunk egy gombot, akkor világít, ha nem működik a kávéfőző, akkor kijelzi a hibát stb.

Ilyen animációkkal leggyakrabban helyfoglalásnál, jegyvásárlásnál találkozhatunk. Koncertjegy vagy mozijegy vásárláskor kiválaszthatod a székedet, amit szintén fel lehet dobni animációval, majd a fizetés ellenőrzésénél szintén animáció jelezheti a várakozást, a végén pedig a művelet sikerességét.

Folyamatjelző animáció

Ha egy művelettel várakoztatnod kell a felhasználókat, akkor szintén érdemes animációt alkalmazni. Nem csak szórakoztatásra alkalmas, hanem segít a felhasználóknak megérteni a folyamatot, ami a háttérben zajlik. Ha jól csinálod, akkor ez megoldás növelheti az appod hitelességét is, hiszen azt láttatja, hogy munka zajlik a háttérben.

Például ha egy kalóriaszámláló appról beszélünk, akkor több lépést tehetsz az animációdba: bevitt adatok feldolgozása – ideális testsúly kiszámolása – napi kalóriabevitel kiszámolása – sport célok ajánlása stb. Minden lépéshez különböző grafikákat rendelhetsz, amelyek animálva egymást követhetik. Ha egy futóalkalmazást nézünk, akkor a futás indításakor az app jelezheti a helyszín bemérését, illetve visszaszámolhat, hogy időt adjon a felkészüléshez.

Betöltési animáció

Ez az egyik legelterjedtebb mobil animáció. A folyamatjelző animáció altípusaként definiálható, mivel arról tájékoztatja a felhasználót, hogy a betöltési folyamat aktív.

Tekintetet irányító animáció

Ez a fajta animáció támogatja az általános vizuális hierarchiát a mozgással, amely megragadja a felhasználó figyelmét, és a legfontosabb részletre irányítja. A szórakoztatás mellett óriási szerepe van a navigálásban, hiszen időt spórol a felhasználóknak a képernyő átfutása során.

Egy ételszállító app esetében ki lehet hangsúlyozni a napi kedvezményeket, felhívhatjuk a figyelmet a közeli éttermekre, a rendelés utolsó lépéseinél segíthetünk abban, hogy “megmozgatjuk” a rendelés elküldése gombot.

Átmenet animáció

Szintén gyakran használt megoldás, amit akkor használunk, ha mondjuk egyik menüpontból átlépünk a másikba, jobbra, balra vagy le- és felhúzzuk a képernyőt. A legismertebb példa erre, amikor az Instagram story készítése során felhúzzuk a képernyőt, hogy GIF-eket és emojikat helyezzünk el a képen. Nem csupán stílust és eleganciát ad az appodnak, hanem sokkal légiesebbé, könnyedebbé teszi a felületet és nagyobb tér illúzióját kelti. 

Marketing animáció

A márkaépítés integrálása a felhasználói felület tervezésébe nagy szerepet játszhat a brand építésében. A legtöbb esetben a logók, kabalák animációját alkalmazzák az üdvözlő képernyőkön. Lényege, hogy felhívja a figyelmet a márka vizuális jeleire. A Duolingo remekül alkalmazza ezt a megoldást, ugyanis ötvözi a folyamatjelző és a marketing animációkat, így ha szintet léptél a nyelvtanulásban, akkor táncoló karakterek ünneplik a sikeredet. És ki ne akarná folytatni a tanulást ilyen lelkes szurkolótábor mellett?

Amennyiben tetszettek a fenti megoldások, és te is olyan appot szeretnél, ami helyesen alkalmazza a fenti megoldásokat, keress minket bizalommal!

Kérj ajánlatot még ma!

Forrás: uxplanet.org