Oživte mikrointerakcie a animácie používateľského rozhrania prostredníctvom spolupráce medzi vývojármi a dizajnérmi

Môžeme vytvoriť príjemnú skúsenosť pre používateľov prostredníctvom mikro-interakcie a animácie používateľského rozhrania!

Ahoj, volám sa Kyo Kim a asi dva roky pracujem ako produktový dizajnér v spoločnosti Capital One. Počas svojej práce tu používam mikro-interakcie a animácie, a to aj v prípade niektorých mobilných projektov, ktoré ste sami použili. Než som začal pracovať v technike, moje pozadie bolo vo filme. Vo filme sa pozornosť sústreďuje predovšetkým na rozprávanie príbehov a strih, aby sa vytvoril príbeh, ktorý zaujme publikum; a veľa z toho sa dosahuje pomocou prechodov. Tieto zručnosti považujem za užitočné dnes, keď vytváram skúsenosti a príbehy pre digitálne nástroje.

Pri navrhovaní premýšľam o faktoroch, ktoré by používateľom poskytli skvelý a príjemný zážitok s prechodmi a rozprávaním príbehov.

Aby produkt mohol ponúknuť svojim užívateľom príjemný zážitok, musí ponúknuť viac ako esteticky príjemný dizajn a pôsobivé animačné efekty.

Bez ohľadu na to, či ide o produkt založený na aplikácii, web alebo akúkoľvek inú formu digitálneho produktu, musí používateľov priťahovať, mať pre nich príjemné použitie a poskytnúť im príležitosť zapojiť sa do priameho a zmysluplného produktu spôsobom.

Mikrointerakcie majú silu, aby používateľsky zážitok potešil a uspokojil spôsobom, ktorý veľa konštrukčných prvkov nemôže. Skôr ako sa dostaneme do mikro-interakcií v súvislosti s návrhom produktu, začnime základmi.

Čo sú zač? Prečo je to dobré pre užívateľskú skúsenosť? Prečo by ich mali dizajnéri a vývojári začleniť do svojej práce? Ako môžu tímy dizajnu výrobkov spolupracovať na ich zlepšení?

Čo sú to mikrointerakcie a prečo by sme sa o nich mali zaujímať?

Čo sú to mikrointerakcie alebo animácie používateľského rozhrania? Ľudia ich často označujú ako pekné animácie, pohybové grafiky alebo návrhy pohyblivých obrazov. Sú však omnoho viac.

Na rozdiel od iných foriem animácie, ktoré existujú výlučne na vytvorenie ilúzie pohybu, mikro-interakcie priamo zapájajú používateľa, čo mu umožňuje vykonávať rôzne úlohy a interaktívne a efektívne spolupracovať s produktom.

Ak by sme sa k tomu pripojili späť so zásadami dobrého návrhu systémov, zvyšuje to a umožňuje užívateľovi spätnú väzbu systému. Ak sa to urobí správne, používatelia berú mikro-interakcie ako správu od užívateľa, že (systém) robí to, čo by mal robiť, ako reakcia na to, čo užívateľ potrebuje.

Aj keď neviete, aké sú mikrointerakcie, pravidelne s nimi komunikujete. Zakaždým, keď na vykonávanie určitej úlohy použijete aplikáciu alebo produkt založený na webe - či už ide o čítanie správ, nákup, hranie hier, vytvorenie profilu alebo úpravu nastavení a preferencií upozornení - každá jednotlivá vykonaná akcia predstavuje mikro-interakcia. Mikrointerakcie sú bezproblémovo prepojené do produktovej platformy, čím sú ich funkcie transparentné a prístupné, čím sa účinne zlepšuje celkový dojem používateľa.

Aj keď tieto „akcie“ majú mnoho rôznych foriem, medzi bežné príklady patrí:

  • Keď „presunieme“ položku do virtuálneho nákupného košíka.
  • Keď vyberieme medzi dvoma možnosťami na prepínači podobnom CTA.
  • Keď „stiahneme“ aktualizáciu spravodajského kanála a zobrazenie najnovšej aktualizácie.
  • Keď „posúvame nahor a nadol“ dlhý informačný kanál alebo stránku.

Keď navrhujeme mikro-interakciu, musíme preskúmať, či je skutočne potrebná a životne dôležitá pre používateľa. V opačnom prípade má potenciál rozptýliť používateľskú formu s použitím vášho produktu alebo sa stať vizuálnym šumom.

Zásady mikro-interakcií

Pri navrhovaní mikro-interakcií vždy zohľadňujem tri zásady.

  1. Kontinuita (a jemnosť)

Prvky mikro-interakcie by mali byť jemné, takže keď používateľ niečo urobí, jeho skúsenosti sú plynulé. Napríklad, ak vytvárame posúvaciu animáciu v dlhom informačnom kanáli, používateľ by mal mať možnosť zamerať sa skôr na obsah stránky ako na samotnú posúvaciu animáciu.

2. Predvídateľnosť

Kvalitné mikrointerakcie majú prvok predvídateľnosti, ktorý umožňuje užívateľovi navigovať produkt efektívne a efektívne. Užívateľ môže presne predpovedať účinky svojich akcií, cítiť sa pohodlne pri ich zvrátení a veriť v svoju schopnosť vykonávať podľa očakávania.

3. Transformovateľnosť

Kvapalné prechody medzi viacerými obrazovkami a dobre definované transformácie rôznych objektov v nich sú kľúčovými aspektmi kvalitných mikro-interakcií. Umožňujú užívateľovi rozvíjať intuitívne porozumenie vzťahov medzi obrazovkami a prvkami v nich.

Ak sú mikro-interakcie navrhnuté podľa týchto zásad, poskytujú kontext pre dizajn tým, že používateľom pomáhajú vedieť, ako s nimi interagovať. Mikrointerakcia je okamžitá udalosť, ktorá dokončí jednu úlohu. Pravdepodobne najmenšie interaktívne prvky dizajnu webových stránok alebo aplikácií, mikro-interakcie sú jedny z najdôležitejších, pretože slúžia rôznym základným funkciám.

Spúšťače (poklepaním, potiahnutím, ťahaním atď.) Iniciujú každú z akcií uvedených v predchádzajúcej časti (kontinuita, predvídateľnosť a transformovateľnosť). Používateľ na webe alebo v aplikácii vykoná akciu na začatie procesu (aj keď pokračuje po prvom kroku). Toto sa riadi vzorom výzvy na akciu od používateľa, pravidlami zapojenia určenými rozhraním (čo sa stane a ako), spätnou väzbou od používateľa (či už to fungovalo alebo nefungovalo), a vzormi alebo slučkami (vykonáva činnosť) alebo sa opakuje podľa plánu).

- Ako môžu vývojári a dizajnéri spolupracovať pri oživovaní mikro-interakcií

Ako vidíte, mikro-interakcie majú rozhodujúcu úlohu pri formovaní používateľského prostredia. Z tohto dôvodu sa stali čoraz dôležitejšou súčasťou mojej práce dizajnéra produktu. Po práci na rôznych projektoch na viacerých platformách a použitiach som si všimol, že nie každý uznáva hodnotu týchto prvkov alebo ako ich efektívne vytvárať. Ešte dôležitejšie je, že členovia tímu často nevedia, ako si navzájom vyjadriť svoje nápady týkajúce sa navrhovania prechodov a mikro-interakcií.

Uvedomil som si, že to všetko viedlo ku komunikácii - keď som vysvetlil svoje nápady na dizajn svojim vývojárom, niečo sa stratilo v preklade. Možno ste už počuli tento citát z Konfucia, „Povedzte mi, a zabudnem. Ukážte mi, a možno si pamätám. Zapojte ma a ja to pochopím. “A to je vďaka zapojeniu, kde ako tím dizajnérov a vývojárov vytvárame veľké skúsenosti.

Najprv si prečítajte rýchly popis procesu navrhovania ...

V ideálnej situácii, keď dizajnér príde s nápadom na mikrointerakciu, pokračuje tradičný pracovný postup v tomto poradí:

  1. Dizajnér rozvíja vizuálne prvky a animačné efekty potrebné na aktualizáciu jeho nápadu.
  2. Návrhár predstaví ostatným členom tímu konečný model a jeho základné pojmy.

Ale čo keď sa proces navrhovania v praxi nehrá rovnako ako teoreticky? Čo keď predstavujeme storyboard alebo nekompletný model? Alebo niekto v tíme navrhuje model?

V takom prípade je pravdepodobné, že sa vyskytnú problémy s prezentáciou alebo vývojom. Tieto problémy zvyčajne spadajú do jednej z troch kategórií:

  1. Animačná myšlienka nie je dostatočne jasne oznámená.

Ak sa pokúšate popísať koncept animácie slovami alebo statickými obrázkami, na tvári publika sa môžu objaviť grimasy. To znamená, že sa snažia čo najlepšie pochopiť váš nápad, ale v skutočnosti tomu nerozumejú. Aj keď rozumejú základnému pojmu, obraz, ktorý si vymysleli vo svojich mysliach, je pravdepodobne v rozpore s tým, čo si predstavujete. Pretože ľudia majú tendenciu vnímať pohyblivé obrázky, statické obrázky a slovné popisy rôznymi spôsobmi, spoliehanie sa na slová alebo obrázky sprostredkuje animačný nápad a vytvára tak priestor na nedorozumenie a často zbytočné napätie medzi členmi vášho tímu.

2. Dizajnér nevie, či animácia funguje dobre, až kým neoveria a nevyskúšajú prototyp vývojára.

Keď dizajnéri nemajú zručnosti v oblasti prototypovania, obmedzujú sa len na prezentáciu svojich nápadov vývojárom prostredníctvom storyboardu. Aj keď dizajnér pevne verí v model mikrointerakcie, nemôže povedať, či pracuje na jeho plný potenciál, kým vývojár nedokončí prototyp. Je to problematické z viacerých dôvodov, pričom hlavným dôvodom je vysoká pravdepodobnosť nesprávnej komunikácie, ktorú takýto prístup zavádza do procesu. Okrem toho otvára dvere pochybnostiam od členov tímu a vedie k otázkam o uskutočniteľnosti myšlienky. Z hľadiska rozvoja to môže byť nákladné z hľadiska času.

3. Dizajnér a vývojár sa nenachádzajú na tej istej stránke

Keď dizajnéri vytvárajú animácie používateľského rozhrania alebo mikro-interakcie, snažia sa zahrnúť komplexné podrobnosti o dizajne, ako sú vlastné pomôcky, skripty, výrazy a ďalšie efekty. Pri prezentovaní týchto nápadov vývojárom môžu počuť: „To nie je možné urobiť v našej časovej osi“ alebo „Nemôžeme to urobiť úplne rovnako, ale skúsime to.“ V tomto okamihu by sa mohli pokúsiť hashovať s rôznymi vývojármi a rôznymi technickými problémami. Tieto diskusie však môžu byť zbytočné, ak dizajnér nemá pracovné znalosti o nástrojoch alebo jazykoch, ktoré vývojári používajú. Tieto faktory by sa mali brať do úvahy pri formulovaní a diskusii o nápadoch, aby boli mikro-interakcie kompatibilné s predvolenými nastaveniami vývojárov, čím sa zvyšuje pravdepodobnosť, že konečný produkt bude spĺňať štandardy projektanta (a všetkých ostatných).

Aké sú riešenia týchto problémov?

Aj keď všetci dizajnéri a vývojári majú vlastný spôsob komunikácie o svojich animačných konceptoch, chcem sa podeliť o jednu z metód, ktorú používa môj tím. Táto metóda bola pomerne úspešná a viedla k menšiemu počtu stretnutí a drasticky zlepšila komunikáciu nášho tímu.

Teraz sa už nehádame o tom, či zahrnúť alebo nezahrnúť mikro-interakcie, skúmame spôsoby, ako ich ešte vylepšiť!

Skeleton Interaction Concept & Interaction Guide

„Koncepcia interakcie kostry a príručka interakcie neponechávajú priestor pre interpretáciu, ktorá mi umožňuje okamžite začať pracovať a byť si istý pri porovnávaní vízie dizajnéra.“ - Inžinier Jesse M Majcher / Lead IOS

Štandardný postup, ktorý používame na komunikáciu o dizajnoch UX, sa pri animáciách používateľského prostredia neprekladá dobre. Po prvé, návrhy a toky UX sú stále navrhnuté pre každú obrazovku a sú statické. Animácie používateľského rozhrania sú samy o sebe tokmi, sú plynulé a založené na načasovaní. Keď vytvoríme statický dizajn, urobíme hrubý drôtový model, aby sme pochopili túto myšlienku a diskutovali o toku. To nám umožňuje ľahko revidovať a doladiť dizajn pred vytvorením konečnej verzie. Keď každý člen tímu súhlasí s tým, že návrh je pripravený odovzdať vývojárom, návrhár poskytne vývojárovi sprievodcu štýlom a červenú čiaru obsahujúcu podrobnosti, špecifikácie a ďalšie dôležité informácie o dizajne.

Ak by sme použili podobný postup pre animácie, náš proces by mohol byť oveľa rýchlejší a lepší.

  1. Koncept interakcie kostry (štúdia pohybu)

Koncept kostry interakcie je podobný ako drôtový model, ktorý by ste vytvorili pri navrhovaní toku. Hlavným rozdielom je, že ide o demonštráciu prototypu, ktorý je možné prehrať / kliknúť. Ak to prinesieme na stretnutie, členovia nášho tímu nebudú musieť využívať svoju predstavivosť na pochopenie tohto konceptu. Dizajnér môže použiť hrateľnú / kliknuteľnú demonštračnú dosku alebo statickú príbehovú dosku na priame odkazy na vizuálne a animačné prvky návrhu. Toto dá každému jasný a presný zmysel pre jeho nápad. Na druhej strane môžu partneri poskytnúť spätnú väzbu, ktorá je vysoko špecifická, a teda vysoko hodnotná pre projektanta. Tímy pre riadenie a vývoj produktov zároveň získajú informácie, ktoré im umožnia zlepšiť ich internú komunikáciu a odhad času pre projekt.

2. Sprievodca interakciami

Keď sa tím na koncepte dohodne, dizajnér vytvorí sprievodcu interakciami. Je to podobné sprievodcovi štýlom, pretože načrtáva polohu, rotáciu, mierku a načasovanie prvkov. Môžeme pridať všetky podrobnosti o animáciách, ktoré pomôžu našim partnerom to jasne pochopiť. Keď dizajnér ukáže svojim partnerom sprievodcu interakciami, môže byť ešte jasnejší, pokiaľ ide o pohyb a meranie koncepcie animácie. To je veľmi užitočné pre dokončenie práce prostredníctvom spolupráce. Pomáha tiež premýšľať dizajnérom pri navrhovaní animácií / mikro-interakcií.

3. Prototypovacie zručnosti pre dizajnérov

Podľa mojej skúsenosti, aby ste sa pripravili na úspešnú spoluprácu v dizajne, mal by byť dizajnér produktu vodičom animácie a vývojár by mal poskytovať podporu. To znamená, že značnú časť zodpovednosti v partnerstve nesie dizajnér produktu. Nielenže sú zodpovední za veľmi jasné vysvetlenie svojich nápadov, ale musia preukázať, že sú uskutočniteľné poskytnutím dôkazu o koncepcii. To tiež znamená, že dizajnéri produktov musia byť schopní vyrábať svoje vlastné animované prototypy. Ak dizajnér produktu môže vytvoriť prototyp a prezentovať ho počas stretnutia, diskusia, ktorá nasleduje, bude jasnejšia a menej časovo náročná, čo povedie k celkovo efektívnejšiemu komunikačnému procesu.

S akými typmi prototypových nástrojov by sa mali dizajnéri oboznámiť? Existuje veľa nástrojov, ale nie každý vie, čo je najlepšie pre konkrétne úlohy týkajúce sa mikro-interakcie. Tu sú moje odporúčania založené na mojej osobnej skúsenosti s navrhovaním týchto prvkov.

Ak ste oboznámení s kódovaním:

  • Mobil: Xcode, štúdio Android
  • Mobil alebo web: Framer
  • Web: Animácia CSS

Ak chcete navrhnúť interakciu medzi tlačením podobným obrazovke a modulom:

  • Invision a Marbel

Ak chcete vytvoriť podrobnejšie interakcie:

  • Princíp, Adobe CC, origami Studio a Pixate

Ak chcete vytvoriť podrobné interakcie + animácie:

  • After Effects

V súčasnej dobe som fanúšikom používania After Effect pre môj prototyping. Aj keď to nie je interaktívne (t. J. Na ktorý sa dá kliknúť), ide o vynikajúci spôsob prezentácie konceptu animácie. Neexistuje žiadne obmedzenie účinku a môžete ovládať pohyb detailov. Je dokonca možné použiť na interakciu v 3D priestore, napríklad pre AR a VR.

Vynikajúce tímové interakcie vytvárajú vynikajúce produkty

Mikrointerakcie sa stali čoraz dôležitejším - ak nie kritickým - prvkom webu, mobilného dizajnu a ďalšími. Aj keď dizajnéri aj vývojári uznávajú hodnotu animácií používateľského rozhrania a sú motivovaní ich vytvárať, často sa snažia účinne a efektívne spolupracovať. Dodanie skvelých mikro interakcií včas vyžaduje silný tím; takéto tímy si vyžadujú jasné vymedzenie úloh, efektívne komunikačné zručnosti a správne nástroje na vytváranie prototypov pre dané úlohy.

Ak chcete nastaviť svoje mikro-interakcie tak, aby boli úspešné, uistite sa, že váš tím má tieto charakteristiky a zaoberá sa týmito procesmi. A veľa šťastia s vašou vlastnou cestou mikro-interakcie!

VYHLÁSENIE O ZVEREJNENÍ: Tieto názory sú názormi autora. Pokiaľ nie je v tomto príspevku uvedené inak, spoločnosť Capital One nie je prepojená so žiadnou z uvedených spoločností, ani ju neschvaľuje. Všetky použité alebo zobrazené ochranné známky a iné duševné vlastníctvo sú vlastníctvom príslušných vlastníkov. Tento článok je © 2017 Capital One.

Viac informácií o rozhraniach API, otvorených zdrojových kódoch, komunitných udalostiach a kultúre vývojárov v spoločnosti Capital One nájdete na webe DevExchange, našom jednorazovom portáli pre vývojárov: developer.capitalone.com.