Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes

Există o linie fină între o interacțiune care funcționează și una care este inutilizabilă. Principiile de proiectare a interacțiunii ajută la reducerea decalajului.

Designul de interacțiune bine executat joacă un rol imens în implementarea unui UX excelent și este indiscutabil unul dintre fundamentele principiilor de design UX.

„Inutilizabil” înseamnă „Merg mai departe” și oricât de „arătos” este designul vizual – cât de elegantă este acea animație – încurcă designul de interacțiune și UX-ul tău este capabil. Faceți-o bine și veți fi pe drumul spre un UX mult mai bun, chiar dacă estetica este scurtă. Produsul va avea șanse mult mai mari de a reuși, ceea ce, la rândul său, contribuie la rezultatul final.

Interaction Design (IxD) este definit de Interaction Design Association (IxDA) ca „structura și comportamentul sistemelor interactive. Designerii de interacțiune se străduiesc să creeze relații semnificative între oameni și produsele și serviciile pe care le folosesc, de la computere la dispozitive mobile la aparate și nu numai.

Experiența este esențială, deoarece determină cât de drag își amintesc oamenii interacțiunile. —Don Norman în The Design of Everyday Things.

Respectarea principiilor de proiectare a interacțiunii contribuie enorm la un design de interacțiune excelent, care, la rândul său, va contribui la experiență.

Este posibil ca toate dispozitivele și tehnologia de astăzi să fie înlocuite cu ceva complet diferit peste noapte, dar, datorită principiilor sale de durată, un design excelent de interacțiune ar fi încă realizabil. Aceste principii constante se referă la ceea ce motivează oamenii, comportamentul lor și modul în care gândesc.

Imaginați-vă dacă fiecare mâner de la fiecare ușă ar funcționa diferit. Pentru unul, ar trebui să împingi mai întâi în uşă apoi în jos; pentru altul ar trebui să tragi în sus în loc să apeși în jos, iar încă altul ar trebui să tragi în sus de două ori și apoi în jos — un dezastru total. De fapt, expresia „întoarce mânerul ușii” presupune că există o singură modalitate de a face acest lucru.

Nimănui nu-i place să fie bătut peste cap de strigăte de „urmați regulile”, dar designul de interacțiune cu adevărat excelent se bazează pe un set de standarde, bune practici, convenții și reguli generale (euristice). Nu este o știință zdrobită, dar ele formează piatra de bază a IxD și fac posibilă interacțiunea cu cea mai mică frecare. Standardele de interfață nu înăbușează creativitatea – nu sunt reguli stricte și rapide, ci linii directoare fundamentale care ajută un designer să stabilească o bază de „design utilizabil și familiar” de la care să inoveze.

Principii de proiectare a interacțiunii și bune practici

Proiectarea interacțiunii se încadrează în disciplina Interacțiunii om-calculator (HCI), „Un domeniu de studiu multidisciplinar care se concentrează pe proiectarea tehnologiei computerelor și, în special, pe interacțiunea dintre oameni (utilizatori) și computere.” – așa cum este definit de Interacțiune Fundația de design.

Designul excelent al interfeței de utilizator realizează încântarea pură a utilizatorilor prin combinarea principiilor de bază de proiectare a interfeței de utilizator cu designul de interacțiune bazat pe obiective.

• Designul de interacțiune de succes folosește obiective simple, clar definite, un scop puternic și o interfață intuitivă.
• Într-un efort de a menține interacțiunile simple și ușoare, designul de interacțiune bazat pe obiective nu pune nimic mai mult decât minimul absolut necesar în fața utilizatorilor pentru ca aceștia să finalizeze o sarcină.

Să ne aruncăm în câteva dintre cele mai importante principii (nu o listă exhaustivă în niciun caz):

Descoperibilitate

Practic, dacă utilizatorul nu îl poate găsi, nu există. Trebuie să fie clar ca un clopoțel ce acțiuni sunt posibile într-o interfață de utilizare în mai puțin de o microsecundă - de exemplu, etichetarea pictogramelor ca cea mai bună practică. Pictogramele neetichetate echivalează cu aruncarea de blocaje în calea unui utilizator, deoarece vor trebui să se oprească pentru a descifra sensul. Întrerupeți „fluxul”. Și iată un șocant... Nu sunt interesați să învețe interfața dvs. de utilizare.

Semnificative

Foarte legată de descoperibilitate, utilizarea eficientă a semnificanților asigură că affordance-urile - posibilitatea unei acțiuni asupra unui obiect - sunt indicate clar în UI. Semnificatoarele oferă indicii puternice, cum ar fi semnale sau indicatoare. Indicând o interacțiune disponibilă, aceștia clipesc lumini verzi la utilizator strigând: „Iată-mă, poți să mă apeși (dați clic, glisați etc.)!” O affordance poate exista în interfața de utilizare, dar poate rămâne ascunsă, deoarece, dacă îi lipsește un semnificant, rămâne invizibil. Un exemplu ar putea fi o „interacțiune gestuală ascunsă” care nu se dezvăluie decât dacă utilizatorul glisează accidental la stânga sau la dreapta (pentru a șterge ceva, de exemplu).

Affordance-urile definesc ce acțiuni sunt posibile. Semnificatorii specifică modul în care oamenii descoperă acele posibilități: semnificanții sunt semne, semnale perceptibile a ceea ce se poate face. Semnificatorii au mult mai multă importanță pentru designeri decât affordance-urile. —Don Norman (Norman, 2013)

Părere

După semnificanți, următoarea comunicare cea mai importantă către utilizator este feedback-ul. Feedback înseamnă: informații explicite despre impactul acțiunii . De asemenea, înseamnă vizibilitate constantă a stării sistemului, adică sistemul ar trebui să se asigure că:

• Utilizatorii sunt ținuți la curent cu ceea ce se întâmplă.
• Există informații continue despre rezultatele acțiunilor lor și despre starea curentă a produsului (sistemului).
• Nu există nicio confuzie în mintea unui utilizator cu privire la starea produsului, adică la procesarea, încărcarea, căutarea, încărcarea etc., sau orice altă schimbare de stare.
• După ce o acțiune a fost executată, este ușor să determinați noua stare.

Modele conceptuale și modele mentale

Designul excelent de interacțiune prezintă toate informațiile de care un utilizator are nevoie pentru a crea un model conceptual bun al sistemului, conducând astfel la înțelegerea și la un sentiment de control. Un model conceptual îmbunătățește atât capacitatea de descoperire, cât și evaluarea rezultatelor atunci când se utilizează sistemul.

Modelele mentale – sau hărțile cognitive – sunt imaginile din mintea unui utilizator care îi informează așteptările cu privire la o anumită interacțiune și cum funcționează ceva în lumea reală. Hărțile cognitive sunt reprezentări interne ale mediului nostru fizic, în special asociate cu relațiile spațiale. Utilizând eficient modelul mental al utilizatorului, designerii de interacțiune pot crea sisteme care „se simt” intuitive.

Designerul inventează un model conceptual – modelul de design și așa intenționează designerul să funcționeze dispozitivul sau software-ul. Singura modalitate de a comunica acest model utilizatorilor este implementarea acestuia printr-o interfață de utilizare. Utilizatorii interacționează apoi cu modelul conceptual și își creează propriul model mental despre cum funcționează ceva.

Designerii nu pot spune utilizatorilor cum au intenționat să funcționeze o aplicație – ei trebuie să proiecteze o interfață de utilizare în mod corespunzător pentru a-și comunica în mod clar scopul. Cu alte cuvinte, faceți interfața ușor de înțeles și utilizat. Proiectarea proastă a interacțiunii riscă să creeze un model mental greșit pentru utilizator. Acest lucru duce la confuzie și la erori ale utilizatorului, deoarece încearcă să opereze aplicația într-un mod pe care designerul nu a intenționat.

Mapări

Cartografierea este relația dintre controale și efectul lor în lume. Principiul feedback -ului este un văr apropiat al cartografierii, deoarece cele două principii lucrează împreună pentru a crea o experiență perfectă. Aproape toate artefactele au nevoie de un fel de mapare între controale și efecte - în cazul designului interfeței, este relația dintre un control și funcția rezultată.

Cartografierea naturală - profitând de analogiile fizice și standardele culturale - duce la o înțelegere imediată. De exemplu, un designer poate folosi analogia spațială în UI:

• Pentru a crește o anumită valoare cu o componentă de glisare, glisați un glisor spre dreapta,
• Pentru a o reduce, glisați spre stânga.

Unele mapări naturale sunt biologice, ca în standardul universal că un nivel în creștere reprezintă mai mult, un nivel în scădere, mai puțin.

Constrângeri

Conceptul de design al constrângerilor este o modalitate de a determina cum să restrângem tipul de interacțiune cu utilizatorul care poate avea loc într-un moment dat. Constrângerile de proiectare a interacțiunii ajută la interacțiunea eficientă prin furnizarea de „șine de ghidare” pentru utilizatori – aproape ca o mână de ghidare care conduce interacțiunile care pot apărea.

Constrângerile în proiectare asigură că numai anumite lucruri sunt activate, sau chiar vizibile, pentru a ghida utilizatorul către anumite interacțiuni. Se ia în considerare dimensiunea, scara, proporția, accentul și starea și modul în care acestea, lucrând împreună în armonie, ajută la crearea ierarhiei și, în consecință, influențează utilizatorul. Constrângerile aplicate corect ajută, de asemenea, la reducerea șanselor de eroare ale utilizatorului.

Opusul constrângerii este atunci când fiecare opțiune este oferită utilizatorului, ceea ce face dificil pentru acesta să decidă ce să facă în continuare. Este principiul alegerii . Cu cât sunt mai multe opțiuni, cu atât este mai dificil să alegem oricare dintre ele - suntem copleșiți de toate posibilitățile.

Designul excelent de interacțiune nu pune toate opțiunile disponibile pe interfață, ci o limitează la ceea ce este cel mai important în orice moment dat.

Consecvență, standarde și euristică

Toate acestea sunt legate — frații de tipare (mai jos), dacă vreți. Pentru a preveni erorile utilizatorului și pentru a face o aplicație ușor de învățat, este esențial ca un model de interacțiune să fie consecvent. Consecvența îmbunătățește UX, utilizabilitatea generală și eficiența cu care utilizatorii pot folosi produsele digitale.

Consecvența înseamnă utilizarea elementelor similare pentru a realiza sarcini similare și a avea funcții și comportamente similare pe tot parcursul – o interfață consecventă este una care urmează reguli, cum ar fi folosirea aceleiași operații pentru a face ceva.

Produsele care se străduiesc să fie foarte utilizabile urmează convenții, standarde, bune practici și euristici de utilizare bine stabilite (reguli generale generale, nu reguli specifice de utilizare).

Conformarea unei convenții , de exemplu, poate fi în modul în care este așezată o pagină. Utilizatorii web petrec 69% din timp vizualizând jumătatea stângă a paginii și 30% vizualizând jumătatea dreaptă. Prin urmare, este mai probabil ca un site să fie profitabil dacă urmează un aspect convențional.

Un standard ar putea fi un traseu breadcrumb (un dispozitiv de orientare și navigare care este imediat recunoscut) sau un meniu de navigare global în partea de sus a paginii, ca pe site-ul BCC.

Modele și capacitatea de învățare

Cât de ușor poate un utilizator nou să învețe să navigheze într-o interfață? Nimeni nu dorește să învețe un nou mod de a face lucrurile decât dacă oferă un beneficiu semnificativ față de ceea ce a venit înainte – totuși suntem în mod constant inundați de interacțiuni netestate, neconvenționale.

Componentele sau modelele comune oferă o învățare instantanee. Odată ce ai învățat să folosești o lingură, vei ști întotdeauna cum să folosești o lingură. La fel și cu mersul pe bicicletă, cu patinajul... aceeași construcție se aplică componentelor UI pe care le folosim în fiecare zi: butoane, câmpuri de text, meniuri drop-down, casete de selectare, butoane radio, rotative, glisoare, pictograme, acordeoane, casete de căutare etc.

Cele mai bune modele de interacțiune nu încearcă să reinventeze roata, ci fac o utilizare eficientă și eficientă a tiparelor într-un mod nou.

Modelele nu numai că încurajează capacitatea de învățare, dar oferă și consecvență (un alt principiu, discutat mai sus) și o aduc în conformitate cu așteptările utilizatorului cu privire la modul în care ar trebui să funcționeze lucrurile.

Ierarhie vizuală și accent

În timpul interacțiunii cu un site sau o aplicație, oamenii caută informațiile cele mai relevante pentru căutarea lor. Ierarhia vizuală se referă la aranjarea elementelor într-un mod care implică importanță. Ierarhia vizuală în design influențează ordinea în care ochiul uman percepe ceea ce vede. Nu totul primește o „greutate” egală; ordinea este creată prin contrastul vizual între obiectele dintr-un câmp de percepție. Contrastul vizual (accentuarea) poate fi obținut prin dimensiune, proximitate, culoare, opacitate și contrastul tonal real între elemente.

Nu subestimați puterea ierarhiei vizuale. A fost folosit foarte eficient în toate tipurile de design de eoni, în arhitectură și design industrial, precum și în design de imprimare. Vedeți câteva modele grozave de poster. Folosind bine această tehnică în proiectarea interacțiunii, lucrurile potrivite par să apară la momentul potrivit în modul potrivit.

Excelenți designeri de interacțiune folosesc puterea accentului pentru a realiza cu succes designuri de interfață „suple și medii”, care par să funcționeze ca magic.

Legea lui Fitts

Credeți sau nu, această lege provine din studiile timpurii privind mișcarea mușchilor umani și țintirea performanței operatorului de telegraf și a sarcinilor liniei de producție și a fost adaptată ulterior la HCI (interacțiunea om-calculator). Practic spune: „Timpul de obținere a unei ținte este o funcție de distanța până la și dimensiunea țintei.”

În termeni mai simpli, este vorba despre cât de departe și cât de mare este o țintă și cât de aproape este aceasta în raport cu alte ținte. Mișcările sau atingerile mai scurte ale mouse-ului sunt mai bune — este întotdeauna mai rapid să faceți clic sau să glisați pe o țintă dacă aceasta este mai aproape de poziția de pornire. Sarcinile înrudite ar trebui să fie, de asemenea, foarte aproape una de cealaltă, astfel încât utilizatorii să nu fie nevoiți să se arunce în jurul ecranului interacționând cu interfața de utilizare.

Legea lui Fitts poate prezice cu exactitate timpul necesar pentru deplasarea și selectarea unei ținte. O țintă poate fi un buton, un meniu derulant sau un alt element interactiv de pe un ecran. Dacă este prea departe, prea mic sau dacă elementele pe care se poate face clic sunt prea apropiate, eficiența și capacitatea de utilizare a interfeței de utilizare sunt mult reduse.

Diagrama Gutenberg, Aspecte Z- și F-Pattern

Aceste modele sunt aplicabile în diferite situații, în funcție de conținut, și sunt utilizate în cea mai mare parte de publicul occidental. Diagrama Gutenberg descrie un model general prin care se mișcă ochii atunci când se uită la informații omogene și distribuite uniform - în principal site-uri cu text greoi, cum ar fi bloguri sau site-uri de știri. Diagrama Gutenberg sugerează că zonele puternice și slabe de pânză se încadrează în afara căii gravitaționale de citire și primesc o atenție minimă, dacă nu sunt subliniate vizual într-un fel.

Modelul Z urmează forma literei Z. În anumite cazuri, acest model este denumit și model Zig-Zag. Principala diferență cu diagrama Gutenberg este că modelul în Z sugerează că spectatorii vor trece prin cele două zone nedorite. În caz contrar, încă încep și se termină în aceleași locuri și tot trec prin mijloc. Ca și în cazul lui Gutenberg, un designer ar plasa cele mai importante informații de-a lungul traseului modelului Z.

F înseamnă rapid și se referă la modul în care utilizatorii citesc conținutul. Modelul F a fost popularizat de un studiu de urmărire a ochilor NNGroup, care a înregistrat peste 200 de utilizatori care citeau conținut de pe web. S-a descoperit că modelele de scanare ale oamenilor erau destul de consistente pe multe tipuri diferite de site-uri.

De ce este acest lucru important? Pe un site de comerț electronic, de exemplu, pentru a maximiza scanarea, este posibil să doriți să aranjați cel mai important conținut într-un mod care să urmeze modelul F.

Recunoaștere, mai degrabă decât reamintire

Recunoașterea se referă la capacitatea noastră de a „recunoaște” un eveniment sau o informație ca fiind familiară, în timp ce amintirea este mult mai mult o „povara cognitivă” care implică extragerea detaliilor conexe din memorie. Afișarea utilizatorilor lucruri pe care le pot recunoaște îmbunătățește gradul de utilizare față de nevoia de a reaminti articole de la zero.

De exemplu, utilizarea pictogramelor într-o interfață de utilizare este puternică, deoarece permite recunoașterea instantanee a unui simbol. Creierul nostru procesează (recunoaște) simboluri de aproximativ 1000 de ori mai rapid decât citirea textului. Dacă un designer afișează o pictogramă de semn de avertizare standard într-un dialog, acesta îl face imediat pe utilizator să se concentreze și să acorde atenție deoarece următoarea acțiune poate fi distructivă. Dar dacă o pictogramă este proiectată în așa fel încât să oblige utilizatorii să-și amintească și să descifreze sensul - o mână ridicată, de exemplu, în loc de pictograma de avertizare - scade eficiența și capacitatea de utilizare a interfeței de utilizare.

Design estetic și minimalist

Trebuie să înțelegi profund esența unui produs pentru a putea scăpa de părțile care nu sunt esențiale. — Jonathan Ive.

Acesta este unul dintre cele mai provocatoare principii pentru că este greu. Tendința este ca designerii și managerii de produs să adauge toate opțiunile disponibile sub soare și să lase utilizatorul să decidă calea pe care doresc să o urmeze. Aceasta este cu adevărat abordarea leneșă și duce la produse pline de dezordine neesențială.

Interfețele trebuie curățate de elementele inutile și conținutul care nu sprijină obiectivele și sarcinile utilizatorului. Designerii nu ar trebui doar să proiecteze interfețe de utilizare plăcute din punct de vedere estetic, ci și să acorde prioritate informațiilor de la ecran la ecran în fluxul utilizatorului. Folosind ierarhia vizuală și magia accentuării, ar trebui să fie prezentate doar minimul esențial și absolut de informații necesare pentru ca utilizatorul să îndeplinească o sarcină.

Michelangelo a spus despre opera sa: „Am văzut îngerul în marmură și l-am sculptat până l-am eliberat”.

Proiectarea unei interacțiuni care este minimalistă, plăcută din punct de vedere estetic și simplă necesită ca designerul să înțeleagă ce se întâmplă exact în momentul în care oamenii vor folosi produsul și să scape de tot ceea ce nu este necesar. Efectuarea cercetării și testarea aprofundată a utilizatorilor pentru a înțelege modul în care utilizatorii vor folosi produsul este de obicei cea mai bună abordare.

Prevenirea erorilor

Utilizatorii sunt adesea distrași atunci când îndeplinesc o sarcină, astfel încât prevenirea erorilor inconștiente prin accent vizual, oferirea de sugestii și utilizarea constrângerilor atent concepute este cheia. O formă de verificare a erorilor, cunoscută și sub denumirea de Poka-Yoke, se referă la implementarea mecanismelor de siguranță pentru a preveni ca un proces să producă erori.

Una dintre cele mai bune moduri de a preveni erorile este proiectarea unui model mental mai bun. Multe greșeli ale utilizatorului apar atunci când modelul proiectantului și interpretarea modului în care ar trebui să funcționeze sistemul nu se potrivesc cu modelul mental al utilizatorului.

Convențiile standard de proiectare ajută (unul dintre principiile menționate mai sus) deoarece ajută utilizatorii să înțeleagă ce acțiuni pot întreprinde. Utilizatorii care interacționează cu site-ul sau aplicația dvs. au folosit mii de alte site-uri și aplicații și se așteaptă ca elementele interactive comune să arate și să funcționeze într-un anumit fel. Pot apărea situații predispuse la erori atunci când produsul dvs. se abate de la aceste convenții.

Avertizați înainte ca erorile să fie făcute și confirmați înainte de acțiuni distructive. Chiar și mai bine decât mesajele de eroare bine implementate este un design atent care previne apariția unei probleme în primul rând. Încercați să eliminați circumstanțele predispuse la erori și continuați să le verificați.

Viitorul Interaction Design

Noile dispozitive, medii și interfețe vor continua să avanseze cu noi posibilități de interacțiune. Controlerele pentru jocuri video evoluează constant și oferă o gamă diversă de comenzi de intrare, precum și feedback haptic. Interfețele gestuale se vor maturiza de la ecrane tactile care acceptă gesturi 2D și 3D, de exemplu, gesturi pe dispozitive iOS și Android, până la utilizarea gesturilor mâinii în spații 3D pentru a interacționa cu spații de realitate virtuală, console de jocuri și dispozitive IoT care ne permit să ne controlăm mediul. .

Ca și în cazul Proiectului Soli de la Google, putem spune sayonara mouse-ului, trackpad-urilor și joystick-urilor și putem trece la interacțiuni gestuale mai naturale folosind mâna și degetele noastre pentru a controla dispozitivele. În anumite cazuri, de exemplu, în interfețele de utilizator conversaționale, metodele de introducere se pot schimba de la tastatură la voce. Cu toate acestea, principiul feedback-ului imediat și continuu sub o anumită formă (voce, haptic și vizual) va fi în continuare necesar.

Principiile fundamentale de proiectare a interacțiunii vor juca întotdeauna un rol central în proiectarea sistemelor viitoare și este important ca designerii UX/UI să le țină cont. Nu sunt reguli stricte și rapide, dar vor crea produse și servicii mai bune și mai atractive. Așa cum filmele de succes folosesc tehnici străvechi de povestire care urmează o structură încercată și adevărată, onorata de timp, există principii de proiectare a interacțiunii care există pentru un motiv întemeiat. Urmărirea acestora va aduce beneficii oricărui designer de produs, prin îmbunătățirea gradului de utilizare și prin promovarea unei adoptări mai largi a produselor lor.

Citiri suplimentare pe Blogul Toptal Design:

• Principii de proiectare: Introducere în ierarhie
• Cele mai bune practici de design UI și greșeli comune
• Explorarea principiilor Gestalt ale designului
• Ghidul cuprinzător al arhitecturii informaționale