Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Mikro-interakciók: a kicsi szép

2021. május 06. | Bognár Péter

# # # # # #

Mi is az a mikro-interakció? Mint Pom-Pom, ő is bámulatosan tudja változtatni az alakját, hol ilyen, hol olyan. Ha akarom, animált kapcsoló, ha akarom, hangeffektus, és ha nem is egyujjas kifordított bundakesztyű, de legalábbis egy látványos hover-effektus. Mikro-interakcióknak nevezzük általában az UX objektunok olyan kisléptékű rezdüléseit, amik valamilyen módon a szükségestől eltérő módon, kicsit hatásosabban kommunikálnak a felhasználóval. A mikro-interakciók lényege, hogy egyfelől érthetőbbé, használhatóbbá tegyék az oldalt, másfelől élményszerűbbé, figyelemreméltóbbá tegyék a felhasználó és az interfész közötti kommunikációt, egyszóval megnöveljék a felhasználói élményt. Bár az elképzelés szinte az operációs rendszerekkel egykorú, a mikro-interakció kifejezés nem kifejezetten régi, 2013-ban megjelent könyvében vezette be a designer Dan Saffer a köztudatba. A legtöbb ilyen megoldás már annyira mindennapos, hogy valójában észre sem vesszük őket, pedig rettentő fontosak, lényegében elengedhetetlenek a működő UX designhoz.

Vegyünk néhány példát:

  • Kis tolókapcsolók: ugyanerre a funkcióra egy sima radio button is tökéletesen megfelelne, de így egyrészt egy kellemes kis animációval gazdagodhatunk, másrészt az átszíneződő csúszka sokkal erőteljesebb vizuális visszajelzést ad, mint a fekete pötty.
  • A Like-gomb a Facebook Messengerben: a hatalmas, animáltan bedurranó pozitív üzenet sokadszorra is komoly adrenalinlöketet ad. 
  • A rendszerüzenet, amikor megkérdezi a levelezőprogram, hogy nem feldkeztél-e meg a csatolmányról – sokszor fölöslegesen nyaggat, de abban az 1-2 esetben, amikor tényleg elfelejtetted, mennyire jól jön!
  • A kis rezdülés, amikor elnémítod a telefonodat – egyértelművé teszi, hogy valóban sikerült az adott helyzetben nagyon fontos akció végrehajtása. 

Talán ezek a példák is mutatják, hogy a mikro-interakció tényleg a webdesign Pom-Pomja, és nélküle sokkal szegényesebb lenne minden interfész.  A legfontosabb funkciója, hogy emberivé teszi a felhasználói felületet, és segítségével a felhasználó nagyobb biztonságban érzi magát. Ahogy tudjuk, a jó felhasználói élmény a webdesign legmagasabb szintű célja, nagyjából e körül kell, hogy minden design döntés forogjon. 

A mikro-interakciók négy fajtája

Animációk: animálni mindent lehet, és ezek a kis effektusok, ahogy fent is írtam, rettentően fel tudják dobni a felhasználó napját. Gondolj pl. a Facebook like-smiley ikonjaira: nem csak, hogy felugranak a like-kapcsolóra bökve, de mocorognak, amíg válogatsz közöttük és hover-animációként meg is növekednek, majd ha egyet kiválasztottál, a poszt alatt megjelenő pici ikon is “ugrik” egy kicsit. Az egész folyamat interaktív, nagyon plasztikus, de nem tolakodó.

Adatbevitel: Ezt az akciót a weben lényegében mindenki utálja. Ha valahogy egyszerűbbé, kellemesebbé tudod tenni, nagy sikert értél el. Némi interaktivitás, kreatív animáció is sokat segíthet, de még hasznosabb lehet például egy javasolt biztonságos jelszó vagy automatikusan generált felhasználónév. 

Forrás: Jitsi Meet

Színesítés: Ez a mindent-bele Fradi-kategória, azok az interakciók, amik általánosságban történnek a felhasználó és a rendszer között: visszajelzések, rendszerüzenetek, állapotjelzők, meg még ami eszedbe juthat. Általában igaz, hogy kis átgondoltsággal mindent fel lehet dobni, mindent lehet kicsit érdekesebbé, személyesebbé, jópofábbá tenni. 

Swipe: ez főleg mobil felületekre vonatkozik, de a mobil UX-ek tervezésénél skat emlegetett cél a kattintó mozdulatok felszámolása,a csúsztató, söprő mozdulat sokkal élményszerűbb, intuitívabb. 

Mire vigyázz?

  • A túlzástól mindig óvakodj, a túl sok animációtól egy idő után már úgy kezdi érezni magát a felhasználó, mintha az elvarázsolt kastélyba került volna a honlapod helyett. 
  • Gondold át a rendszerüzenetek szövegeit, lehetőleg ne fogalmazz szakzsargonban!
  • Soha ne legyenek a mikro-interakcióid öncélúak, kizárólag a felhasználói élmény fokozására vesd be őket! 
  • A mikro-interakció egyetlen, fluid egységet kell, hogy alkosson, ha több lépcsős a folyamat, gondold át újra, valószínűleg meg lehet oldani másképp is

Nem lehet elégszer elismételni: mindent a felhasználó szemével próbálj nézni! A cél, hogy minden annyira magától értetődő, átérezhető legyen, hogy a felhasználó lényegében gondolkodás nélkül tudja használni az oldalt és megtalálhassa, amiért odament.

Iratkozz fel YouTube csatornákra!

blog

Tanulás Designer Karrier Kérdezz-Felelek

Designer Karrier Kérdezz-Felelek

2022. január 25.

A múlt hét végén megtartott Kreatív Karriernavigátor nap után nagyon sok kérdés jött hozzánk, ezekre tegnap egy rögtönzött FB Live-ban válaszoltam, illetve fel tudtatok tenni egyéb kapcsolódó kérdéseket is. Kiből lehet designer? Én azt gondolom, hogy nem kell hozzá extra képesség. Nyilván aki tudja magáról, hogy általában nincs szépérzéke, nehezebben fog boldogulni, de már sok […]

Tovább a cikkre
Secured By miniOrange