A legjobb példák a mikrointerakciók használatára, a UX terveid továbbfejlesztéséhez
![](https://ergomania.hu/wp-content/uploads/microinteractions_lead_eng.png)
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](https://ergomania.hu/wp-content/uploads/2018/08/nest-300x183.png)
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](https://ergomania.hu/wp-content/uploads/2018/08/Ping-iPhone-from-Apple-Watch-2-1.jpeg)
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.](https://ergomania.hu/wp-content/uploads/2018/08/password-strength-indicator-300x221.jpg)
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.](https://ergomania.hu/wp-content/uploads/2018/08/mac.png)
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.](https://ergomania.hu/wp-content/uploads/2018/08/mac2-300x217.png)
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.](https://ergomania.hu/wp-content/uploads/2018/08/google-maps-300x76.png)
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](https://ergomania.hu/wp-content/uploads/2018/08/google-maps2-300x118.png)
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ő](https://ergomania.hu/wp-content/uploads/2018/08/000.gif)
A jó mikrointerakció ismérvei:
- Egy feladat lát el – egy feladatra összpontosít és csak ennek a teljesítésére van tervezve
- 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
- 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.
- 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.
ajánlott
cikkek
Tudj meg többet a témáról
![](https://ergomania.hu/wp-content/uploads/2024/05/Cash-Experience-Cover.jpg)
![](https://ergomania.hu/wp-content/uploads/2023/07/Nevtelen-terv.png)
Oszd meg velünk véleményed