Animáció 3 perc olvasás
Mikrointerakciók: apró visszajelzések
Egy gomb, amely finoman reagál. Egy mező, amely jelzi, hogy jól töltötték ki. A mikrointerakciók a weboldal legkisebb mozgásai, mégis ezekből áll össze az érzés, hogy az oldal gondosan készült.
A mikrointerakció egyetlen, apró eseményre adott válasz: egy kattintásra, egy mező kitöltésére, egy kapcsoló átbillentésére. Nem nagy animáció, csak egy rövid, néhány tized másodperces mozgás vagy színváltás. Mégis, ezek adják az oldal „tapintását”.
Miért számítanak?
A való világban minden tárgy visszajelez: a gomb kattan, a kapcsoló átbillen, az ajtó ellenáll. A képernyőn ezt nekünk kell megadnunk. Ha egy kattintásra nem történik semmi látható, a látogató bizonytalan lesz: működött? kattintsak még egyszer?
A jó mikrointerakció erre a kérdésre válaszol, még mielőtt feltennék.
A négy elem
Minden mikrointerakció négy részből áll:
- Kiváltó ok – mi indítja? Kattintás, egérmozgás, görgetés, egy mező elhagyása.
- Szabály – mi történik ilyenkor?
- Visszajelzés – mit lát vagy érez ebből a látogató?
- Ismétlés – mi történik másodszorra, tizedszerre? Ugyanaz, vagy halkabb?
Példák, amelyek működnek
- Gomb: egér fölött enyhén kiemelkedik vagy fényesebb lesz, lenyomáskor egy hajszálnyit besüpped.
- Űrlapmező: a kitöltés közben halk keret jelzi, hol tart a látogató; hibánál a mező mellett, érthető szöveggel jelenik meg, mi a gond.
- Küldés gomb: a kattintás után jelzi, hogy dolgozik, majd egyértelműen visszaigazol.
- Kártya: egér alatt finoman megemelkedik, a mutató helyén halvány fény gyullad.
- Menü: nyitáskor abból az irányból érkezik, ahonnan megnyitották.
Az időzítés titka
A mikrointerakciók rövidek. Ha egy gombreakció fél másodpercig tart, már lassúnak érződik. A tapasztalat szerint a legtöbb ilyen mozgás egy-két tized másodperc körül érződik természetesnek, a nagyobb elemek (menü, panel) mozgása lehet valamivel hosszabb.
A gyorsulás is számít: a természetes mozgás nem egyenletes, hanem lendülettel indul és puhán áll meg. Ettől érződik egy animáció „drágának”.
Amit érdemes elkerülni
- Túl sok egyszerre: ha minden elem reagál mindenre, az oldal nyugtalan lesz.
- Csak egérre tervezés: telefonon nincs „fölé viszem az egeret”. Erre a helyzetre külön kell gondolni.
- Visszajelzés csak színnel: aki nem látja jól a színeket, annak egy ikon vagy szöveg is kell.
Mérték és egység
A mikrointerakciók ereje az egységességben van. Ha minden gomb ugyanúgy reagál, minden kártya ugyanúgy emelkedik, a látogató gyorsan megtanulja az oldal „nyelvét”. Ez a láthatatlan rend az, amit prémium hatásként érzékelünk.
A főoldalunk „Próbálja ki” blokkjában néhány ilyen apró mozgást ki is próbálhat. Ha saját oldalára szeretne hasonlókat, az animáció és interakció oldalon írjuk le, hogyan dolgozunk – vagy írjon nekünk.
Írta az e-bundesign csapata.