A mikro-interakció és a felhasználói felület animációjának fejlesztése a fejlesztő – tervező együttműködések révén

Csodálatos élményt tudunk létrehozni a felhasználók számára mikrointerakció és felhasználói felület animáció révén!

Üdvözlet, Kyo Kim nevem, és kb. Két éve dolgozom a Capital One terméktervezőjeként. Az itt végzett munkám során mikrointerakciókat és animációkat használtam, ideértve néhány olyan mobil projektet is, amelyet esetleg magának használt. Mielőtt elkezdtem volna a technikában dolgozni, háttérm volt a film. A filmben a hangsúly a történetmesélésre és a szerkesztésre összpontosít, és olyan történetet hoz létre, amely vonzza a közönséget; és ennek nagy részét az átmenetek alkalmazásával érik el. Ezeket a készségeket ma hasznosnak tartom, amikor tapasztalatokat és történeteket készítek a digitális eszközök számára.

A tervezés során olyan tényezőkre gondolok, amelyek nagyszerű, élvezetes élményt adnának a felhasználók számára az átmenetekkel és a mesemondással.

Ahhoz, hogy egy termék kellemes élményt nyújtson a felhasználóinak, nem csupán esztétikai szempontból kellemes kialakítást és lenyűgöző animációs effektusokat kell kínálnia.

Függetlenül attól, hogy a termék alkalmazás-alapú, web-alapú, vagy bármilyen más digitális termék formája-e, be kell vonnia a felhasználókat, élvezetesnek kell lennie a használatra, és lehetőséget kell biztosítani számukra, hogy közvetlenül és értelmesen vegyenek részt vele. út.

A mikrointerakciók képesek arra, hogy a felhasználói élményt elragadóvá és kielégítővé tegyék oly módon, amit sok design elem nem képes. Mielőtt belekezdenénk a mikrointerakciókba a terméktervezés összefüggésében, kezdjük meg az alapokkal.

Kik ők? Miért hasznos ez a felhasználói élmény számára? Miért kellene a tervezőket és a fejlesztőket beépíteni munkájukba? Hogyan működhetnek együtt a terméktervező csapatok ezek fejlesztése érdekében?

Mik a mikro-interakciók és miért érdekli őket?

Mik a mikrointerakciók vagy az UI-animációk? Az emberek gyakran csinos animációknak, mozgó grafikáknak vagy mozgóképeknek hivatkoznak rájuk. Ezek azonban sokkal több.

Az animáció más formáitól eltérően, amelyek kizárólag a mozgás illúziójának megteremtésére állnak rendelkezésre, a mikrointerakciók közvetlenül bevonják a felhasználót, lehetővé téve a különféle feladatok elvégzését, és intuitív és hatékony módon történő interakciót a termékkel.

Ha ezt összekapcsolnánk a jó rendszerek tervezésével, akkor ez javítja és lehetővé teszi a rendszer visszacsatolását a felhasználó számára. Ha helyesen hajtják végre, a felhasználók a mikrointerakciókat üzenetként veszik fel a felhasználótól, hogy a rendszer (a rendszer) azt csinálja, amit tennie kell, válaszul arra, amire a felhasználónak szüksége van.

Még ha nem is tudja, mi a mikrointerakció, rendszeresen részt vesz velük. Minden alkalommal, amikor egy alkalmazást vagy webes terméket használ egy adott feladat elvégzéséhez - legyen szó a hírek olvasásáról, vásárlásról, játékról, profil létrehozásáról, vagy a beállítások és az értesítési beállítások kiigazításáról -, minden egyes elvégzett művelet mikrointerakció. A mikrointerakciók zökkenőmentesen beágyazódnak egy termék platformjába, funkcióik átláthatóvá és hozzáférhetővé téve, hatékonyan javítva a felhasználó általános tapasztalatait.

Noha ezeknek a „tevékenységeknek” számos különféle formája van, néhány általános példa a következő:

  • Amikor egy elemet virtuális kosárba helyezünk.
  • Ha két lehetőség közül választunk egy CTA-szerű kapcsológombon.
  • Amikor „lehúzunk” egy hírcsatorna frissítéséhez és a legfrissebb frissítés megtekintéséhez.
  • Amikor „felfelé és lefelé görgetünk” hosszú hírcsatornában vagy oldalon.

A mikrointerakció tervezésekor meg kell vizsgálnunk, hogy valóban szükséges-e és nélkülözhetetlen-ea felhasználói élményhez. Ellenkező esetben a felhasználó hatékonyan elvonhatja a felhasználói űrlapot, vagy vizuális zajt válthat ki.

A mikrointerakciók alapelvei

Három alapelv van, amelyeket mindig figyelembe veszek a mikrointerakciók tervezésekor.

  1. Folytonosság (és finomság)

A mikro-interakciós elemeknek finomnak kell lenniük, hogy amikor a felhasználó cselekszik, folyamatos áramlás folyik a tapasztalatában. Például, ha hosszú görgető animációt készítünk, akkor a felhasználónak képesnek kell lennie arra, hogy az oldal tartalmára összpontosítson, nem pedig a görgető animációra.

2. Megjósolhatóság

A minőségi mikrointerakcióknak megvan a kiszámíthatósági eleme, amely lehetővé teszi a felhasználó számára a termék hatékony és eredményes navigálását. A felhasználó pontosan meg tudja jósolni cselekedeteinek hatásait, jól érezheti magát, ha visszafordítja őket, és bízik abban, hogy képesek a várt elvégzésére.

3. Átalakíthatóság

A több képernyő közötti folyadékátmenetek és a benne lévő különféle objektumok jól meghatározott transzformációi a minőségi mikrointerakciók kulcsfontosságú szempontjai. Ezek lehetővé teszik a felhasználó számára, hogy intuitív megértést fejlesszen ki a képernyők és a benne lévő elemek közötti kapcsolatokról.

Ha ezeket az elveket követve tervezik, a mikrointerakciók kontextust teremtenek a formatervezéshez, segítve a felhasználókat abban, hogy megismerjék a vele való interakciót. A mikro-interakció egy pillanatnyi esemény, amely egyetlen feladatot teljesít. Vitathatatlanul egy weboldal vagy alkalmazástervezés legkisebb interaktív elemei, a mikrointerakciók a legfontosabbak, mivel különféle alapvető funkciókat szolgálnak.

A triggerek (koppintás, ellop, húzás stb.) A fenti szakaszban felsorolt ​​összes műveletet kezdeményezik (folytonosság, kiszámíthatóság és transzformálhatóság). A felhasználó egy műveletet végrehajt egy webhelyen vagy alkalmazáson a folyamat elindításához (még akkor is, ha az az első lépés után folytatódik). Ez követi a felhasználó cselekvésre ösztönző mintáját, az interfész által meghatározott elkötelezettség szabályait (mi fog történni és hogyan), a felhasználótól kapott visszajelzést (működött-e vagy sem), és mintákat vagy hurkokat (ha történjen egyszer, vagy ismételje meg az ütemterv szerint).

-Hogyan a fejlesztők és a tervezők együtt dolgozhatnak, hogy életre keltsék a mikro-interakciókat

Mint láthatja, a mikrointerakciók kritikus szerepet játszanak a felhasználói élmény kialakításában. Emiatt egyre inkább fontos részévé válnak terméktervező munkám. Miután különféle projekteken dolgoztam több platformon és felhasználáson keresztül, észrevettem, hogy nem mindenki ismeri fel ezeknek az elemeknek az értékét, vagy hogy hogyan lehet azokat hatékonyan létrehozni. Ennél is fontosabb, hogy a csapat tagjai gyakran nem tudják, hogyan fejezzék ki ötleteiket egymásnak az átmenetek és a mikrointerakciók megtervezése kapcsán.

Rájöttem, hogy mindez a kommunikációra vezethető vissza - valami elveszett a fordításban, amikor elmagyaráztam a tervezési ötleteimet a fejlesztőimnek. Lehet, hogy hallotta már ezt a Konfuciusz idézetet: „Mondd el, és elfelejtem. Mutasd meg, és emlékszem. Bevon, és megértem. ”És csak a bevonás révén alakítottuk ki a tervezőket és a fejlesztőket.

Először futtassuk át a tervezési folyamat gyors leírását ...

Ideális helyzetben, amikor a tervező mikro-interakcióra törekszik, a hagyományos munkafolyamat a következő sorrendben megy végbe:

  1. A tervező kifejleszti az ötlete aktualizálásához szükséges vizuális elemeket és animációs effektusokat.
  2. A tervező bemutatja a végső modellt és annak alapelveit a többi csapat tagja számára.

De mi van, ha a tervezési folyamat a játékban nem olyan, mint az elméletben? Mi lenne, ha egy forgatókönyvet vagy egy hiányos modellt mutatnánk be? Vagy a csapat valaki más tervezi a modellt?

Amikor ez megtörténik, valószínűleg problémák merülnek fel a bemutatás vagy a fejlesztés során. Ezek a problémák általában három kategóriába sorolhatók:

  1. Az animációs ötlet nem elég egyértelmű.

Ha egy animációs koncepciót próbál leírni szavakkal vagy állóképekkel, akkor grimaszt láthat a közönség arcán. Ez azt jelenti, hogy mindent megtesznek, hogy megértsék az ötleted, de nem igazán értik meg. Még ha megértik is az alapfogalmat, az a kép, amelyet a fejükben felidéztek, valószínűleg nem áll összhangban azzal, amit elképzel. Mivel az emberek hajlamosak a mozgó képeket, az állóképeket és a verbális leírásokat különféle módon érzékelni, a szavakra vagy a képekre támaszkodva animációs ötlet közvetítéséhez teret ad a téves kommunikáció, és gyakran szükségtelen feszültség a csapat tagjai között.

2. A tervező nem tudja, hogy az animáció jól működik-e, amíg nem ellenőrzik és tesztelik a fejlesztő prototípusát.

Amikor a tervezőknek nincs prototípuskészítési képessége, akkor az ötleteiket a forgatókönyv segítségével csak a fejlesztőknek továbbadják. Még akkor is, ha egy tervező szilárdan hisz a mikro-interakciós modellben, nem tudja megmondani, hogy teljes mértékben működik-e a potenciál, amíg a fejlesztő el nem készíti a prototípust. Ez számos ok miatt problémás, elsősorban a téves kommunikáció nagy valószínűsége, amelyet egy ilyen megközelítés vezet be a folyamatba. Ezenkívül megnyitja az ajtót, hogy a csapat tagjai kételkedjenek, és kérdéseket vet fel az ötlet megvalósíthatóságával kapcsolatban. Ez fejlesztési szempontból költséges lehet időben.

3. A tervező és a fejlesztő nem ugyanazon az oldalon található

Amikor a tervezők UI-animációkat vagy mikrointerakciókat készítenek, megkísérelik beépíteni a bonyolult tervezési részleteket, például az egyedi egyszerűsítéseket, szkripteket, kifejezéseket és egyéb effektusokat. Amikor ezeket az ötleteket bemutatják a fejlesztőknek, azt hallhatják: “Nem lehet ezt az időrendünkben megtenni” vagy “Nem tudjuk pontosan ugyanazt tenni, de megpróbáljuk.” Ezen a ponton megpróbálhatják a hash ismerteti a különféle részleteket és technikai kérdéseket a fejlesztőkkel. Ezek a megbeszélések eredménytelenek lehetnek, ha a tervezőnek nincs ismerete a fejlesztők által használt eszközökről vagy nyelvekről. Ezeket a tényezőket figyelembe kell venni az ötletek megfogalmazásakor és megvitatásakor, hogy a mikrointerakciók kompatibilisek legyenek a fejlesztők alapértelmezett beállításaival, növelve annak valószínűségét, hogy a végtermék megfelel a tervező (és mindenki más) szabványainak.

Milyen megoldások vannak ezekre a kérdésekre?

Bár minden tervezőnek és fejlesztőnek megvan a maga módja, hogy kommunikáljon animációs koncepcióikkal, szeretnék megosztani az egyik módszert, amellyel a csapat dolgozik. Ez a módszer nagyon sikeres volt, kevesebb találkozót eredményezett, és drasztikusan javította csapatunk kommunikációját.

Most már nem vitatkozunk arról, hogy bevonjuk-e a mikrointerakciókat, vagy sem, hanem azon dolgozunk, hogy miként lehetne még jobbá tenni őket!

Csontváz interakció koncepció és interakciós útmutató

„A csontváz-interakció koncepciója és az interakciós útmutató nem hagy értelmezési lehetőséget, amely lehetővé teszi számomra, hogy azonnal elkezdjem a munkát, és bízom benne, hogy megfelelek a tervező látomásának.” - Jesse M Majcher / vezető IOS mérnök

Az UX-tervekkel kapcsolatos kommunikáció során alkalmazott szokásos eljárás nem megfelelő a felhasználói felület animációk esetében. Először is, az UX terveit és folyamatát továbbra is képernyő-képernyőn tervezik és statikusak. Az UI animációk önmagukban folynak, folyékonyak és időzítésen alapulnak. Statikus terv készítésekor durva drótvázat készítünk, hogy megértsük az ötlet és megbeszéljük az áramlást. Ez lehetővé teszi számunkra, hogy a végleges változat létrehozása előtt egyszerűen átdolgozzuk és finomítsuk a kialakítást. Miután minden csapat tagja beleegyezett abba, hogy a formatervezés készen áll a fejlesztők részére történő átadásra, a tervező stílusos útmutatót és vörös sort ad a fejlesztőnek, amely részleteket, specifikációkat és egyéb fontos információkat tartalmaz a tervről.

Ha hasonló eljárást alkalmazunk animációkhoz, akkor sokkal gyorsabb és jobb lehet a folyamat.

  1. A csontváz interakció koncepciója (Mozgókép)

A csontváz interakció koncepciója hasonló a drótvázhoz, amelyet létrehozna az áramlás tervezésekor, a fő különbség az, hogy ez egy lejátszható / kattintható prototípus demonstráció. Ha ezt eljuttatjuk egy találkozóra, akkor csapatunk tagjainak nem kell fantáziájukat felhasználniuk a koncepció megértésére. A tervező a lejátszható / kattintható demo vagy statikus storyboard segítségével közvetlenül hivatkozhat a terv vizuális és animációs elemeire. Ez mindenki számára egyértelmű és pontos képet ad az ötletről. A partnerek viszont rendkívül specifikus és ezáltal nagyon értékes visszajelzéseket adhatnak a tervező számára. Ugyanakkor a termékmenedzsment és fejlesztő csapatok olyan információkat szereznek, amelyek lehetővé teszik számukra, hogy javítsák a belső kommunikációjukat és a projekt időbecslését.

2. Interakciós útmutató

Miután a csapat megállapodott a koncepcióban, a tervező elkészíti az interakciós útmutatót. Ez hasonló a stílus útmutatóhoz, mivel felvázolja az elemek helyzetét, forgását, méretét és időzítését. Minden részletet felvehetünk az animációkkal kapcsolatban, ami segít partnerünknek egyértelmű megértésében. Amikor a tervező megmutatja az interakciós útmutatót partnereiknek, még világosabbá teheti az animációs koncepció mozgását és mérését. Ez nagyon hasznos a munka véglegesítéséhez együttműködésen keresztül. Segít a tervezőknek átgondolt animáció / mikrointerakció tervezésében is.

3. Prototípuskészítési készségek a tervezők számára

Tapasztalataim szerint a sikeres tervezési együttműködés felállításához a terméktervezőnek kell vezetnie az animációt, a fejlesztőnek pedig támogatást kell nyújtania. Ez azt jelenti, hogy a termék tervezője viseli a felelősség nagy részét a partnerségben. Nemcsak felelősek az ötleteik nagyon világos magyarázatáért, hanem be kell mutatniuk, hogy megvalósíthatók-e a koncepció igazolásával. Ez azt is jelenti, hogy a terméktervezőknek képeseknek kell lenniük saját animációs prototípusuk elkészítésére. Ha egy terméktervező létrehozhat prototípust és bemutathatja azt egy találkozó során, akkor a következő vita egyértelműbb és kevésbé időigényes, ami összességében hatékonyabb kommunikációs folyamathoz vezet.

Szóval, milyen prototípus-készítési eszközökkel kell megismerkednie a tervezőkkel? Sok eszköz létezik, de nem mindenki tudja, mi működik a legjobban egy adott mikro-interakciós feladathoz. Itt vannak az ajánlásaim, amelyek az ezen elemek tervezésével kapcsolatos személyes tapasztalatokon alapulnak.

Ha ismeri a kódolást:

  • Mobil: Xcode, Android stúdió
  • Mobil vagy web: Framer
  • Web: CSS animáció

Ha interakciót szeretne létrehozni a képernyőszerű push és a modul között:

  • Invision és Marbel

Ha részletesebb interakciókat szeretne létrehozni:

  • Alapelv, Adobe CC, origami Studio és Pixate

Ha részletes interakciókat + animációt szeretne létrehozni:

  • Utóhatás

Jelenleg rajongó vagyok a After Effect prototípusaim készítéséhez. Még ha nem is interaktív (azaz kattintható), ez a tökéletes mód egy animációs koncepció bemutatására. Ezenkívül nincs korlátozva a hatás, és Ön képes ellenőrizni a részletek mozgását. Arra is lehetőség van, hogy interakciót hozzon létre 3D-s térben, például AR és VR esetén.

Örömteli csapat-interakciók révén örömteli termékek

A mikro-interakciók egyre fontosabbá, ha nem is kritikus elemévé válnak a webes, mobil dizájnban és egyebekben. Még ha mind a tervezők, mind a fejlesztők felismerik a felhasználói felület animációinak értékét és motiváltak azok létrehozására, gyakran küzdenek az eredményes és eredményes együttműködés érdekében. Erős csapat szükséges a nagyszerű mikrointerakciók időben történő eljuttatásához; az ilyen csapatok megkövetelik a szerepek világos meghatározását, a hatékony kommunikációs készségeket és a szóban forgó feladatokhoz megfelelő prototípuskészítési eszközöket.

A mikrointerakciók sikeres beállításához győződjön meg arról, hogy csapata rendelkezik-e ezekkel a tulajdonságokkal, és részt vesz ezekben a folyamatokban. Sok szerencsét a saját mikro-interakció útjára!

NYILATKOZATI NYILATKOZAT: Ezek a vélemények a szerző véleményét tükrözik. Ha ebben a bejegyzésben másként nem szerepelnek, a Capital One nem áll kapcsolatban egyetlen említett társasággal sem, és azt sem hagyja jóvá. Az összes használt vagy megjelenített védjegy és egyéb szellemi tulajdon a megfelelő tulajdonos tulajdonát képezi. Ez a cikk © 2017 Capital One.

Ha többet szeretne megtudni az API-król, a nyílt forrású forrásokról, a közösségi eseményekről és a Capital One fejlesztői kultúrájáról, látogasson el a DevExchange webhelyre, a one-stop fejlesztői portálra: developer.capitalone.com.