Mikrointerakciók

  • Régeni Anna
  • 2018. aug. 2.
  • nincs hozzászólás
  • 5 perc

Mint feltételezésem szerint mindenki másé, az én kiindulópontom is Dan Saffer “Microinteractions” című kiváló munkáján alapszik. Ahogy ő mondja, a mikrointerakciók olyan funkciók, amelyek egy dolgot csinálnak, de azt az egyet nagyon jól.

A részletek a legtöbb esetben munkánk azon részei, amelyekkel értéket tudunk teremteni, ha okosan használjuk őket. Ezek üdítőek, természetesek és mégis láthatatlanok. Éppen ez az, amire a mikrointerakciók alkalmasak, egy-egy részletre összpontosítanak, és teszik munkánkat kivételessé vagy csak egyszerűen jóvá.

Azt hiszem, hogy a mikrointerakciók jelentőségének megértéséhez az a legjobb út, ha példákon keresztül mutatjuk be, és ismerjük fel, hogy észrevétlenségük ellenére mennyire fontosak velejárói egy jó dizájnnak.

A mostani posztban főleg felhasználó által kiváltott mikrointerakciókat fogunk végigvenni, de egy következő posztunkban kitérünk a még izgalmasabb rendszer-triggerelt mikrointerakciókra is.

Kezdésképpen a már jól ismert Nest termosztáttal kezdjük, ami önmagában egy mikrointerakció. Annak ellenére, hogy ez egy kissé túlzás, valójában igaz. A Nest termosztát egy dolgot csinál, de azt az egy dolgot nagyon jól. Olyan könnyen lehet vele beállítani a hőmérsékletet, hogy az már szinte merénylet az emberiség ellen. Az egész egy nagy, gyönyörű szabályozó gomb.

Nest termosztát

A Medium online magazinban, ha a szövegbe ágyazott képekre kattintunk, a kép kiterjed, ha viszont egy görgető mozdulatot teszünk, akkor összezáródik az eredeti méretére. Így nem kell megkeresni a bezárás gombot ahhoz, hogy visszatérhess a cikkhez, amibe éppen bele vagy mélyedve. Ezek azok a fajta élmények, amelyek egy kis vidámságot csempésznek a mindennapi digitális tevékenységeinkbe.

Medium - szövegbe ágyazott kép - kattintásra kiterjed és görgetésre összecsukódik

Medium – szövegbe ágyazott kép – kattintásra kiterjed és görgetésre összecsukódik

Egy másik ötletes példa a Douban App töltés animációja. Ugyan már inkább UI, mint UX, de itt találkozik a kettő terület, hiszen a cél ugyanaz: jól használható és emlékezetes termékeket készíteni. A mozgás természetesnek hat, nem lassítja a folyamatot és hozzáadja azt a kis pluszt, amitől “élménynek” nevezhetjük.

Töltés animáció a Douban Appban.

Töltés animáció a Douban Appban.

A következő példa a már jól ismert jelszó megadással kapcsolatos. A jelszó készítésnél ellentmondás áll fenn a biztonság és a UX között. UX szempontból az lenne a cél, hogy a folyamatot olyan könnyűvé tesszük, amennyire csak lehetséges, de biztonsági szempontból az a fontos, hogy minél erősebb jelszó legyen beállítva. Ha közelebbről nézzük meg ezeket, akkor láthatjuk, hogy igazából ez nem is ellentmondás, csak meg kell találni a módját a kettő szinkronizálásának. A lenti ábrán egy ilyen példát látunk.

Ahogy gépeljük be az új jelszavunkat, azonnali visszajelzést kapunk arról, hogy milyen erős a jelszavunk, és hogy még milyen típusú karakterek hiányoznak, hogy megfelelő legyen a jelszavunk.. Az azonnali visszajelzés megment a méregtől, ami egyébként elöntene minket, mikor a harmadik extra bonyolult jelszavunk sem felel meg az oldal elvárásainak.

Azonnali visszajelzés a jelszó erősségéről és a még hiányzó karakterekről.

Azonnali visszajelzés a jelszó erősségéről és a még hiányzó karakterekről.

Személyes kedvencem az összes mikrointerakció közül az alábbi ábrán látható. A Macintosh gépeken, ha kijelölsz egy szót és jobb gombbal rákattintasz, a felugró menüből pedig kiválasztod a “definiál” parancsot, akkor automatikusan előhozza a beépített szótárának megfelelő szócikkét. Ez egy szuper hasznos funkció például azoknak, akik nem anyanyelvi angolok.

Beépített Macintosh szótár szó kijelölésével és jobb kattintással előhívva.

Beépített Macintosh szótár szó kijelölésével és jobb kattintással előhívva.

Macen egyszerűen tudjuk telepíteni az alkalmazásokat, ha ráhúzzuk az Alkalmazások mappára.

Maces program telepítés egyszerűen.

Maces program telepítés egyszerűen.

A Google Térképben egyszerűen lehet megváltoztatni a tervezett út irányát a nyilacskákra kattintva. Ez most már elég elterjedt megoldás sok másik navigációs, útvonal kereső applikációban is.

Útvonal irányának megváltoztatása egyszerűen.

Útvonal irányának megváltoztatása egyszerűen.

Emellett a gépünkön megnyitott Google Térképről egy gombnyomással át lehet küldeni az útvonalat a telefonunkra vagy egyéb hozzárendelt eszközünkre a “Útvonalterv elküldése telefonra” link használatával,  ami megment minket a felesleges gépeléstől.

Az útvonal telefonra való könnyű átküldése

Az útvonal telefonra való könnyű átküldése

Egy másik ötletes megoldás a Dribble-ön, hogy nemcsak a dizájnt látod elsőre, de meg tudod tekinteni a dizájner leírásának egy részletét is róla. Ez segít abban, hogy gyorsan át tudjuk tekinteni a munkákat egy kattintás nélkül.

 Dribble - nemcsak a dizájn, de a leírás is könnyen megtekinthető.

Dribble – nemcsak a dizájn, de a leírás is könnyen megtekinthető.

Ahogy a fenti példákból is láthattuk, a részletek nem csak részletek; ezeken az apróságokon múlhat egy termék sikere vagy bukása. Igazából ezek tesznek egy UX-et jó UX-é, mert ilyenkor történik meg az, hogy a dizájner mögé teszi a gondolatot, hogy hogyan lehetne a szoftvert emberibbé formálni. Ez persze nem azt jelenti, hogy mindennek tele kell lennie velük. Pont az a mikrointerakciók lényege, hogy csak ott vannak jelen, ahol tényleg egyszerűsíteni tudják az adott folyamatokat és élményt csempészni a rutinos tevékenységeinkbe.


A SZERZŐRŐL

A Budapesti Műszaki és Gazdaságtudományi Egyetem Kognitív Tanulmányok szakán szerzett diplomát, érdeklődési köre jelenleg a pszicholingvisztika, a statisztika és a UX területei felé vezetik. A UX kutatáson belül különösen a felhasználói tesztek tervezése és kiértékelése foglalkoztatja.

Szólj hozzá

 
Kérjük, írja be nevét!
Kérjük, írja be email hozzászólását!