Mikrointerakciók – Mikor, hogyan és miért?
Amikor a legtöbb ember meghallja ezt a kifejezést, feltűnő animációk, mozgó betöltési képernyők, balra-jobbra billenő fejlécek juthatnak eszébe, és a lista a végtelenségig folytatható. A mikrointerakciók azonban sokkal többet jelentenek puszta vizuális elemnél.
Amikor a legtöbb ember meghallja ezt a kifejezést, feltűnő animációk, mozgó betöltési képernyők, balra-jobbra billenő fejlécek juthatnak eszébe, és a lista a végtelenségig folytatható. A mikrointerakciók azonban sokkal többet jelentenek puszta vizuális elemnél. Konkrét célt szolgálnak, szemben a pusztán látványos, öncélú animációkkal.
A mikrointerakciók segítik a felhasználókat a felületen való navigálásban, intuitívabbá téve a használatát, és ezáltal magasabb szintre emelve a felhasználói élményt. Ezt rövid animációkkal, hangeffektusokkal vagy akár tapintható visszajelzésekkel érik el.
Ha definiálnánk, talán így lehetne a legjobban megfogalmazni:
"A mikrointerakció egy kis válasz, amelyet egy kiváltó esemény vált ki a felületen. A legtöbb esetben vizuális, de hangalapú is lehet. Ennek létrejöttéhez a felhasználónak interakcióba kell lépnie az interfésszel, vagy az interfésznek interakciót kell kérnie."
Elsőre bonyolultnak tűnhet, de nézzük meg közelebbről:
KIVÁLTÓ ESEMÉNY ➡ MIKROINTERAKCIÓ ➡ VISSZAJELZÉS
Ez a három összetevője a jó mikrointerakciónak.
A mikrointerakciót minden esetben kiváltja valamilyen esemény. Ezután a mikrointerakciónak futnia kell, és releváns visszajelzést kell adnia a felhasználónak.
A kiváltó esemény a felhasználótól vagy a rendszertől is származhat. Kiváltó esemény nélkül azonban nem beszélhetünk mikrointerakcióról. Ez később még fontosabb lesz, amikor megvitatjuk, mi különbözteti meg a mikrointerakciót a puszta animációtól.
Nézzünk egy gyakorlati példát:
Amikor a felhasználó az egeret egy gomb fölé viszi, a gomb színe megváltozik. Ebben az esetben a kiváltó esemény a gomb fölé mutató egér. A mikrointerakció a gomb színének változása, ami azt sugallja a felhasználónak, hogy a gombbal nem csak grafikus elemként, hanem interakcióba is lehet lépni. Ez a visszajelzés.
Vagy képzeljünk el egy e-mail programot. Megírjuk az e-mailt, a küldés gombra kattintunk, és a rendszer egy rövid, suhanó hanggal jelzi, hogy az üzenetet valóban elküldtük.
Kiváltó esemény: Kattintás a küldés gombra,
Mikrointerakció: Suhanó hang,
Visszajelzés: Az e-mailt elküldtük.
Egy másik ismerős eset, amikor új üzenet érkezik egy alkalmazásba, és az alkalmazás ikonján egy számmal ellátott piros kör jelenik meg. Ebben az esetben a kiváltó esemény egy új üzenet érkezése, a mikrointerakció a piros kör a számmal, a visszajelzés pedig az, hogy új e-mail érkezett.
Tehát különféle esetekben használhatjuk őket, de mik ezek az esetek pontosan?
Visszajelzés a rendszer állapotáról:
- Képernyők betöltése (a rendszer betöltődik, nincs lefagyva)
- Elküldött e-mail (suhanó hang vagy rövid animáció)
- A beírt karakterek jelzése (pl. jelszó megadásakor)
Változások kiemelése:
- A jelölőnégyzet be van jelölve (vizuálisan jelzi, hogy valamit kijelöltek)
- Egy kapcsoló átkapcsolása (jelzi, hogy más állapot lett beállítva)
- Új üzenet érkezett (piros jelvény számmal)
Cselekvésre ösztönzés:
- Hozzájárulás jóváhagyása szükséges (a felületen kiemelve a kötelező szakasz, amely jelzi, hogy az elfogadásig a felhasználó nem léphet tovább)
- Útmutatás egy folyamaton (ha a felhasználó túl sokáig vár egy folyamat során, jelezze a felületen, hogy hogyan tud továbblépni. Pl. a tovább gomb mozog/színt vált, stb.)
Mindezen példák után talán magunk is meg tudjuk válaszolni a kérdést:
Mi különbözteti meg a mikrointerakciót az animációtól?
"Ami felhasználói interakciót igényel és megkönnyíti a megértést, az a mikrointerakció. Ami kizárólag a vizuális élményt szolgálja, az az animáció."
Vagyis ha csak azért animálunk egy elemet, mert szerintünk attól szebb lesz az oldal, akkor az nem lesz mikrointerakció.
Bizonyára sokan emlékszünk a 2000-es évek elejére, amikor a lelkes webdizájnerek GIF-animációkkal töltötték meg az oldalakat, és annyi minden mozgott a kezelőfelületen, hogy az animációk között nehéz volt felismerni a tényleges tartalmat. Ez senkinek nem célja, ezért óvatosan bánjunk az önkényes animációkkal!
Oké, de mi a helyzet a mikrointerakciókkal? Tudjuk túlzásba vinni őket? A rövid válasz: igen, ezért van itt néhány irányelv, amelyet figyelembe kell venni a mikrointerakciók tervezésekor.
Hogyan tervezzünk mikrointerakciókat?
- A mikrointerakcióknak legyen céljuk: támogassák az élményt, ne vonják el róla a figyelmet!
- Valaminek nem szabad megmozdulnia csak azért, hogy "menőnek" tűnjön. A céltalan mozgás csak összezavar.
- Használjunk rövid, célzott animációkat, amelyek hatékonyan közvetítik az információkat.
- A mikrointerakció is design elem; illeszkednie kell a márka identitásához, és része kell legyen a design systemnek.
És talán a legfontosabb szabály:
"A mikrointerakciók nem helyettesítik a gondos tervezést, egy folyamatnak/interfésznek könnyen érthetőnek, intuitívnak és mikrointerakciók nélkül is könnyen használhatónak kell lennie. Ha az alap jó, csak akkor tudjuk mikrointerakciókkal magasabb szintre emelni az élményt."
Jó tervezést kívánok!