UX mai bun prin microinteracțiuni

Când proiectați un produs, există multe modalități de a îmbunătăți experiența utilizatorului, inclusiv definirea personajelor, arhitectura informațională bine structurată și conținutul scris atent. Dar, după ce această structură la nivel înalt este setată, crearea de plăcere pentru un utilizator vine în detaliile mai mici de proiectare a interacțiunii .

Aceste detalii, cunoscute sub denumirea de microinteracțiuni , sunt momente individuale ale produsului concepute pentru a îndeplini o singură sarcină, sporind în același timp fluxul natural al produsului. Glisarea în sus pentru a reîmprospăta datele, apreciarea conținutului sau modificarea unei setări sunt toate microinteracțiuni. Ele pot include, de asemenea, animații simple ale interfeței de utilizare, de exemplu, felul în care un meniu alunecă atunci când este atins sau un card alunecă de pe ecran când glisați.

Adesea, microinteracțiunile nu sunt nici măcar observate în mod conștient de utilizator, dar detaliile lor subtile fac produsul mai plăcut și mai ușor de utilizat și, prin urmare, îi îmbunătățesc experiența utilizatorului.

Beneficiile microinteracțiunilor

Microinteracțiunile și animația UI sunt atât de esențiale încât pot crea sau distruge un design – sau așa cum a spus Charles Eames, faimosul arhitecturii și al designului de mobilier:

Detaliile nu sunt detalii. Ei fac designul.

Câteva beneficii cheie ale încorporării microinteracțiunilor într-un produs sunt:

• Crearea unui efect emoțional pozitiv asupra utilizatorului datorită interacțiunilor mai fluide ale UI
• Furnizarea de feedback imediat utilizatorului pe baza acțiunilor pe care le-au întreprins
• Îndrumarea utilizatorului printr-o aplicație într-un mod mai fluid și mai intuitiv
• Încurajarea utilizatorilor să interacționeze cu o aplicație răspunzând la o notificare sau când partajează conținut
• Prevenirea erorilor utilizatorului

Cele mai bune practici de design pentru microinteracțiuni

Acum că am stabilit o anumită definiție și context cu privire la ceea ce fac microinteracțiunile și am dat un exemplu despre cum îmbunătățesc experiența utilizatorului, haideți să discutăm cele mai bune practici pentru crearea microinteracțiunilor.

Identificați și înțelegeți problema utilizatorului

Prima regulă în orice proiectare a experienței utilizatorului este de a descoperi și înțelege problemele utilizatorilor - nu este diferit pentru microinteracțiuni. Cel mai bun mod de a înțelege de ce are nevoie utilizatorul este să efectueze sondaje sau interviuri sau să observe comportamentul prin cercetarea utilizatorilor. Designerul Toptal Ivan Annikov aprofundează mai mult despre înțelegerea nevoilor utilizatorilor în articolul său, „Going Guerrilla: Affordable UX Research Tips And Alternatives”.

Păstrați microinteracțiunile naturale

Scopul este de a reduce decalajul dintre utilizator și un produs în moduri care par intuitive și naturale, astfel încât să evitați animațiile ciudate care durează prea mult să se încarce sau care pot distrage atenția utilizatorului. În schimb, creați modele care să curgă perfect cu produsul. Subtilitatea este cheia în microinteracțiuni. Nu lăsa utilizatorul nedumerit și să se gândească: „Ce a fost asta?”

Testați și repetați constatările din testarea utilizatorilor

Chiar și designerii cu experiență rareori obțin design-ul complet corect de la prima încercare. De aceea, utilizarea unui proces de testare a utilizatorului și de proiectare iterativă este o modalitate simplă de a reduce defectele de utilizare înainte de lansarea produsului.

În timpul fazei de testare a utilizatorului, microinteracțiunile sunt testate și analizate pentru utilizare și revizuite în următoarea fază de proiectare. Acest proces se repetă până când problemele de utilizare și punctele dureroase sunt corectate.

Urmați structura microinteracțiunilor

Potrivit lui Dan Saffer, designer senior de produse pentru personal la Twitter și autorul cărții „Microinteracțiuni: proiectare cu detalii”, există patru părți ale unei microinteracțiuni.

1. Trigger — Un declanșator inițiază microinteracțiunile. Un tip de declanșare este un comutator de comutare care activează și dezactivează o funcționalitate.
2. Reguli — O regulă determină modul în care o microinteracțiune răspunde la un declanșator și definește ce se întâmplă în timpul interacțiunii. De exemplu, o aplicație de lanternă folosește un buton ca declanșator care aprinde și stinge lumina.
3. Feedback — Feedback-ul spune utilizatorului ce se întâmplă în timpul microinteracțiunii. Un exemplu de feedback este un formular de înscriere cu validare inline — o culoare de margine devine verde dacă câmpul este completat corect și devine roșu dacă ceva este incorect. În acest fel, utilizatorul știe instantaneu că ceva este corect sau greșit.
4. Bucle și moduri — Buclele și modurile definesc meta-regulile microinteracțiunii și modul în care microinteracțiunea se schimbă atunci când este utilizată în mod repetat. De exemplu, în comerțul electronic, un buton „Cumpără-l acum” se poate schimba în „Cumpără altul” atunci când utilizatorul a achiziționat articolul înainte.

Deconstruirea Microinteraction Design

Pentru a arăta procesul de gândire din spatele proiectării microinteracțiunilor, să deconstruim o microinteracțiune de către Google: microinteracțiunea cu sugestie de nume de fișier în Google Docs.

Această microinteracțiune ia prima linie a unui document și sugerează acea bucată de text ca nume pentru document, făcând procesul de creare a numelui mai intuitiv.

Procesul de proiectare a unei microinteracțiuni este același ca pentru orice sarcină de proiectare: identificarea punctului de durere al utilizatorului și remedierea acestuia. Ținând cont de cele mai bune practici anterioare, să începem să identificăm problema.

Problema utilizatorului

O modalitate simplă și intuitivă de a menține documentele organizate este de a le numi pur și simplu descriptiv. În majoritatea editoarelor de text, câmpul „Denumește documentul tău” rămâne necompletat, chiar dacă există o șansă mare ca numele fișierului să se coreleze în cele din urmă cu conținutul documentului. Acesta este un proces care merită abordat cu o microinteracțiune.

Soluția Google

Google Docs gestionează acest lucru în două moduri, în funcție de alegerile utilizatorului: 1) Utilizatorii pot face clic în câmpul de nume și pot schimba numele documentului imediat înainte de a introduce orice conținut și pot schimba „Document fără titlu” cu numele la alegere sau 2 ) După ce un utilizator introduce primul rând de text, Google îl completează automat ca nume de document. Utilizatorul îl poate păstra așa cum este sau îl poate schimba.

Să examinăm detaliile:

Declanșatoare

Ar putea exista câteva declanșatoare posibile pentru a denumi documentul, folosind funcția Fișier > Salvare ca meniu sau apăsând cmd+s pe un Mac ( ctrl+s pe Windows) de pe tastatură ca în aplicațiile desktop. Dar niciuna dintre acestea nu profită de natura interactivă a web-ului și nu îmbunătățește în mod deosebit fluxul de utilizatori.

În schimb, declanșatorul principal al Google Docs este să faceți pur și simplu clic pe câmpul cu numele documentului. Starea de trecere cu mouse-ul pe câmp afișează un sfat instrument „Redenumire”. Declanșatorul secundar este Fișier > Redenumire , care evidențiază câmpul de introducere a numelui.

Reguli

Regulile definesc ce se întâmplă după ce faceți clic pe declanșator. În acest caz, prima linie de text va apărea ca nume de document. Dar ce se întâmplă dacă utilizatorul nu dorește să aibă prima linie de text ca nume? Când utilizatorul face clic pe câmpul de introducere a numelui, tot textul este selectat și va fi șters cu orice apăsare a tastei, facilitând crearea unui nou nume.

Părere

Schimbarea culorii marginii câmpului de introducere este un model comun de interacțiune și este ceea ce Google Docs folosește aici pentru a oferi utilizatorului feedback imediat.

Bucle și moduri

Utilizatorul a creat cu succes numele documentului și declanșatorul rămâne pe loc, cu o diferență cheie: documentul a fost denumit acum.

În acest moment, utilizatorul poate dori doar să schimbe doar câteva litere sau să adauge o dată la nume, mai degrabă decât să schimbe întregul nume pe care l-a definit anterior. În acest caz, spre deosebire de regula anterioară, regula de evidențiere a întregului nume de document este dezactivată.

Rezultat

După definirea problemei și concentrarea asupra tuturor celor patru părți ale unei microinteracțiuni, rezultatul este o experiență mai naturală, mai ușor de utilizat. Soluția de denumire a fișierelor Google Docs ajută utilizatorul să rămână organizat cu fișiere denumite corect și simplifică procesul de denumire a documentelor.

Microinteracțiuni în acțiune: exemple din lumea reală

Reordonarea unei liste de sarcini

Mementourile Apple iOS îi ajută pe utilizatori să rămână organizați și să elimine mai mulți pași, permițându-le să atingă, să țină apăsat și să tragă un element din listă pentru a-și schimba locul în ordinea listei.

Reacționând la postările din rețelele sociale

„Aprecierea” conținutului făcând clic pe un buton sau pe o pictogramă a devenit un model comun de design UX în multe aplicații și site-uri web. Facebook a construit pe această interacțiune adăugând mai multe opțiuni dincolo de „apreciere” printr-o microinteracțiune subtilă.

Evidențierea textului de marcă

În majoritatea browserelor, este posibil să înlocuiți culoarea implicită de selecție a textului. IKEA folosește acest model de interacțiune pentru a adăuga un detaliu subtil de branding prin evidențierea textului în culorile sale iconice galben și albastru.

Partajarea locației dvs

Google Hangouts presupune că unul dintre momentele în care un utilizator poate dori să-și partajeze locația este atunci când cineva trimite mesaje text „Unde ești?”

Când utilizatorul vede acest mesaj, un buton „Partajați locația” apare ca o opțiune contextuală. Ei pot apoi să apese acel buton pentru a trimite automat o hartă a locației lor celuilalt utilizator.

Glisând la Selectare

Microinteracțiunile pot fi folosite pentru a răspunde la întrebări simple da sau nu într-o aplicație. Tinder face acest lucru făcându-i utilizatorului să gliseze la stânga sau la dreapta (nu/da), în funcție de faptul că îi place sau nu posibila lor potrivire.

Extindere căutare

Aplicația Google Inbox nu numai că grupează în mod inteligent e-mailurile cu pachete, ci este și concepută pentru a permite căutarea vocală sau pentru a alege dintre cele mai recente contacte cu o singură atingere.

Adăugarea rapidă a informațiilor de contact ale unui prieten

SeatGeek simplifică procesul de completare a formularelor completând automat informațiile din contactele unui utilizator printr-o atingere a butonului „Adăugați din Contacte”.

Aflați mai multe despre microinteracțiuni

Microinteracțiunile sunt o parte cheie a îmbunătățirii experienței utilizatorului și există multe resurse disponibile pentru a afla mai multe despre ele, dintre care câteva sunt enumerate mai jos.

Pentru a afla mai multe despre microinteracțiuni în general, vizitați Microinteractions, site-ul web creat ca însoțitor pentru cartea menționată anterior „Microinteractions: Designing with Details” de Dan Saffer. Pe site, există explicații detaliate ale microinteracțiunilor, precum și informații despre originea microinteracțiunilor binecunoscute, cum ar fi corectarea automată, completarea automată și tăierea și lipirea. Primul capitol al cărții este disponibil și ca descărcare gratuită.

Pentru inspirație pentru microinteracțiuni, vizitați Little Big Details, o colecție curată de microinteracțiuni în produse digitale. Acesta arată exemple de modul în care companii precum Apple, Trello și Stack Overflow implementează microinteracțiuni și animație UI.

Pentru a afla cum să creați microinteracțiuni în Framer, citiți Toptal Designer, articolul lui Wojciech Dobry, Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Principiile designului și importanța lor
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Explorarea principiilor Gestalt ale designului
• Adobe XD vs. Sketch – Ce instrument UX este potrivit pentru tine?
• Cele 10 produse UX pe care le folosesc designerii de top