A Mobile App Design alkalmazásban a mikrointerakciók megértése

A használhatóság az egyik legfontosabb összetevője mobil felhasználói felület tervezése. A nagy használhatóság gyakran magában foglalja microinteractions amelyek kis válaszok és viselkedések egy interfészből diktálja, hogyan kell használni az UI-t. Ezek a mikroelemek határozzák meg a viselkedést, ösztönzik az elkötelezettséget, és segítenek a felhasználóknak abban, hogy megjelenjenek, hogyan működjön az interfész.

Digitális interfészek a közvetítők a felhasználók között és a kívánt célok. Az interfész tervezők olyan tapasztalatokat hoznak létre, amelyek segítik a felhasználókat bizonyos feladatokat. Például egy igazi lista alkalmazásnak van egy interfésze, amely segít a felhasználóknak feladataik megszervezésében. Csakúgy, mint egy Facebook-alkalmazás, a felhasználók egy felületet biztosítanak a Facebook-fiókjához.

Ebben az útmutatóban tovább fogok ásni mikrointerakciók mobilalkalmazásokhoz. A kis kölcsönhatások triviálisnak tűnhetnek, de lehetnek egy óriási hatás a felhasználói élmény minőségéről. Megfelelő módon a mikrointerakciók valódi részét képezik az átfogó mobil felhasználói élménynek.

A mikrointerakciók teljesítménye

A legtöbb esetben a mikrointerakció célja visszajelzést a felhasználó cselekvése alapján. Ez segíthet a felhasználóknak ábrázolja, hogyan mozog vagy viselkedik az interfész, még akkor is, ha ez csak egy digitális képernyőn van.

A mikrointerakcióknak hatalmuk van, mert ők illuzórikus élményt teremt. A be / ki csúszkák nem mozognak, mint a fizikai kapcsolók, de úgy tűnik, hogy az animációkon keresztül mozognak.

Hihetetlen idézetet találtam ebben a bejegyzésben, amely a mobilalkalmazások mikrointerakcióinak hatalmas értékéről beszélt:

“A legjobb termékek két dolgot tesznek jól: jellemzők és részletek. Jellemzők az, ami felhívja az embereket a termékére. A részletek megtartják őket ott. És a részletek azt jelentik, hogy az alkalmazásunk miért válik ki a versenytől.”

A kis részletek fejlesztési szempontból jelentéktelennek tűnhet, de egy felhasználói élmény szempontjából valóban tégy különbséget egy OK alkalmazás UI és egy rendkívüli alkalmazás UI között.

Nagyszerű mikrointerakciók teszik a felhasználót úgy érzi, jutalmazza cselekvésre. Ezek lehetnek ismételt és a felhasználó viselkedéséhez. Megtanulhatják, hogyan kell használni ezeket a kisebb mikrointerakciók alapján. Amikor a felhasználó viselkedést hajt végre, ezek a kis interakciók "igen, kölcsönhatásba léphetnek velem!"

Vessen egy pillantást a Google anyagtervezési specifikációiban található példákra. A dokumentáció valójában egy teljes szekciót tartalmaz az anyagi mozgásra. Térbeli kapcsolatok ennek az egyenletnek nagy részét képezik, de a mozgás több diktálhat, mint a térbeli kapcsolatok.

Itt vannak az animáció és a mozgás leggyakoribb felhasználása mobil UI / UX tervezésben:

• A felhasználók irányítása a különböző oldalak között
• Vezesse át a felhasználókat az interfészen keresztül, hogy bizonyos viselkedéseket tanítson
• Javaslatok bármely olyan oldalon fellépő műveletekre / viselkedésekre

A mobilalkalmazásoknak vannak sokkal kevesebb képernyőterület mint a weboldalak. Ez bizonyos nehézségekhez vezethet a felhasználók számára, hogy hogyan használjanak egy alkalmazást. De meglepően egyszerű lehet, ha tudod, hogyan kell megfelelően megvalósítani a mikrointerakciókat.

Hogyan működik a Microinteractions?

Egyetlen mikrointerakció tüzelődik, amikor a felhasználó egy interfész egyik részével foglalkozik. A legtöbb mikrointerakció animált válaszok a felhasználó gesztusára. Tehát a mozgó mozgás másképp fog reagálni, mint egy csap vagy egy flick.

A Blink UX nagyszerű hozzászólást folytatott a mikrointerakciók apró részleteit tárgyalva. Ezeket a kis animációkat a kiszámítható folyamat hogy a felhasználó megtanulhatja az alkalmazás minden interakciójára.

A mikrointerakciók segítségével a felhasználók egy interfészen keresztül irányíthatják a felhasználókat válaszokat ad a viselkedésre. Miután a felhasználó tudja, hogy egy be / ki csúszka mozoghat, tudják, hogy interaktív. A válasz alapján tudni fogják, hogy a beállítás be van-e kapcsolva vagy kikapcsolva. Ha egy gomb úgy néz ki, hogy rákattinthat a felhasználóra ösztönösen tudja kölcsönhatásba léphetnek vele.

Az UXPin szerint minden alapvető mikrointerakció négy lépésre bontható, de a folyamatot összegeztem három lépésben.

1. Akció - a felhasználó csinál valamit mint a flick, swipe, tap & hold, vagy más interakció.
2. Reakció - a az interfész válaszol alapján kell történnie. A képernyő törlése visszaállhat a böngésző előzményeiben, vagy az ON / OFF csúszka megérintésével kikapcsolhatja a beállítást.
3. Visszacsatolás - ez az, amit a a felhasználó valójában látja az interakció eredményeként. Amikor a felhasználó egy mobilböngészőben visszahúzódik, előfordulhat, hogy az előző oldalt felfelé lebeg, hogy megjelenjen a képernyő tetején. A be- / kikapcsoló csúszka zökkenőmentesen csúszhat, vagy nagyobb lehet, ha a képernyőre nyomást gyakorol.

Ezek a nagyon kis lépések animáció nélkül is megvalósíthatók, de a nagy mikrointerakciók a reális érzés a lapos digitális interfészhez, amely többnyire formában van reális animációs hatások. Ezek lélegzik be az életet az interfészbe, és ösztönzik a felhasználói interakciót.

Keresse meg a részleteket

Ha megnézzük a kisebb darabokat, meg fogod érteni, hogy egy alkalmazás hogyan reagál egy adott viselkedésre.

Húzza fel a frissítést jó példa a most népszerű mikrointerakcióra. Ez nem volt szerves része az iOS-nak, amikor először indult, de sok alkalmazás vette ezt az ötletet, és elkezdte mozogni vele. Most húzza a frissítést egy jól ismert viselkedés, amelyet a legtöbb felhasználó csak egy feed-felhasználói felület böngészése során tud használni. Ugyanez mondható el a mobil hamburger menükről is, amelyek népszerűen elterjedtek.

Készítsen minden mikrointeraktivitást reális és egyszerű. Ne feszítse túl az animációkat, mert képesek fárasztóvá válik ha túl részletesek és gyakran használják őket. A felhasználó nem akarja, hogy a ragyogás megjelenjen minden alkalommal, amikor megérint egy menü ikont. Legyen egyensúly valódi értékkel kommunikál hogyan működik az interfész anélkül, hogy túlhajnánk.

Néhány példa

Úgy gondolom, hogy a legjobb módja annak, hogy megtanulj valamit, az, hogy csináljuk, és a második legjobb módja a mások munkájának tanulmányozása. Gyűjtöttem egy kis marékot UI / UX mikrointeraktív animációk a tehetséges Dribbble felhasználóktól, hogy megmutassák, hogy ezek miként néznek ki egy igazi makettbe.

Minden alkalmazás eltérő lesz, és eltérő igényei lesznek az alkalmazás alapján. Végül a legtöbb felhasználó ugyanazt akarja: egy alkalmazás intuitív és minőségi felhasználói élményt nyújt a felhasználói viselkedésekhez viszonyított mikrointerakciókkal.

1. Animált eseményalkalmazási felhasználói felület

Az első példa Ivan Martynenko által létrehozott remek kártya animációs funkció. Látni fogod maroknyi mikrointerakció ebben a kialakításban, nevezetesen a kártyák swipelésével és a részletek áthaladásával.

Amikor megérinti a kártyát, a méret növekszik. És ha megérinti a Feliratkozás gombot a felhasználó profilfotóinak az előfizetők listájába. Minden úgy érzi, nagyon intuitív és elég természetes a felületen.

2. Interaktív edzés képernyő

Ez a kreatív mozgásgyakorló animáció Vitaly Rubtsov tervezőtől származik. Demonstrál egy felhasználót, aki megmenti edzését egy zömök számára.

Figyeljük meg, hogy minden animáció azonos rugalmas ugrási hatás amikor a menük nyitva és zárva vannak. Ez akkor is igaz, ha a tevékenység a "Kész" -re van jelölve.. Következetesség kulcsfontosságú a mikrointerakciókban, mert mindannyian érezniük kell őket csatlakozik ugyanarra az interfészre.

3. Keresés az App Microinteractions programban

Rövid, édes és pont. Azt hiszem, ez a legjobban leírja ezeket a keresőalkalmazásokat, amelyeket Lukas Horak tervezett. Minden animáció gyors, de még mindig észrevehető.

Így kell megtervezni a mikrointerakciókat a túlkomplexitás elkerülése. Ha az interfész gyorsabban tölt be az animáció nélkül, akkor miért zavarja hozzá? Gyors animációk tartsa a felhasználót a tapasztalat megtörése nélkül.

4. Fitness cél mikrointerakció

Azt hiszem, Jakub Antalà     Â-k-valóban megütötte ezt a parkból a fitneszcélú mikrointerakciójával. A képernyők mindezek a jiggly jell-o érzései, mert a a formák folyékonyan mozognak.

Az interfész mégis érzi magát szilárd és használható. Ez azt mutatja, hogy a célból kialakított mikrointerakciók még mindig szórakoztatóak és szórakoztatóak lehetnek, de funkcionálisak és pragmatikusak is.

5. Húzza az Animáció frissítéséhez

Íme az egyik kedvenc abszolút frissítő animációm, amelyet a csapat a Ramotionban készített. Ez nem csak utánozza a folyadékot a húzási művelettel, de a válasz animációval zökkenőmentesen csatlakozik a folyadék kifröccsenése egy betöltő körbe.

Ez sok figyelem a részletekre ez az, ami a mobilalkalmazások mikroszaktivitásainak igazi szépségét mutatja.

6. Táblázat Microinteraction

Csatolt widgetek a kisebb képernyők miatt meglehetősen gyakori a mobilalkalmazások esetében. Nagyon szeretem ezt a John Noussis által létrehozott mikrointerakciót, bár úgy gondolom, hogy gyorsabb sebességgel hatékonyabb lenne, de maga az animáció dicsőséges és jól átgondolt.

A fül rögzítő nyíl jobbra csúszik, ahogy az új tartalom jobbra ugrik. Ez adja az illúziót teljes képernyő fizikailag mozgó jobbra. Az animáció kitűnő, de mivel ez olyan lassú, azt hiszem, a legtöbb felhasználó bosszús lesz néhány nap múlva.

7. Animáció előzetes feltöltése

Nem sokat mondtam bárok betöltése ebben a bejegyzésben, de ugyanolyan értékesek az általános élményhez. A legtöbb felhasználó nem akarja várni az adatok betöltését, de biztosan nem akarnak üres képernyőre nézni, miközben betöltik.

Bret Kurtz ezt a csodálatos előfeltöltő képernyőt csinálta, ami szórakoztató és informatív. A felhasználó valójában lehet szórakoztat figyelte ezt a kis animációs ismétlést. Ők is lehetnek megnyugtatta az alkalmazás még mindig betölti az adatokat és nem lezuhant.

Csomagolás

Mindezek a példák ragyogóan bizonyítják a mikrointerakciók értékét. A mobilalkalmazások sokkal nagyobb értéket kapnak a mikrointerakcióktól, mert a felhasználók fizikailag érintse meg a képernyőket az ujjaival. A felhasználók nem érik meg az asztali monitorokat vagy a laptop képernyőiket, de mindenki megérinti az okostelefonjaikat, mert ez az az interaktivitás alapértelmezett állapota.

Ez egy sokkal több személyes tapasztalat, ezért lehet a mobilalkalmazás kialakítása egy ilyen árnyalt folyamat. Ha megfelelően végeztük, a nagyszerű mobil mikroelemek hozzáadásával a erős illuzórikus felhasználói élmény csak a pixelek és a mozgás.