A legjobb példák a mikrointerakciók használatára, a UX terveid továbbfejlesztéséhez

Mikrointerakciók (microinteractions)
A mikrointerakciók olyan funkciók, amik egy dolgot csinálnak, de azt az egyet jól. A jó mikrointerakció természetesnek hat és éppen ezért legtöbbször felfedezetlen marad; anélkül teszi a felhasználók munkáját élvezetesebbé, hogy felismernék, mennyi gondolat van pusztán egy lépés megtervezése mögött. A mikrointerakciók egy-egy feladat megoldására összpontosítanak,és próbálják azt a lehető legtermészetesebbé tenni. Jelentőségük megértéséhez a legrövidebb út, ha példákon keresztül mutatjuk be, és ismerjük fel, hogy mennyire fontos velejárói egy jó dizájnnak. Most főleg felhasználó által kiváltott mikrointerakciókat veszünk sorra.
Kezdésképpen a már jól ismert Nest termosztátot tárgyaljuk, ami magában egy mikrointerakció. Bár ez egy kissé túlzás, van benne igazság. A Nest termosztát kakukktojás a többi felsorakoztatott példa között, de jól mutatja a mikrointerakciók lényegét.  Az egész eszköz egy nagy, kerek szabályozó gomb, melynek tekerésével könnyedén beállíthatjuk a kívánt hőmérsékletet. A Nest számításba veszi a köztünk és közte lévő távolságot is, és ehhez igazítja a kijelzőn megjelenő számok méretét. Továbbá, nem kell előre programoznunk a termosztátot, magától tanul és magát állítja be. Ha nincs  senki otthon, akkor automatikusan kikapcsolja magát. Ha energiát spórolunk, a Nest termosztát egy levélkét jelenít meg a kijelzőjén. Az ilyen leveleket gyűjteni is lehet, segítségével pedig láthatjuk, hogy bizonyos idő alatt mennyit fejlődött energia-takarékossági képességünk.

Nest termosztát
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, amiben éppen el vagy mélyedve.


Medium magazin – a teljes képernyős kép gördítésre összecsukódik

Ötletes az Apple Watchban lévő FInd My iPhone funkció, amivel megcsöngethetjük a telefonunkat, amennyiben az a közelben van. A hang, amit az Apple Watch idéz elő a telefonunkban, elég hangos ahhoz, hogy biztosan meghalljuk.

Ping-iPhone-from-Apple-Watch-2
Apple watch – Find my iPhone funkció

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 de hordozza azt a kis pluszt, amitől valamit “élménynek” nevezünk.

Douban app – az ötletes töltés animáció élményt csempészik a várakozásba

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é tegyük, amennyire csak lehetséges, de biztonsági szempontból az a fontos, hogy minél erősebb jelszó legyen beállítva.
Ha azonban közelebbről vizsgáljuk meg ezt a kérdést, akkor láthatjuk, hogy ez valójában nem ellentmondás, csak meg kell találni a módját a két szempont összehangolásának. Az alábbi ábrán egy ilyen példát láthatunk. 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 dühtő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  Macintosh gépeken lévő szótár funkció; 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.

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ép webes változatában egyszerűen lehet megváltoztatni a tervezett út irányát a nyílra 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 megspórolja nekünk a felesleges gépelést.

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

Az iOS-ben van egy beépített funkció, ami segít a kurzor pozicionálásában. A funkció a szóköz hosszan lenyomva tartásával aktiválható és ujjunkat a képernyőn mozgatva tudjuk mozgatni vele a kurzort. Ez egy továbbfejlesztett verziója az előző megoldásnak. A korábbi verzió egy nagyítót használt, amit a szövegbe kattintással  és hosszan lenyomva tartásával érhettünk el. Az új változattal szabadabban tudjuk mozgatni a kurzort és főképp, látjuk, hogy mit is csinálunk valójában.

iPhone – beépített kurzor mozgató funkció a könnyebb kezelhetőségért

Egy másik ötletes megoldás a Dribble-ön, hogy nemcsak a dizájnt látod elsőre, hanem a róla szóló leírás egy részletét is. Ez segít abban, hogy gyorsan át tudjuk tekinteni a munkákat anélkül, hogy elnavigálnánk a nyitóoldalról.

Ábra. 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ő

A jó mikrointerakció ismérvei:

  1. Egy feladat lát el – egy feladatra összpontosít és csak ennek a teljesítésére van tervezve
  2. Funkcionális – a mikrointerakciók jó esetben láthatatlanok, ami azt jelenti, hogy nem lehetnek feltűnőek, csak tisztán funkcionálisak. Sem több, sem kevesebb a szükségesnél
  3. Előrelátó – úgy kell felépítenünk őket, hogy számítsanak a hibákra, amelyeket az emberek vétenek és vagy akadályozzuk meg ezeket vagy a mikrointerakció legyen elnéző és legyen egyszerű javítani.
  4. Megfontolt használat – ne zsúfoljuk túl a termékünket mikrointerakciókkal, ott használjuk őket, ahol tényleg van létjogosultságuk

Ahogy a fenti példákból is láthattuk, a részletek nem csak apróságok; 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.

Oszd meg velünk véleményed

    Kérem írd be üzenetedet

    Kérem írd be email címed!

    Kérem írd be üzenetedet

    Küld

    Website-okat, mobil applikációkat és szoftvereket tervezünk, hogy segítsünk megvalósítani üzleti céljaidat!

    Csapatunk

    Kapcsolat

    Kedves Ergo,

    A nevem
    . Az email címem
    . Üzenetem:

    ajánlott
    cikkek

    Tudj meg többet a témáról

    Hamarosan hatályba lép az akadálymentességi törvény — 5 dolog, amit feltétlenül tudnod kell

    2024. dec. 19. | 13 perc olvasás

    Jelentős változásokat hoz 2025 nyara az Európai Unió piacán termékeket és szolgáltatásokat kínáló cégek életébe: június 28-ától kell a tagállamoknak alkalmazni a European Accessibility Act (EAA) előírásait...

    Alza.hu UX Design szemmel: Vásárlás vagy Kihívás?

    2024. okt. 04. | 5 perc olvasás

    Egy gördülékeny vásárlás olyan, mint egy űrlény, aki fénysebességgel utazik. Gyors és hatékony. Az online vásárlás világában a felhasználói élmény (UX) kulcsfontosságú. A zökkenőmentes vásárlási folyamat...