Barion Pixel
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 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet Élethalálharc a WordPressben – a plugin-biznisz

Élethalálharc a WordPressben – a plugin-biznisz

2021. június 16.

A webdesign világának kikerülhetetlen monolitja a WordPress, ez a nyílt forráskódú, idén éppen 18 éves blog-, majd weblapmotor szinte páratlan karriert futott be. Ugyanakkor, valószínűleg éppen azért, mert a nyílt forráskódú, rajongásból és ingyenesen fejlesztett projektek világából ered, és ehhez a világhoz máig is ezer szállal kötődik (lényegében máig belőle építkezik), a WP arányosan sokkal […]

Tovább a cikkre