Proiectarea de interacțiuni intenționate

Descoperiți principiile cheie ale proiectării interacțiunii cu intenție, ce provocări de proiectare poate rezolva interacțiunea și cum să o aduceți în procesul dvs.

Când ne gândim la designul interacțiunii și animația în experiența utilizatorului, este ușor să o confundăm cu lucrurile fanteziste: clopotele sau fluierele sau obiectele zburătoare aleatorii care „dau un site web factorul wow“. Ar putea aduce încântare pe termen scurt, dar în curând poate deveni iritant pentru utilizatorii obișnuiți.

Pentru a combate acest tip de inutilitate, vom arunca o privire asupra principiilor de bază ale proiectării unei interacțiuni semnificative, a modului în care poate rezolva provocările obișnuite de proiectare și a modului în care îl puteți introduce în procesele și sistemele dvs. de proiectare. Interacțiunea nu ar trebui să mai fie o atingere finală care este eliminată din scop ca „plăcută de a avea”, ci o parte integrantă a experienței generale a utilizatorului.

Patru principii cheie ale interacțiunii semnificative

1. Evită să creezi obstacole

Gândiți-vă la un „meniu hamburger” care durează două sau trei secunde pentru a anima ecranul complet. De fiecare dată când un utilizator dorește să navigheze pe site, trebuie să aștepte. Crearea unor perioade mai lungi de sarcini pentru utilizator este o modalitate garantată de a le trimite până la site-ul sau aplicația unui concurent.

Cu toate acestea, există unele cazuri în care întârzierea progresului unei interacțiuni poate beneficia. Atunci când interacțiunea este complexă, încetinirea ei poate oferi utilizatorului un context și feedback mai bun. Iată câteva exemple de moment în care ați putea întârzia interacțiunile și animațiile:

• Îmbarcarea utilizatorilor noi într-o nouă interfață. Asigurați-vă că reduceți obstacolele cu opțiunea skip.
• Trageți și fixați interfețele care arată cauza și efectul. Prea repede și utilizatorii se pot întreba unde a mers fișierul respectiv.
• Adăugarea unui produs în coș. Acest lucru nu ar trebui să creeze o barieră prelungită la plată, dar ar trebui să ofere utilizatorului suficient feedback, astfel încât să știe că sarcina sa a avut succes.

De regulă, interacțiunile simple ar trebui să fie rapide, iar interacțiunile complexe ar trebui să fie întârziate suficient încât utilizatorul să înțeleagă contextul.

2. Potriviți mișcarea cu mesajul

Dacă Apple ar decide că toate interacțiunile lor pe iOS vor fi rapide, ascuțite, în fața ta și vor face o mulțime de lucruri spinoase, s-ar simți ca și cum ai folosi un produs Apple? Dacă ați folosi aplicația Alton Towers și ați vedea o animație care se estompează lent și o mulțime de tranziții în stil Ken Burns, s-ar simți ca un loc magic de distracție și emoție sau o reclamă TV M&S?

Modul în care se animă o interacțiune ar trebui să reprezinte întotdeauna tonul pe care îl vizați, care se simte potrivit pentru utilizatorii dvs. - face experiența mai captivantă și mai consistentă. Dacă este un site de divertisment pentru copii, atunci poate fi un pic nebun și plin de viață. Dacă este un boutique de ultimă generație, păstrați-l lent, sofisticat și de bun gust.

3. Dă-i scop

Proiectarea interacțiunii are atât de mult potențial pentru a ridica o experiență a utilizatorului, motiv pentru care este atât de tentant să folosești excesiv și să folosești fără un scop. Vă amintiți site-urile Flash?

Derulați puțin mai departe și aruncați o privire la cele opt provocări pe care designul de interacțiuni le poate rezolva. Dacă interacțiunile dvs. nu respectă aceste modele, există șanse mari să nu aibă un alt scop decât să încânte utilizatorii.

4. Faceți-l invizibil

Sună destul de sfâșietor, având în vedere timpul investit în proiectarea interacțiunilor, dar, dacă trece neobservat, este probabil pentru că au făcut o treabă minunată. Avem tendința de a acorda mai multă atenție utilizării unei piese de tehnologie sau a unei interfețe atunci când funcționează prost sau ceva se simte nepotrivit. Când lucrurile sunt bune, utilizatorul se poate concentra asupra conținutului.

Cantitatea luată în considerare pentru proiectarea interacțiunilor pe aplicații și site-uri web utilizate pe scară largă, cum ar fi Facebook, Pinterest, Twitter și produsele Google, este de neînțeles. Și totuși, nu ai observa niciodată cu adevărat până când cineva nu ți-a arătat asta. Acestea fac designul invizibil, astfel încât să vă puteți bucura de experiență și să construiți o legătură emoțională mai puternică cu produsul, serviciul sau conținutul.

Șase provocări de proiectare pe care designul de interacțiuni le poate rezolva

1. Orientare și context

Aceasta este o provocare specială pentru designul mobil atunci când spațiul pe ecran este limitat. Afișați totul în aer liber și utilizatorul este suprasolicitat cognitiv. Arătăm lucruri vitale și ascundem lucruri mai puțin critice este ceea ce ne străduim; cu toate acestea, ascunde o parte din experiență. Prin urmare, folosind interacțiuni semnificative, putem învăța vizual utilizatorul unde trăiesc lucrurile, astfel încât este ușor de reținut și intuitiv.

Iată câteva exemple de creare a contextului prin interacțiune:

• Schimbător de culoare de fundal pentru fonturile Google. Culorile se simt ca și cum ar trăi în interiorul pictogramei găleții de vopsea.
• Procesul de adăugare în coș și checkout pe Cotton Bureau. Mai degrabă decât să te ducă la o nouă pagină de coș, este ca un carusel care trăiește în dreapta paginii vizibile.

2. Demonstrarea cauzei și efectului

Un exemplu clasic în acest sens este interfața drag and drop. Când ridicați un obiect media și îl mutați în „zona de fixare”, utilizatorul ar trebui să aibă feedback pentru a le spune că l-au ridicat și s-au mutat în locul potrivit pentru a plasa elementul în. Odată ce l-au introdus, ar trebui să existe o validare pentru a spune utilizatorului că au reușit în sarcina lor. Acest lucru se poate face prin schimbări de culoare, mesaje de validare pozitive sau chiar efecte sonore.

3. Furnizarea de feedback

Pentru acest exemplu, să luăm un buton de plată. Câte gateway-uri de comerț electronic slab executate ați experimentat în cazul în care faceți clic pe acel buton frumos și strălucitor „Plătește acum”, doar pentru a fi confundat cu privire la faptul dacă ați făcut clic sau nu pentru că este procesat? Nu spunea că asta făcea. Deci, interacțiunea poate schimba starea unui buton și, cu un pic de animație, poate spune utilizatorului că „plata este în curs de procesare” și apoi îi poate spune utilizatorului când „se primește plata” înainte de a se muta pe o pagină de confirmare a comenzii. Nu vă mai întrebați ce se întâmplă timp de zece secunde și vă întrebați dacă ați rupt internetul.

4. Evidențiați informațiile cheie

Atunci când un anumit conținut are o prioritate mai mare în cadrul aceleiași vizualizări a ecranului, utilizarea culorii și a tipografiei pentru a-l promova poate rupe consistența sistemului dvs. de proiectare sau poate părea deplasată dacă este suprautilizată. Interacțiunea poate ajuta la accentuarea conținutului important fără a compromite aspectul.

Gândiți-vă la aplicațiile de fitness: când vă încărcați prima dată tabloul de bord, doriți să vedeți activitatea principală și statisticile de astăzi. Utilizarea unei animații simple poate scoate la iveală acest conținut fără a dilua cantitatea de lucruri afișate pe ecran.

5. Creează percepția performanței

Viteza este un subiect fierbinte și din motive întemeiate, deoarece este un factor comun asociat cu ratele de respingere. Vor exista cazuri în care ați maximizat optimizarea vitezei pe pagină și este încă nevoie de puțin timp pentru a încărca pagina. Există alternative pentru a nu arăta utilizatorului nimic sau pentru a afișa o pictogramă de încărcare.

Încărcarea scheletului poate fi utilizată pentru a afișa un aspect previzibil sub formă de wireframe, astfel încât înainte de încărcarea paginii, utilizatorul știe aproximativ unde să caute și cum ar putea interacționa cu interfața. Din punct de vedere psihologic, se pare că pagina s-a încărcat mai repede în comparație cu faptul că nu se vede nimic, dar, în realitate, se încarcă în același timp.

De asemenea, puteți utiliza timpii de încărcare ca o oportunitate de a educa utilizatorii despre ceea ce se întâmplă și despre ceea ce urmează să se întâmple cu mesaje prietenoase care difuzează timpul de așteptare.

6. Adăugarea personalității mărcii

Brandurile conduse de personaje pot beneficia foarte mult de introducerea interacțiunii pentru a aduce personalitate în experiență. Puteți utiliza caracteristicile umane ale mascotelor. Când nu aveți nimic vizual în marca dvs., puteți adăuga în continuare personalitate folosind viteza și frecvența. Gândiți-vă la Google și la pre-încărcătoarele lor de puncte ciudate sau la activarea comenzilor vocale, care oferă o abordare prietenoasă și distractivă într-un mod simplu.

Construirea unei conexiuni emoționale cu utilizatorul este o modalitate excelentă de a obține vizite regulate. Proiectarea interacțiunii poate face ca tehnologia să se simtă mai centrată asupra omului - ceea ce este întotdeauna bine de urmărit.

Introducerea interacțiunii în procesul de proiectare

Schițe și compoziții cu fidelitate redusă

Instrumente de proiectare a interacțiunii

• Keynote: Dacă sunteți în căutarea unei idei brute și ușor de realizat, Keynote este câștigul rapid.
• Adobe Animate: Păstrați totul în Adobe și încrucișați-vă fără probleme cu alte instrumente. Acest lucru este ideal pentru animația ilustrativă.
• Tumult Hype: Dacă sunteți familiarizat cu interfața Sketch și vă cunoașteți calea în timp, veți fi acasă cu Tumult.
• Cadru: Acesta este un instrument de proiectare a interacțiunii special conceput, care are capabilități foarte avansate pentru a potrivi animația dvs. cu JavaScript.
• Principiu: cu o legătură Sketch drăguță, Principiul devine obiectivul de interacțiune. Este relativ simplu de învățat și ceea ce puteți realiza în el este minunat.
• Atomic: Adăugați date, logică și variabile pentru a face interacțiunile la fel de practice ca versiunea finală. Aceasta este pentru proiectantul avansat care are unele cunoștințe de codificare.
• Invision Studio: Încă sunt primele zile, dar Invision Studio are câteva capabilități și similitudini excelente cu Principiul. Timpul va spune dacă acest lucru va fi suficient de avansat pentru a domina piața de prototipuri și colaborare.

Note detaliate de predare

Lăsarea notelor pentru dezvoltatori este o problemă de dispută dacă vă aflați într-un mediu extrem de colaborativ, dar dacă lucrați de la distanță, notele detaliate împotriva ideilor și prototipurilor dvs. cu o bună predare vă pot asigura că interacțiunile dvs. sunt incluse în construcție.

Compilați o bibliotecă de demonstrații și inspirație

Adăugați-l la sistemul dvs. de proiectare

Dacă ați rezolvat cu succes o problemă obișnuită (testată corespunzător) cu interacțiunea, atunci introduceți-o în sistemul de proiectare sau în biblioteca de modele pentru a le reutiliza în scenarii similare, fără investiția de timp pentru a face altceva de la zero.

Pentru ajutor în proiectarea web și experiența utilizatorului (UX), contactați-ne astăzi.

Dacă aveți nevoie de ajutor cu experiența dvs. de utilizator, nu ezitați să ne contactați.