Aducerea vieții micro-interacțiunii și animației prin intermediul colaborărilor dezvoltator-proiectant

Putem crea o experiență încântătoare pentru utilizatori prin micro-interacțiune și animație UI!

Bună, mă numesc Kyo Kim și lucrez ca designer de produse la Capital One de aproximativ doi ani. Am folosit micro-interacțiuni și animație pe parcursul activității mele aici, inclusiv în cadrul unor proiecte mobile pe care le-ați folosit. Înainte de a începe să lucrez în tehnologie, fondul meu era în film. În film, accentul se concentrează pe povestire și editare pentru a crea o poveste care să angajeze publicul; și o mare parte din aceasta se realizează prin utilizarea tranzițiilor. Găsesc aceste abilități utile astăzi în timp ce creez experiențe și povești pentru instrumente digitale.

Când proiectez, mă gândesc la factori care ar oferi utilizatorilor o experiență minunată, încântătoare, cu tranziții și povestiri.

Pentru ca un produs să le ofere utilizatorilor săi o experiență încântătoare, acesta trebuie să ofere un design mai mult decât plăcut din punct de vedere estetic și efecte de animație impresionante.

Indiferent dacă produsul este bazat pe aplicație, bazat pe web sau orice altă formă de produs digital, acesta trebuie să atragă utilizatorii, să fie plăcut pentru ei să-l folosească și să le ofere posibilitatea de a se implica cu acesta într-un mod direct și semnificativ cale.

Micro-interacțiunile au puterea de a face utilizatorului experiența încântătoare și satisfăcătoare într-un mod pe care multe elemente de design nu le pot. Înainte de a intra în interacțiuni micro în contextul proiectării produsului, să începem cu elementele fundamentale.

Ce sunt ei? De ce este bine pentru experiența utilizatorului? De ce ar trebui să le încorporeze proiectanții și dezvoltatorii în activitatea lor? Cum pot echipele de proiectare a produselor colabora pentru a le îmbunătăți?

Ce sunt microinteracțiile și de ce ar trebui să ne interesăm de ele?

Ce sunt micro-interacțiunile sau animațiile UI? Oamenii se referă adesea la ele ca la niște animații frumoase, grafică în mișcare sau design de imagini în mișcare. Cu toate acestea, sunt mult mai mult decât atât.

Spre deosebire de alte forme de animație care există doar pentru a crea iluzia de mișcare, micro-interacțiunile implică direct utilizatorul, permițându-i să îndeplinească o varietate de sarcini și să interacționeze cu produsul într-un mod intuitiv și eficient.

Dacă ar fi să legăm acest aspect cu principii de proiectare bună a sistemelor, acest lucru îmbunătățește și permite feedback-ul sistemului pentru utilizator. Dacă este făcut corect, utilizatorii vor lua micro-interacțiuni ca un mesaj de la utilizator că acesta (sistemul) face ceea ce ar trebui să facă ca răspuns la ceea ce are nevoie de utilizator.

Chiar dacă nu știți ce sunt micro-interacțiunile, vă angajați cu ele în mod regulat. De fiecare dată când utilizați o aplicație sau un produs bazat pe web pentru a îndeplini o anumită sarcină - fie că este vorba de citirea știrilor, de a face o achiziție, de a juca un joc, de a crea un profil sau de a vă configura setările și preferințele de notificare - fiecare acțiune individuală pe care o faceți constituie o microinteracție. Micro-interacțiunile sunt împletite perfect în platforma unui produs, ceea ce face ca funcțiile lor să fie transparente și accesibile, îmbunătățind efectiv experiența generală a utilizatorului.

Deși aceste „acțiuni” iau o serie de forme diferite, unele exemple comune includ:

  • Când „mutăm” un articol într-un coș de cumpărături virtual.
  • Când selectăm între două opțiuni pe un buton de comutare CTA-like.
  • Când „tragem în jos” pentru a actualiza un flux de știri și a vedea cea mai recentă actualizare.
  • Când „defilăm în sus și în jos” în fluxul lung sau în pagină.

Când proiectăm o micro-interacțiune, trebuie să examinăm dacă aceasta este cu adevărat necesară și vitală pentru experiența utilizatorului. În caz contrar, are potențialul de a distrage formularul de utilizator folosind produsul în mod eficient sau de a deveni zgomot vizual.

Principiile microinteracțiilor

Există trei principii pe care le iau în considerare întotdeauna atunci când proiectez micro-interacțiuni.

  1. Continuitate (și subtilitate)

Elementele de microinteracțiune ar trebui să fie subtile, astfel încât atunci când un utilizator face o acțiune, există un flux continuu în experiența sa. De exemplu, dacă creăm o animație de defilare într-un feed lung, utilizatorul ar trebui să poată să se concentreze asupra conținutului paginii, mai degrabă decât pe animația de defilare în sine.

2. Prezicibilitate

Micro-interacțiunile de calitate au un element de predictibilitate care permite utilizatorului să navigheze într-un produs eficient și eficient. Utilizatorul poate prezice cu exactitate efectele acțiunilor sale, se simte confortabil inversându-le și încrezător în capacitatea lor de a efectua așa cum este de așteptat.

3. Transformabilitate

Tranzițiile fluide între ecrane multiple și transformări bine definite ale diferitelor obiecte din ele sunt aspecte cheie ale micro-interacțiunilor de calitate. Acestea permit utilizatorului să dezvolte o înțelegere intuitivă a relațiilor dintre ecrane și elementele din ele.

Când sunt concepute urmând aceste principii, micro-interacțiunile oferă contextul pentru un design, ajutând utilizatorii să știe să interacționeze cu acesta. O micro-interacțiune este un eveniment momentan care finalizează o singură sarcină. Potrivit celor mai mici elemente interactive ale unui site web sau al unei aplicații, micro-interacțiunile sunt unele dintre cele mai vitale, deoarece servesc o varietate de funcții de bază.

Declanșatoarele (atingeți, glisează, trageți etc.) inițiază fiecare dintre acțiunile enumerate în secțiunea de mai sus (continuitate, previzibilitate și transformabilitate). Utilizatorul efectuează o acțiune pe un site web sau o aplicație pentru a începe procesul (chiar dacă continuă după etapa inițială). Acest lucru urmează un model de apelare la acțiune de la un utilizator, reguli de implicare, așa cum este determinat de interfață (ce se va întâmpla și cum), feedback de la utilizator (a funcționat sau nu) și modele sau bucle (face acțiunea se întâmplă o dată sau repetați pe un program).

-Cum dezvoltatorii și designerii pot colabora pentru a aduce micro-interacțiuni la viață

După cum puteți vedea, micro-interacțiunile au un rol esențial în modelarea experienței utilizatorului. Din această cauză, au devenit o parte din ce în ce mai importantă a activității mele în calitate de designer de produse. După ce am lucrat la diferite proiecte pe mai multe platforme și utilizări, am observat că nu toată lumea recunoaște valoarea acestor elemente sau cum să le creeze eficient. Mai important, adesea, membrii echipei nu știu să își exprime ideile unul cu celălalt în ceea ce privește proiectarea tranzițiilor și micro-interacțiunilor.

Mi-am dat seama că totul se reduce la comunicare - ceva s-a pierdut în traducere atunci când le-am explicat ideilor de proiectare dezvoltatorilor mei. Poate ați auzit acest citat de la Confucius înainte: „Spuneți-mi și voi uita. Arată-mi și poate îmi amintesc. Implicați-mă și voi înțelege. ”Și prin implicare, noi, ca echipă de designeri și dezvoltatori, creăm experiențe grozave.

În primul rând, să parcurgem o descriere rapidă a procesului de proiectare ...

Într-o situație ideală, atunci când un proiectant vine cu o idee pentru o microinteracție, fluxul de lucru tradițional continuă în următoarea ordine:

  1. Proiectantul dezvoltă elementele vizuale și efectele de animație necesare pentru actualizarea ideii sale.
  2. Proiectantul prezintă modelul final și conceptele sale de bază celorlalți membri ai echipei.

Dar dacă procesul de proiectare nu se joacă în practică ca în teorie? Ce se întâmplă dacă prezentăm un storyboard sau un model incomplet? Sau altcineva din echipă proiectează modelul?

Când se întâmplă acest lucru, este posibil să apară probleme în prezentare sau dezvoltare. Aceste probleme se încadrează de obicei într-una din cele trei categorii:

  1. Ideea de animație nu este comunicată suficient de clar.

Dacă încercați să descrieți un concept de animație cu cuvinte sau imagini statice, este posibil să vedeți grimase pe fețele publicului. Aceasta înseamnă că încearcă tot posibilul să înțeleagă ideea ta, dar nu o obțin cu adevărat. Chiar dacă înțeleg conceptul de bază, imaginea pe care le-au conjurat în minte este probabil în contradicție cu ceea ce preconizați. Deoarece oamenii tind să perceapă imagini în mișcare, imagini statice și descrieri verbale în moduri diferite, bazându-se pe cuvinte sau imagini pentru a transmite idei de animație creează loc pentru comunicarea greșită și deseori tensiunea inutilă în rândul membrilor echipei tale.

2. Proiectantul nu știe dacă animația funcționează bine până când nu verifică și testează prototipul dezvoltatorului.

Atunci când designerii nu au abilități de prototipare, ei se limitează la aruncarea ideilor către dezvoltatori prin intermediul unui storyboard. Chiar dacă un proiectant crede cu tărie într-un model de microinteracțiune, el sau ea nu poate spune dacă funcționează la potențialul maxim până când dezvoltatorul completează prototipul. Acest lucru este problematic din mai multe motive, principalul fiind probabilitatea mare de comunicare greșită pe care o astfel de abordare o introduce în proces. În plus, deschide ușa îndoielilor din partea membrilor echipei și duce la întrebări cu privire la fezabilitatea ideii. Acest lucru poate fi costisitor din punct de vedere al timpului din perspectiva dezvoltării.

3. Proiectantul și dezvoltatorul nu se află pe aceeași pagină

Când designerii realizează animații de tip UI sau micro-interacțiuni, încearcă să includă detalii complexe de proiectare, cum ar fi ușor personalizate, scripturi, expresii și alte efecte. Atunci când prezintă aceste idei dezvoltatorilor, aceștia pot auzi: „Nu este posibil să facem asta în cronologia noastră” sau „Nu putem face exact același lucru, dar vom încerca.” În acest moment, ei ar putea încerca să hașeze afară diferitele detalii și probleme tehnice cu dezvoltatorii. Cu toate acestea, aceste discuții pot ajunge să nu fie fructe dacă proiectantul nu are cunoștințe de lucru despre instrumentele sau limbajele pe care dezvoltatorii le utilizează. Acești factori trebuie luați în considerare atunci când formulăm și discutăm idei, astfel încât microinteracțiile să fie compatibile cu setările implicite ale dezvoltatorilor, crescând probabilitatea ca produsul final să corespundă standardelor proiectantului (și tuturor celorlalți).

Care sunt unele soluții la aceste probleme?

În timp ce toți designerii și dezvoltatorii au propriul lor mod de a comunica despre conceptele lor de animație, vreau să împărtășesc una dintre metodele pe care echipa mea le folosește. Această metodă a fost destul de reușită și a dus la mai puține întâlniri și a îmbunătățit drastic comunicarea echipei noastre.

Acum, nu ne mai certăm dacă includem sau nu micro-interacțiuni, explorăm modalități de a le îmbunătăți și mai bine!

Conceptul de interacțiune cu scheletul și ghidul de interacțiune

„Conceptul de interacțiune cu scheletul și ghidul de interacțiune nu lasă loc pentru interpretare, ceea ce îmi permite să încep imediat munca și să fiu încrezător în potrivirea viziunii designerului.” - Jesse M Majcher / Lead IOS engineer

Procesul standard pe care îl utilizăm pentru a comunica despre desenele UX nu se traduce bine pentru animațiile UI. În primul rând, proiectările și fluxurile UX sunt încă proiectate ecran de ecran și sunt statice. Animațiile UI sunt fluxuri în sine, sunt fluide și se bazează pe sincronizare. Când creăm un design static, realizăm un cadru grosier, astfel încât să putem înțelege ideea și să discutăm fluxul. Aceasta ne permite să revizuim și să reglăm cu ușurință designul înainte de a crea versiunea finală. Odată ce fiecare membru al echipei este de acord că proiectul este gata de a le transmite dezvoltatorilor, proiectantul oferă dezvoltatorului un ghid de stil și o linie roșie care conține detalii, specificații și alte informații importante despre proiectare.

Dacă am folosi un proces similar pentru animații, procesul nostru ar putea fi mult mai rapid și mai bun.

  1. Conceptul de interacțiune cu scheletul (studiu de mișcare)

Un concept de interacțiune a scheletului este similar cu cel pe care l-ați crea atunci când proiectați fluxul, principala diferență este că acesta este un prototip de redare / click. Dacă aducem acest lucru la o întâlnire, membrii echipei noastre nu vor trebui să-și folosească imaginațiile pentru a înțelege conceptul. Proiectantul poate utiliza demo-ul redat / clic sau tabloul de poveste static pentru a face referire directă la elementele vizuale și de animație ale designului. Acest lucru va oferi tuturor un sens clar și precis al ideii sale. La rândul lor, partenerii pot oferi feedback foarte specific și, prin urmare, extrem de valoros pentru proiectant. În același timp, echipele de management și dezvoltare a produselor vor obține informații care să le permită îmbunătățirea comunicărilor interne și a estimărilor de timp pentru proiect.

2. Ghid de interacțiune

Odată ce echipa este de acord cu conceptul, proiectantul creează ghidul de interacțiune. Acest lucru este similar cu un ghid de stil, deoarece conturează poziția, rotația, scala și calendarul elementelor. Putem adăuga fiecare detaliu despre animații, ceea ce îi va ajuta pe partenerii noștri să-l înțeleagă clar. Când proiectantul prezintă ghidul de interacțiune partenerilor lor, el sau ea pot fi și mai clare cu privire la mișcarea și măsurarea conceptului de animație. Acest lucru este foarte util pentru finalizarea lucrărilor prin colaborare. De asemenea, îi ajută pe proiectanți să fie mai atenți în proiectarea lor de animație / microinteracție.

3. Aptitudini de prototipare pentru proiectanți

Din experiența mea, pentru a te pregăti pentru o colaborare de succes în proiectare, designerul de produse ar trebui să fie șoferul animației, iar dezvoltatorul ar trebui să ofere sprijin. Acest lucru înseamnă că designerul de produs are cea mai mare parte a responsabilității din parteneriat. Nu numai că sunt responsabili pentru a-și explica foarte clar ideile, ci trebuie să arate că sunt fezabile prin furnizarea de dovezi de concept. Înseamnă, de asemenea, că designerii de produse trebuie să poată face propriile prototipuri de animație. Dacă un proiectant de produs poate crea un prototip și îl poate prezenta în timpul unei întâlniri, discuția care va urma va fi mai clară și mai puțin timp, ceea ce va duce la un proces de comunicare mai eficient în general.

Deci, cu ce tipuri de instrumente de prototipare ar trebui să se familiarizeze designerii? Există multe instrumente acolo, dar nu toată lumea știe ce funcționează cel mai bine pentru sarcini specifice de microinteracțiune. Iată recomandările mele bazate pe experiența mea personală în proiectarea acestor elemente.

Dacă sunteți familiarizați cu codificarea:

  • Mobil: Xcode, studio Android
  • Mobil sau Web: Framer
  • Web: animație CSS

Dacă doriți să proiectați o interacțiune între o apăsare asemănătoare ecranului și un modul:

  • Invision și Marbel

Dacă doriți să creați interacțiuni mai detaliate:

  • Principiul, Adobe CC, origami Studio și Pixate

Dacă doriți să creați interacțiuni detaliate + animație:

  • Dupa efecte

În prezent, sunt un fan al folosirii After Effect pentru prototiparea mea. Chiar dacă nu este interactiv (de exemplu, se poate face clic), este modalitatea perfectă de a prezenta un concept de animație. De asemenea, nu există nicio limitare a efectului și puteți controla mișcarea detaliată. Este chiar posibil să o utilizați pentru a interacționa în spațiul 3D, cum ar fi pentru AR și VR.

Interacțiunile echipei încântătoare creează produse delicioase

Micro-interacțiunile au devenit un element din ce în ce mai important - dacă nu critic - din web, design mobil și multe altele. Chiar dacă atât designerii, cât și dezvoltatorii recunosc valoarea animațiilor UI și sunt motivați să le creeze, ei adesea se străduiesc să colaboreze într-un mod eficient, eficient. Este nevoie de o echipă puternică pentru a livra la timp micro-interacțiuni excelente; aceste echipe necesită o delimitare clară a rolurilor, abilități de comunicare eficiente și instrumente potrivite de prototipare pentru sarcinile de la îndemână.

Pentru a configura micro-interacțiunile pentru succes, asigurați-vă că echipa dvs. deține aceste caracteristici și se implică cu aceste procese. Și mult noroc cu propria ta călătorie de microinteracție!

DECLARAȚIA DE DISPOZIȚIE: Aceste opinii sunt cele ale autorului. Dacă nu se menționează altfel în acest post, Capital One nu este afiliat și nici nu este avizat de niciuna dintre companiile menționate. Toate mărcile comerciale și alte proprietăți intelectuale utilizate sau afișate sunt proprietatea proprietarilor respectivi. Acest articol este © 2017 Capital One.

Pentru mai multe despre API-uri, surse deschise, evenimente comunitare și cultura dezvoltatorilor la Capital One, vizitați DevExchange, portalul nostru pentru dezvoltatori unic: developer.capitalone.com.