Mikrointerakciók és átmenetek

Célok

A lecke végére meg tudod különböztetni a feladatot segítő mikrointerakciót a puszta dekorációtól. Tudatosan megtervezed, mit jelez egy átmenet, mennyi ideig tart, és hogyan marad kezelhető mozgásérzékeny vagy figyelemben korlátozott felhasználók számára is.

Miért a „kis” dolgok számítanak?

A felhasználó bizalma gyakran apró jelzésekből áll össze: a gomb „megmozdul”, a mező zöldre vált, a lista frissül. Ha ezek hiányoznak, a felhasználó nem tudja, megtörtént-e a művelet, és újra kattint, vagy elbizonytalanodik. Ha túl sok és túl látványos van belőlük, lelassítják a munkát és elvonják a figyelmet. A mikrointerakciók tervezése ezt a két szélsőséget egyensúlyozza.

Kis visszajelzések, nagy bizonytalanságok

A mikrointerakció rövid, egyetlen felhasználói művelethez vagy állapothoz kötött visszajelzés. Négy rész írja le:

1. Kiváltó (trigger): mi indítja? (kattintás, rámutatás, adatbevitel, rendszeresemény)
2. Szabályok: mi történik? (a mező érvényes-e, a mentés sikerült-e)
3. Visszajelzés: mit lát vagy hall a felhasználó? (színváltozás, ikon, szöveg, rezgés)
4. Hurok / mód: meddig tart, ismétlődik-e, mikor ér véget?

Példák: a „Mentés” gomb betöltő állapota; a jelszómező erősségjelzője; a „Kedvenc” szív kitöltődése; a lista frissülése új elem hozzáadása után.

Jó mikrointerakció tesztje: ha kivennéd, a felhasználó kevésbé értené, mi történik? Ha nem, dekoráció.

Átmenetek

Az átmenet két felületi vagy rendszerállapot közötti vizuális változás. Segíthet a változás követésében: például egy kártya részleteinek megnyitásakor jelzi, hogy ugyanannak az elemnek a mélyebb nézete érkezik. Funkciói:

• Folytonosság: látszik, honnan hova jutottunk (a kártya kinyílik, nem „ugrik”).
• Fókuszvezetés: a tekintet a változásra irányul.
• Kapcsolat: látható, hogy két elem összetartozik.

Ha azonban túl hosszú, túl gyakori vagy nem kihagyható, lassítja a rutinfeladatot és zavaró lehet. A mozgás soha ne legyen a tartalom egyetlen közvetítője.

Időzítés és vezérlés

A jó átmenet rövid, kiszámítható és arányos a művelettel. Néhány iránymutató:

• Azonnali válasz: kb. 0,1 másodperc alatt a felhasználó még azonnalinak érzi a választ (Jakob Nielsen válaszidő-határai szerint). Egy gomb lenyomott állapotának ezen belül kell megjelennie.
• Folyamatos gondolkodás: kb. 1 másodperc az a határ, ameddig a felhasználó megszakítás nélkül követi a munkáját; ennél hosszabb várakozásnál jelezni kell, hogy dolgozik a rendszer.
• Kisebb elemek átmenete: jellemzően néhány száz ezredmásodperc (nagyságrendileg 100–300 ms). A pontos értékeket a platform tervezési irányelvei (például Material Design vagy Apple Human Interface Guidelines) adják; ellenőrizd az aktuális ajánlást, mielőtt számot kötsz a tervbe.
• Összetett átmenetek: hosszabbak lehetnek, de ne tartsák fel a felhasználót.

Kerüld azokat az animációkat, amelyek alatt nem lehet továbblépni, vagy amelyek minden apró választásnál elvonják a figyelmet.

Mozgás és akadálymentesség

A csökkentett mozgás (reduced motion) olyan beállítás az operációs rendszerben, amellyel a felhasználó mérsékli a nem szükséges animációt. Vannak, akiknek a mozgás szédülést, hányingert vagy fejfájást okoz (például vestibuláris zavar esetén). A felület tisztelje ezt a beállítást: az animáció helyett egyszerű átfedés vagy azonnali váltás jelenjen meg.

A WCAG vonatkozó követelményei:

• A villogó tartalom ne villogjon másodpercenként háromnál többször (2.3.1) – ez a rohamveszély miatt kritikus.
• Az automatikusan induló, 5 másodpercnél hosszabb mozgó vagy frissülő tartalomhoz legyen szüneteltetési lehetőség (2.2.2).
• A felhasználói művelet által kiváltott mozgás kikapcsolható legyen (2.3.3, AAA szint).

A mozgás sosem lehet az egyetlen jelzés: ha a változás csak animáción keresztül érthető meg, aki nem látja (vagy kikapcsolta), az információ nélkül marad. Az állapotot szövegesen és/vagy statikusan is jelezd.

Végigvezetett példa: időpont-kiválasztás a Mai programban

Egy foglaló felületen időpontválasztás után a rendszer csak a gomb színét változtatja. A felhasználó nem biztos benne, hogy a választás tényleg bekerült-e az összefoglalóba. A jobb visszajelzés egyszerre frissíti a kiválasztott időpont állapotát („Kiválasztva”), az összefoglalót és a továbblépés lehetőségét. Az animáció (például az összefoglaló rövid kiemelése) itt csak a kapcsolatot segítheti láthatóvá tenni; nem helyettesítheti a szöveges állapotot. Csökkentett mozgás esetén a kiemelés elmarad, a szöveges állapot marad.

Gyakori tévhitek

Állítás	Pontosítás
„Az animáció modernebbé teszi a felületet.”	Csak akkor hasznos, ha információt ad vagy folytonosságot teremt.
„Minden átmenetet látványosan kell megtervezni.”	A rutinműveleteknél a rövid, kiszámítható átmenet a jó.
„A csökkentett mozgás beállítása extra feladat.”	Az akadálymentes tervezés alapja; egyszerű szabályokkal megoldható.

Röviden

• A mikrointerakció egy művelethez kötött, rövid visszajelzés: kiváltó, szabály, visszajelzés, hurok.
• Az átmenet folytonosságot és fókuszt ad, de nem lassíthatja a rutinfeladatot.
• Az időzítést a művelet jellegéhez igazítsd, és a platform irányelveit ellenőrizd.
• Tisztelet a csökkentett mozgásnak és a villogás szabályainak; a mozgás sosem az egyetlen jelzés.

Ellenőrző kérdések

1. Melyik mikrointerakció csökkentene valódi bizonytalanságot a projektedben?
2. Van-e olyan mozgás, amely nélkül a felhasználó nem értené a változást?
3. Melyik átmenet lassítja inkább a feladatot, mint segíti?