Când utilizatorii deschid un site web sau o aplicație, ei observă mai întâi elementele de design evidente: logo, culori, pictograme, ilustrații și imagini. Deși aceste elemente contribuie la experiența generală a utilizatorului, ele sunt, de fapt, piese ale unui puzzle mai mare: designul de interacțiune. Acest concept poate fi mai subtil pentru utilizatorii finali decât o pagină de start nouă și strălucitoare, dar este esențial în crearea unei experiențe digitale atractive și intuitive.

Ce este designul de interacțiune?

Designul de interacțiune se referă la facilitarea interacțiunilor dintre utilizatori și produse (cel mai adesea, aceste produse sunt aplicații sau site-uri web). Potrivit Interaction Design Foundation, „scopul designului de interacțiune este de a crea produse care să permită utilizatorului să își atingă obiectivul (obiectivele) în cel mai bun mod posibil”. Cu alte cuvinte, designerii de interacțiune sunt responsabili pentru crearea fiecărui element de pe un ecran cu care un utilizator ar putea interacționa, fie prin clic, glisare, atingere sau orice alt tip de acțiune.

Cele cinci dimensiuni ale designului de interacțiune servesc drept model util pentru a înțelege ce presupune acesta. Introdus pentru prima dată de Gillian Crampton Smith, un academician în domeniul designului de interacțiune, modelul includea doar patru dimensiuni. Kevin Silver, un designer de interacțiune senior la IDEXX Laboratories, a adăugat-o pe cea de-a cincea.

1D: Cuvintele ar trebui să fie simplu de înțeles și ar trebui să comunice utilizatorului cantitatea potrivită de informații (prea multe detalii pot copleși, în timp ce prea puține informații pot provoca confuzie).

2D: Reprezentările vizuale, cum ar fi imaginile, tipografia și pictogramele, ar trebui să completeze cuvintele pentru a comunica informații utilizatorului.

3D: Obiectele fizice sau spațiul se referă la hardware-ul și obiectele reale cu care interacționează un utilizator. De exemplu, aceștia folosesc un smartphone sau un laptop cu un mouse? Și unde se află, la biroul lor sau într-un metrou aglomerat?

4D: Timpul se referă la modul în care utilizatorii ar putea măsura progresul, cu ajutorul sunetului și al animației, de exemplu, precum și la timpul pe care îl petrec interacționând cu primele trei dimensiuni.

5D: Comportamentul a fost adăugat de Kevin Silver și include modul în care dimensiunile anterioare definesc interacțiunile unui produs. Ea include, de asemenea, reacțiile utilizatorilor și ale produsului.

Relații: 6 motive pentru care designerii UX ar trebui să exploreze interacțiunea gestuală

10 exemple de design de interacțiune

Cum arată interacțiunea de design în viața reală? Iată câteva dintre exemplele noastre preferate găsite pe Dribbble.

De Jony vino. Să împarți nota de plată cu prietenii tăi nu este întotdeauna atât de ușor pe cât pare, mai ales dacă ești mai mult o persoană vizuală decât una care se pricepe la cifre. Acest concept de aplicație vă permite să introduceți factura totală, să selectați procentul de bacșiș și apoi să vedeți cât va plăti fiecare persoană. Cea mai bună parte? În loc să ajustați manual partea fiecărei persoane și să trebuiască să actualizați în mod constant partea fiecăruia, puteți pur și simplu redimensiona secțiunea fiecărei persoane în aplicație și numerele se vor recalcula automat pentru toată lumea.

De Prem Gurusamy. Pe majoritatea site-urilor de comerț electronic, trebuie să navigați într-o parte complet diferită a site-ului sau a aplicației pentru a vă vizualiza coșul. Cu această interacțiune, puteți vedea instantaneu cum articolele dvs. „zboară” în coșul dvs. imediat ce faceți clic pe butonul „Adaugă în coș”. Coșul continuă să vă afișeze vizual la suprafață articolele, chiar și atunci când explorați alte părți ale site-ului.

De Igor Pavlinski. Aplicațiile de social media sunt renumite pentru supraîncărcarea cu informații, arătându-vă toate poveștile de top, videoclipurile sau articolele în trend și știrile de ultimă oră deodată. Acest concept pentru o nouă aplicație de social media pune din nou controlul în mâinile utilizatorului, organizând conținutul în funcție de sursă (cum ar fi YouTube, Vimeo, Twitter sau Reddit) și lăsându-vă să alegeți ce canal să explorați. Acest aspect asemănător unui card elimină, de asemenea, necesitatea de a trece de la o aplicație la alta pentru a consuma conținutul preferat. În schimb, este ușor să alternezi între surse în cadrul aceleiași experiențe.

By tubik. Există un milion și unu de moduri de a vă personaliza burgerul. Iar atunci când comandați de pe smartphone, selectarea fiecărui ingredient individual pe un ecran mic poate fi un exercițiu de dexteritate. Acest concept de interfață utilizator pentru aplicația Tasty Burger simplifică experiența comenzii prin compararea ingredientelor pe tipuri. În loc să afișați o listă lungă cu fiecare variantă posibilă de brânză, produs, carne sau chiflă, faceți mai întâi clic pe categoria de ingredient (cum ar fi brânza) și apoi vă sunt prezentate diferitele tipuri, cum ar fi gouda sau comte.

By Rahul.Design. Dacă sunteți în căutarea unei case și nu puteți vedea proprietatea în persoană, următoarea cea mai bună opțiune este să faceți un tur virtual. Acest concept pentru aplicația de imobiliare, Spec, valorifică comportamentul nostru natural atunci când privim un spațiu nou. Puteți face clic în orice cameră, cum ar fi bucătăria sau camera de zi, și să vă mișcați telefonul pentru a obține o vedere la 360 de grade. Este ușor să treci de la o cameră la alta cu o singură atingere.

De Forest Plasencia. Filtrele oferă o modalitate puternică și ușoară de a scoate la suprafață diferite felii de informații. Dar, problema cu o mulțime de interacțiuni cu filtrele este că acestea deschid o fereastră pop-up sau o pagină nouă în aplicație, ascunzând exact informațiile pe care doriți să le filtrați. Această micro-interacțiune păstrează totul în aceeași vizualizare, chiar și atunci când filtrați. În acest fel, puteți vedea că datele se schimbă instantaneu atunci când selectați diferite criterii de filtrare.

De Dmitro Petrenko. Este mai ușor ca niciodată să vă armați și să vă monitorizați casa datorită aplicațiilor pentru smartphone, dar între 94%-99%

Relaționat: Crearea unui instrument care înregistrează interacțiunile utilizatorului

De Gil. Această simplă interacțiune cu pagina îmbunătățește experiența utilizatorului la fața locului și ajută compania să mențină vizitatorii pe paginile lor, mai mult timp. Scopul principal al site-ului este de a prezenta modul în care aceste proprietăți pot fi folosite în natură, ca birou și ca extensii. În loc să creeze experiențe separate pentru fiecare scop, această pagină imită fluxul utilizatorului de a compara și contrasta diferitele utilizări și de a trece fără probleme de la una la alta.

De Dominik Martin. Interacțiunile nu trebuie să fie îndrăznețe și vizibile pentru a avea un impact. Acest concept de aplicație simplifică un comportament pe care îl disprețuim cu toții – alegerea țării de reședință dintr-o listă lungă. În loc ca utilizatorii să parcurgă lista și să își găsească țara, această micro-interacțiune te face mai întâi să alegi prima literă a țării tale și apoi să o găsești dintr-o listă de țări mult mai mică și concentrată.

De Mykolas Puodziunas. Din ce în ce mai multe site-uri de vânzare cu amănuntul vă facilitează „vizualizarea rapidă” a unui articol, mai degrabă decât să faceți clic în fiecare pagină de detalii și apoi să trebuiască să vă întoarceți la rezultatele căutării pentru a răsfoi mai multe articole. Acest concept merge cu un pas mai departe și vă permite să vizualizați fiecare produs în diferitele sale culori disponibile, fără a fi nevoie să părăsiți pagina de categorie.

Am ratat exemplul dumneavoastră preferat de design de interacțiune? Împărtășiți-l cu noi pe Twitter: @InVisionApp.