Secretul pentru Killer UX Design: Totul este în microinteracțiuni
Publicat: 2016-11-13Designul este în detalii.
Zilele trecute i-am scris unei vechi prietene un mesaj care nu a fost ușor de scris pentru că era un mesaj pentru a-mi exprima condoleanțe pentru pierderea mamei ei. Am vorbit la telefon de câteva ori la începutul săptămânii, dar am vrut să-i trimit un mesaj rapid pe aplicația Facebook Messenger pentru a-i spune că mă gândesc la ea. Am terminat de compus mesajul și am decis să adaug puțin „inimă” la sfârșit.
Acest simplu act de atingere a inimii s-a transformat într-o explozie încântătoare de inimi roșii plutitoare pe ecranul telefonului meu, care a fost însoțită și de câteva efecte sonore stupide. Acest moment în timp, deși scurt și trecător, mi-a adus câteva secunde de surpriză și bucurie într-o perioadă dificilă.
Iată ce s-a întâmplat cu ecranul meu după ce am atins inima roșie.
Aceste detalii minuscule, cunoscute altfel sub numele de microinteracțiuni, pot face experiența dintre un utilizator și un dispozitiv/produs mai distractivă, ușoară, eficientă și umană. De multe ori nici măcar nu observăm aceste microinteracțiuni.
Sunt inteligent subtile și uneori aproape invizibile; dar, pot face un produs ceva pe care un utilizator îl iubește, mai degrabă decât ceva față de care se simt călduț.
Cu alte cuvinte, microinteracțiunile au potențialul de a reduce în mod magic diferența dintre utilizator și tehnologie printr-o conexiune emoțională și umană, încurajându-i totodată să revină pentru mai mult.
Ce sunt microinteracțiunile?
Microinteracțiunile se bazează pe realizarea unui singur moment sau sarcină prin furnizarea unei experiențe încântătoare și feedback util pentru utilizatori. Aceste micro-momente sunt cele care ghidează în cele din urmă un utilizator printr-un flux într-un mod intuitiv și eficient.
Dan Saffer, autorul cărții „Microinteracțiuni” și vicepreședinte de produs pentru Mayfield Robotics , definește microinteracțiunile ca „Momente de produs conținute care gravitează în jurul unui singur caz de utilizare - au o sarcină principală. De fiecare dată când modificați o setare, vă sincronizați datele sau dispozitivele, setați o alarmă, alegeți o parolă, vă conectați, setați un mesaj de stare sau preferati sau „apreciați” ceva, interacționați cu o microinteracțiune. Sunt peste tot: în dispozitivele pe care le transportăm, în aparatele din casa noastră, în aplicațiile de pe telefoanele și desktopurile noastre, chiar și încorporate în mediile în care trăim și lucrăm. Cele mai multe aparate și unele aplicații sunt construite în întregime în jurul unei microinteracțiuni.”
Potrivit lui Saffer, microinteracțiunile sunt bune pentru:
- Realizarea unei singure sarcini și a unei singure sarcini.
- Interacțiunea cu o singură bucată de date, cum ar fi temperatura sau evaluarea unei melodii.
- Controlarea unui proces în desfășurare, cum ar fi volumul pentru o melodie pe Spotify
reglarea unei setari. - Vizualizarea sau crearea unei mici piese de conținut, cum ar fi o stare pe Facebook
activarea sau dezactivarea unei caracteristici sau funcții.
De ce să includeți microinteracțiuni în design-urile dvs.?
- Acestea ajută la încurajarea utilizatorilor să interacționeze cu site-ul dvs., indiferent dacă face clic pe un buton, distribuie conținut sau răspunde la un mesaj sau la o notificare.
- Ele oferă utilizatorilor feedback imediat.
- Ele ajută utilizatorii să navigheze prin site.
- Ele ajută la ghidarea utilizatorilor prin flux într-un mod intuitiv și ușor.
Saffer descrie cele patru părți ale microinteracțiunilor ca un declanșator, reguli, feedback și bucle și moduri. Să ne aprofundăm puțin în ceea ce înseamnă fiecare dintre acești pași.
Trigger
Declanșatorul este ceea ce inițiază o interacțiune. Este un indiciu, vizual sau de altă natură, care încurajează un utilizator să ia măsuri. Un declanșator poate fi fluturarea unei pictograme pentru a încuraja un utilizator să atingă sau să facă clic pe ea. Butonul albastru care plutește în partea de sus a feedului tău Twitter și care spune „tweit-uri noi” cu o săgeată îndreptată în sus te determină să dai clic pe el pentru a vedea toate tweet-urile noi care au fost postate de când ai fost plecat.
Unele dintre cele mai bune declanșatoare sunt cele care anticipează de fapt nevoia unui utilizator fără ca acesta să fie nevoit să-și afirme nevoile . Acest lucru necesită ca proiectantul să colecteze cercetările utilizatorilor și date comportamentale pentru a ajuta la prezicerea nevoilor utilizatorului și pentru a proiecta declanșatorii în consecință.
Reguli
Declanșatorul interacționează cu regulile. Aceste reguli stabilesc ceea ce se întâmplă în timpul interacțiunii. Regulile ar trebui să pară naturale pe care un utilizator să le realizeze și există pentru a ajuta la minimizarea erorilor. Un exemplu excelent în acest sens este dacă încercați să trimiteți un e-mail prin Gmail fără a introduce un subiect, Gmail vă va informa că „e-mailul nu are un subiect” vă va întreba dacă doriți să îl trimiteți în continuare.
Recomandat pentru tine:
Cum va transforma Metaverse industria auto din India
Ce înseamnă prevederea anti-Profiteering pentru startup-urile indiene?
Cum startup-urile Edtech ajută forța de muncă din India să își îmbunătățească abilitățile și să devină pregătite pentru viitor...
Stocuri de tehnologie New-Age săptămâna aceasta: problemele Zomato continuă, EaseMyTrip postează Stro...
Startup-urile indiene iau comenzi rapide în căutarea finanțării
Platforma de marketing digital Logicserve are finanțare de 80 INR Cr, rebrand-urile ca LS Dig...
Părere
Feedback-ul se bazează pe reguli și oferă utilizatorilor informații despre ceea ce se întâmplă în acel moment. Îmi place în special feedback-ul pe care îl primesc cu privire la formularele care sunt concepute ținând cont de utilizator. Încorporarea validării inline în designul dvs. în contextul potrivit poate fi foarte utilă pentru utilizator.
De exemplu, în timp ce introduc un nume de utilizator, dacă văd o bifă verde, știu că pot trece la completarea câmpului pentru parolă. Nu vă pot spune de câte ori completez câmpurile pentru nume de utilizator și parolă, apăs pe trimitere și mi se spune cu roșu că numele de utilizator sau parola sunt incorecte.
Problema cu această situație este că nu am absolut nicio idee care câmp sau literă este incorectă . Dacă pot face modificările corecte pe parcurs, întregul proces este mult mai ușor. Aceste mici semne verzi, oricât de nesemnificative ar părea, fac toată diferența în ceea ce se simte un utilizator în timpul și după procesul de completare a formularelor și au potențialul de a duce la rate mai mari de completare.
Formularul de înscriere pe Twitter este un exemplu minunat și simplu despre cum ar trebui utilizată validarea inline. Semnele de selectare apar în partea dreaptă a câmpului de formular pe măsură ce finalizez acțiunea. Mesajul de eroare roșu se dovedește, de asemenea, util, spunându-mi ce trebuie să fac pentru a completa corect formularul.
Aplicația de călătorie Hopper utilizează, de asemenea, microinteracțiunile cu înțelepciune. După ce am introdus datele și destinațiile despre care sunt interesat să aflu mai multe, drăguțul iepure țopăie în timp ce aplicația „gândește” și trage rezultate pentru a le vedea. Nimănui nu-i place să aștepte. Cu toate acestea, să văd iepurașul sărind aduce o mică încântare acestei experiențe scurte de așteptare, în timp ce îi informează utilizatorul că ceva se întâmplă de fapt și rezultatele vor fi afișate în curând.
Bucle și moduri
Buclele și modurile determină meta-regulile mai mari ale interacțiunii. Dacă o microinteracțiune este utilizată în mod repetat, este important să se ia în considerare modul în care interacțiunile se schimbă în consecință. Gândiți-vă la modul în care această interacțiune se adaptează în funcție de comportamentul utilizatorului. Care este diferența dintre microinteracțiunea prima dată când este utilizată față de a 7-a oară?
Încercați să creați bucle care se adaptează în timp, făcând experiența mai bogată de fiecare dată când interacționează cu ea. Funcția Facebook On This Day Memories este un exemplu excelent despre cum să creați experiențe care se adaptează de fiecare dată când este implicat.
Majoritatea utilizatorilor Facebook își verifică fluxurile de știri de mai multe ori pe zi. A avea o funcție care, ocazional, aduce o actualizare de stare sau o imagine de acum 4 ani poate avea un efect emoțional (sperăm pozitiv) asupra utilizatorului. Există potențialul ca această microinteracțiune specială să aibă un efect negativ. De exemplu, afișarea unei postări vechi care poate face utilizatorul trist sau stresat are consecințe negative neintenționate. Sugerez ca Facebook să analizeze cum să împiedice aceste experiențe negative să apară.
Lucruri de care trebuie să țineți cont atunci când proiectați microinteracțiuni
Nu exagera designul . Microinteracțiunile nu ar trebui să pară ciudate sau să dureze prea mult timp pentru a se încărca. Ele ar trebui să servească unui scop în timp ce curge perfect în designul dvs. general.
Prima dată când cineva experimentează microinteracțiunea, el/ea nu ar trebui să se simtă la fel ca atunci când o folosește a 10-a sau a 100-a oară. Faceți microinteracțiunile adaptabile contextului. Dacă este prima dată pentru un utilizator, săgeți să ajute la navigarea în aplicație. Oferă-le opțiunea de a nu mai afișa acel mesaj, astfel încât să nu devină enervant pe viitor.
Asta mă duce la al treilea sfat. Nu începe de la nimic . Înțelegeți utilizatorii dvs., motivațiile lor și contextul, efectuând cercetări despre utilizatori. Informațiile pe care le adunați vă vor oferi informațiile de care aveți nevoie pentru a vă face decizia mai eficientă și mai utilizabilă. Dacă sunt acolo pentru a 20-a oară, află care sunt motivațiile și obiectivele lor și creează microinteracțiuni pe baza constatărilor tale.
Amintiți-vă, scopul este ca aceste interacțiuni să fie subtile și eficiente. Asigurați-vă că stilul microinteracțiunii se potrivește în mod natural cu stilul designului general al interfeței. Interacțiunile nu ar trebui să pară deplasate sau confuze, iar microinteracțiunile ar trebui să fie conectate la designul general al aplicației.
6 exemple de microinteracțiuni realizate corect
Surpriză pe mânecă
Am auzit pe cineva descriind că a avut aceeași cămașă moale și confortabilă cu mânecă lungă de ani de zile. Într-o zi, în timp ce alerga pe o potecă umbrită mărginită de copaci, purtând aceeași cămașă cu mâneci lungi, alergătoarea a descris că i-a făcut frig și a tras țesătura suplimentară, destinată zilelor reci pentru a-și acoperi mâinile, pentru a-și răsturna vârfurile peste mâini. Țesătura de dedesubt a dezvăluit afirmația „ești iubit”.
Aceste cuvinte, imprimate în secret în locul exact al țesăturii, au fost ascunse pentru a fi afișate în momente ca acestea, surprinzând pe cei care o poartă cu un micro-moment de încântare .
Slack Emojis
Site-ul Little Big Details organizează câteva exemple grozave de microinteracțiuni. Una dintre cele pe care le prezintă este atunci când căutați un emoji în Slack și emoji-ul pe care îl căutați nu există, emoji-ul „plâng” este sugerat ca opțiune. În loc ca utilizatorul să se enerveze când nu găsește ceea ce își dorește, emoji-ul „plângă” îl lasă amuzat .
Google Translate
Când apăsați butonul „ascultați” pentru a doua oară pe Google Translate, aceasta repetă traducerea cu o viteză mai mică, presupunând că aveți nevoie de puțin timp suplimentar pentru a înțelege ce spune.
Modul de noapte pe Google Maps
Mi-a plăcut întotdeauna cum fundalul aplicației Google Maps devine negru în funcție de timp. Modul de noapte este destinat să ajute la vederea și siguranța pe timp de noapte și este complet automat.
Fă-mi pulsul
Consultați acest site Make Me Pulse pentru o experiență interactivă cu adevărat încântătoare. Utilizarea microinteracțiunilor ( bare de progres, sunete, culori ) ajută la ghidarea utilizatorilor prin fluxul prin declanșatoare, reguli, feedback și bucle.
Bare de defilare
Chiar și mica bară de defilare gri din partea dreaptă a acestei pagini este un exemplu minunat și simplu al modului în care o microinteracțiune poate fi utilă și eficientă, permițându-vă, ca cititor, să știți cât de mult material mai rămâne de citit din acest articol.
Sperăm că acest articol te inspiră să începi să încorporezi microinteracțiuni în design-ul tău. Acestea au potențialul de a transforma experiența pe care utilizatorii o au cu designul dvs. din doar ok în ceva cu adevărat memorabil.
[Această postare a apărut pentru prima dată pe Proto.io și a fost reprodusă cu permisiunea.]