Înțelegerea gesturilor pentru designul UI

Publicat: 2021-03-29

Atingerea, glisarea, glisarea, apăsarea lungă – acestea sunt doar câteva dintre gesturile care au ajuns să domine experiențele noastre digitale. iPhone-urile cu ecran tactil au integrat gesturile mobile cu ani în urmă și de atunci nu ne-am uitat înapoi.

Gesturile afectează modul în care interacționăm cu interfețele, inclusiv telefoanele, laptopurile și iPad-urile. Dar nu trebuie să căutăm departe pentru a găsi o interfață gestuală dincolo de dispozitivele noastre de lucru și de divertisment. Nu mai este neobișnuit să folosiți gesturi atunci când interacționați cu ecranele mașinii sau chiuvetele din baie.

Interfețele naturale de utilizator (NUIs) sunt atât de naturale pentru utilizatori, încât interfața se simte și, uneori, este invizibilă, ca o interfață cu ecran tactil. Unele NUI folosesc chiar controlul prin gesturi, permițând utilizatorilor să interacționeze cu interfața fără contact fizic direct. BMW a lansat recent o funcție de control prin gesturi care oferă utilizatorilor control fără atingere asupra volumului mașinii, apelurilor și multe altele.

Gesturile sunt din ce în ce mai frecvente în designul interfeței cu utilizatorul și joacă roluri din ce în ce mai complexe în viața noastră de zi cu zi.

Pe măsură ce tehnologia avansează, designerii și companiile UX și UI vor trebui să se adapteze. Nu trebuie să cunoașteți toate complexitățile tehnologice sau să aveți cunoștințe aprofundate despre inteligența computerului. Totuși, ar trebui să aveți o înțelegere de bază a capabilităților, funcțiilor și celor mai bune practici de proiectare pentru tehnologia gestuală.

Ce face un gest bun

Deci, ce sunt gesturile?

Gesturile sunt o modalitate de comunicare. Am folosit de multă vreme gesturile cu mâinile și înclinarea capului pentru a ajuta la transmiterea sensului, iar acum, gesturile joacă un rol în comunicarea cu interfețele utilizatorului.

Gesturile bune asigură o comunicare eficientă, care se aliniază cu modul nostru de gândire. Gândurile și cunoștințele noastre influențează modul în care vorbim și ele influențează utilizarea gesturilor, în special în designul UI. Gândiți-vă cât de ușor este pentru generațiile mai tinere care cresc în jurul tehnologiei moderne să înțeleagă gesturile – sau modul în care actul de glisare imită împingerea sau ștergerea ceva. De aceea, înțelegerea utilizatorilor dvs. este esențială, chiar și în designul gestual.

Gesturile trec bariera dintre tărâmul fizic și cel digital, permițându-ne să interacționăm cu mediile digitale cu corpurile noastre. În anumite privințe, face utilizarea aplicațiilor digitale mai distractivă, dar acest lucru nu este suficient pentru a face un gest bun.

Un gest bun de mișcare îmbunătățește utilizarea, făcând aplicațiile mai ușor de utilizat în toate contextele. Gesturile bine concepute au o curbă de învățare mai scurtă, deoarece se simt naturale și sunt ușor de înțeles. Ca să-l citez pe Bill Gates:

„Până acum, a trebuit întotdeauna să ne adaptăm la limitele tehnologiei și să conformăm modul în care lucrăm cu computerele unui set de convenții și proceduri arbitrare. Cu NUI, dispozitivele de calcul se vor adapta nevoilor și preferințelor noastre pentru prima dată, iar oamenii vor începe să folosească tehnologia în orice mod este cel mai confortabil și natural pentru noi.”

Beneficiile tehnologiei gesturilor

Utilizarea pe scară largă a interfețelor gestuale se datorează numeroaselor beneficii care vin cu acestea. Trei dintre cele mai semnificative beneficii ale gesturilor sunt interfețele mai curate, ușurința în utilizare și finalizarea îmbunătățită a sarcinilor.

1. Interfețe mai curate

Oamenii consumă mai mult conținut decât oricând, companiile folosesc mai multe date, iar tehnologia continuă să ofere mai multe servicii. Cu această creștere a conținutului, este ușor ca interfețele și afișajele să pară aglomerate. Designerii pot folosi gesturi pentru a reduce numărul de elemente vizuale, cum ar fi butoanele, care ocupă spațiu.

2. Ușurință în utilizare

După cum sa discutat mai sus, interacțiunile devin mai naturale cu o interfață bazată pe gesturi. Ușurința gesturilor simple ale mâinii ne permite să folosim tehnologia cu efort minim la viteză maximă.

3. Finalizare îmbunătățită a sarcinilor

Ratele de finalizare a sarcinilor și ratele de conversie cresc atunci când utilizatorul are mai puțin de făcut pentru a finaliza o sarcină. Este mai probabil să termini o sarcină atunci când este nevoie de mai puțin efort. O interfață de utilizator bazată pe gesturi valorifică acest lucru făcând sarcinile simple și rapide. Ele pot chiar reduce numărul de pași necesari pentru a finaliza o sarcină.

Tipuri de gesturi în designul UI

Designul pentru atingere a dus la dezvoltarea multor tipuri de gesturi, dintre care cele mai comune sunt atingerea și glisarea. Există trei categorii de gesturi:

  1. Gesturi de navigare (pentru a naviga)
  2. Gesturi de acțiune (a acționa)
  3. Transformați gesturile (pentru a manipula conținutul)

Următoarele sunt unele dintre cele mai comune gesturi pe interfețe cu care toți (sau aproape toți) utilizatorii sunt familiarizați – chiar dacă nu în mod conștient. Menționăm ecrane, dar puteți înlocui ecranul cu un touchpad sau orice altă interfață cu gesturi.

Atingeți

Un gest de atingere este atunci când atingeți ecranul cu un deget pentru a deschide sau a selecta ceva, cum ar fi o aplicație sau o pagină. Iată un sfat: proiectați elemente de interfață pe care se poate face clic, astfel încât întreaga casetă sau rând să fie clicabile, nu doar textul. Oferind utilizatorilor mai mult spațiu crește gradul de utilizare.

Apasare dubla

Atingerea de două ori este atunci când atingeți ecranul de două ori la rând, în succesiune apropiată. Multe aplicații folosesc acest gest pentru a mări, dar pe Instagram, utilizatorii pot atinge de două ori o fotografie pentru a-i aprecia.

Beţivan

Glisarea implică mișcarea degetului pe ecran într-o direcție, atingerea pe o parte și ridicarea degetului pe cealaltă. Gesturile de glisare sunt adesea folosite pentru defilarea sau comutarea între pagini. Tinder folosește glisarea spre dreapta pentru a se potrivi cu un profil și glisarea spre stânga pentru a trece peste unul.

Glisare cu mai multe degete

De asemenea, puteți efectua un gest de glisare cu două sau trei degete. Aceasta este o caracteristică comună pe touchpad-urile laptop-urilor care folosesc glisări cu două și trei degete pentru diferite acțiuni.

Trage

Tragerea folosește aceeași mișcare generală ca o glisare, doar că mișcați degetul mai încet și nu îl ridicați până când nu ați tras obiectul acolo unde doriți să fie. Folosiți tragerea pentru a muta un element într-o locație nouă, cum ar fi atunci când vă reorganizați aplicațiile pentru telefon.

Arunca

Ca și glisarea, un gest de aruncare este atunci când mișcați degetul pe ecran cu o viteză mare. Spre deosebire de o glisare, degetul nu rămâne în contact cu un element. Aruncările sunt adesea folosite pentru a îndepărta ceva din vedere.

Apasare prelungită

O apăsare lungă este atunci când atingeți ecranul, dar țineți degetul apăsat mai mult decât de obicei. Apăsările lungi deschid opțiuni de meniu, cum ar fi atunci când țineți apăsat text pentru a-l copia sau țineți apăsată o aplicație pentru a o șterge.

Ciupiți

Unul dintre multele gesturi cu două degete, ciupirea este atunci când țineți două degete depărtate pe ecran și apoi le trageți unul spre celălalt într-o mișcare de ciupire. Gesturile de ciupire sunt adesea folosite pentru a micșora înapoi după mărire. Uneori, acestea prezintă o vizualizare a tuturor ecranelor deschise în scopuri de navigare.

Ciupiți-Deschideți sau răspândiți

Un gest de ciupire sau de răspândire este opusul unui ciupit. Îți ții cele două degete strâns unul și apoi le depărți. Răspândirea, precum atingerea dublă, este în general folosită pentru a mări.

Rotație

Pentru a face o rotație, apăsați pe ecran cu două degete și rotiți-le într-o mișcare circulară. Cel mai bun exemplu de rotație este atunci când întorci harta pe Google Maps pentru a vedea ce este în jurul tău.

Proiectarea gesturilor 101

Folosiți ceea ce știu oamenii

Gesturile există de ceva vreme, așa că pentru majoritatea gesturilor există linii directoare generale.

Și, în majoritatea cazurilor, există reguli pe care veți dori să le urmați atunci când proiectați gesturi pentru o interfață. Când creați o aplicație, de exemplu, va trebui să luați în considerare interfețele pe care utilizatorii vor folosi aplicația dvs. Există șansa ca utilizatorii să vă descarce aplicația pe telefoanele Android și Apple, ambele utilizând deja gesturi specifice produsului. Va trebui să evaluați gesturile interfețelor produsului și să decideți cum veți profita de ele sau dacă merită să adăugați gesturi cu care utilizatorii nu sunt familiarizați.

Iată câteva instrucțiuni utile privind gesturile și mișcarea pentru interfețele de produse populare.

  • Ghidul Google Gesture
  • Ghid Microsoft Gesture
  • Ghidul Apple Gesture
  • Reguli Android Gesture

Când proiectați interfețe de utilizator bazate pe gesturi, este o practică bună să respectați ceea ce știu utilizatorii. Puteți deveni creativ dacă este necesar, dar un nivel de consecvență între gesturi și interfețe ajută la menținerea acestora intuitive pentru utilizatori, sporind capacitatea de utilizare a produsului dvs.

Dacă credeți că este pregătit un gest nou, trebuie să îl testați pe larg înainte de a-l implementa. Veți efectua o serie de metode de cercetare a utilizatorilor pentru a testa gradul de utilizare, eficacitatea, curbele de învățare și satisfacția utilizatorului printr-un gest înainte de a le lansa publicului.

Aveți opțiunea de a reutiliza un gest binecunoscut într-un alt scop, dar din nou, ar trebui să testați eficacitatea acestei strategii în avans. Avantajul aici este că utilizatorii sunt cel puțin familiarizați cu mișcarea.

Luați, de exemplu, utilizarea de către Instagram a atingerii de două ori pentru a aprecia sau a „inima” o postare. O atingere dublă este de obicei folosită pentru a mări, dar funcționează bine pentru scopul Instagram. Este, de asemenea, un studiu grozav în ceea ce privește eficiența: atingerea inimii sub un post necesită o atingere mai mică, dar mai multă țintă. Metoda alternativă de atingere dublă permite utilizatorilor să deruleze mai repede, deoarece au întreaga imagine spre care să vizeze și este intuitiv să atingeți obiectul care vă place.

Designerii au început să dezvolte un limbaj de design cu mâini, cercuri și săgeți pentru a comunica intenția gestuală dezvoltatorilor de produse și strategilor. Acest limbaj este aproape universal, cu o abatere minimă.

Diagrama cu exemple de gesturi UI.

Diagramă cu exemple de presupunere a gestului UI.

Gândește în afara ecranului

Gesturile există în scenariile de zi cu zi în afara utilizării telefonului și laptopului. Un număr tot mai mare de toalete publice au instalate chiuvete sensibile la mișcare, uscătoare de aer și distribuitoare de prosoape de hârtie. Aceste dispozitive previn, de asemenea, răspândirea germenilor - o trăsătură ingenioasă în timpul sezonului gripei. Între timp, mașinile cu conducere autonomă sunt aplicate cu tehnologie de recunoaștere a gesturilor pentru a le îmbunătăți eficiența și siguranța.

Dar poți să devii creativ cu gesturile telefonului în timp ce te gândești în afara ecranului. Dispozitivele folosesc rotația și agitarea ca metode de interacțiune de ani de zile. De exemplu, „Shake to Undo” de la Apple oferă utilizatorilor opțiunea de a anula o acțiune scuturând telefonul. Și până acum, probabil că sunteți familiarizat cu rotirea ecranelor pe orizontală pentru a viziona un videoclip pe ecran complet.

Atâta timp cât sunt testate mai întâi, tehnologiile cu gesturi creative pot duce produsele mai departe și pot crește gradul de utilizare.

Gesturi și accesibilitate

Gesturile, ca toate lucrurile, ar trebui să fie accesibile. Accesibilitatea se referă la a face un produs accesibil și utilizabil pentru toți oamenii în toate contextele, inclusiv pentru persoanele cu dizabilități. Gesturile ar trebui să adere la cele mai bune practici de design accesibile pentru a contribui la un mediu egal, să respecte Legea americanilor cu dizabilități (ADA) și să permită tuturor celor care ar putea beneficia de produsul dvs. să-l folosească.

În afară de a vă asigura că gesturile de interfață sunt accesibile, merită să luați în considerare modul în care puteți utiliza gesturile pentru a îmbunătăți accesibilitatea. Apple și-a dat seama că ecranele plate și fără textură ale iPhone-ului reprezintă un obstacol pentru utilizatorii orbi. Așadar, și-au folosit interfața bazată pe gesturi pentru a crea gesturi suplimentare bazate pe accesibilitate care îi ajută pe cei cu deficiențe de vedere să-și folosească produsele.

Nu uita de UX

Este obișnuit să folosiți termenii UX și UI în mod interschimbabil, dar aceasta este o practică inexactă. UX înseamnă experiența utilizatorului și se ocupă de percepțiile și emoțiile utilizatorului în timp ce interacționează cu un produs. UI înseamnă interfață cu utilizatorul și implică elementele unui produs cu care interacționează utilizatorul. UI este un element important al designului UX. Dacă sunteți interesat să aflați mai multe despre fiecare și despre diferențele lor, consultați ghidul nostru despre UX vs UI Design.

Ideea aici este că UX și UI sunt diferite, dar este esențial să luați în considerare experiența utilizatorului atunci când proiectați interfețe. Gesturile UI care sunt distractive, dar inutile sau interesante, dar au o utilizare slabă sunt rezultatul designerilor și dezvoltatorilor care au uitat de UX.

Indiferent de câte teste ați făcut, oferiți utilizatorilor opțiunea de a elimina anumite funcții de gesturi. Atingerea este un gest vital pe ecranul tactil cu care toată lumea este familiarizată, dar unele gesturi nu sunt cruciale pentru funcționarea unui produs și există doar pentru a-l face mai utilizabil. Uneori, gesturi ca acestea îi enervează pe utilizatorii care nu sunt familiarizați cu ele sau declanșează gestul fără să vrea.

De exemplu, pe un Mac, glisarea cu două degete la stânga sau la dreapta pe touchpad trimite un browser web înapoi sau înainte o pagină. Mulți utilizatori fac acest gest din întâmplare și sunt frustrați când pagina continuă să se schimbe. Deci, Apple oferă utilizatorilor opțiunea de a dezactiva această funcție și multe altele.

Rafinați integrarea utilizatorilor

Integrarea utilizatorilor îmbunătățește utilizarea cu succes a unui produs, învățând utilizatorii cum să-l folosească. Gândiți-vă la un program nou care, la deschidere pentru prima dată, vă ghidează prin toate funcțiile sau pașii pentru a-l folosi.

Încorporarea utilizatorului este importantă pentru gesturile tactile, deoarece acestea sunt adesea ascunse și ușor de ratat, mai ales dacă un utilizator nu este familiarizat cu un gest sau nu are experiență în acest context. Dacă nu știu că o pot folosi sau cum să-l folosească, nu o vor face.

Când înregistrați un utilizator, doriți să fiți concis, să predați câte un lucru și să urmați curba de învățare dovedită că funcționează cel mai bine în testare. Tutorialele lungi și listele pas cu pas sunt plictisitoare, mai puțin interactive și adesea sunt omise.

Îmbrățișați viitorul interfețelor cu gesturi

Gesturile sunt deja aici. Ele există în prezent, făcându-se utile în viața noastră de zi cu zi. Pentru utilizatori, aceste gesturi pot trăi în subconștientul lor în timp ce glisează și ating de două ori fără să se gândească. Designerii de produse, dezvoltatorii și strategii trebuie să înțeleagă gesturile la un nivel mai intim.

Designul pentru atingere este o parte din ce în ce mai mare a domeniului. Gesturile există în băi și mașini – cine știe ce urmează? Imbratiseaza-l. Un produs mai utilizabil este un produs eficient.

Aveți întrebări sau doriți să actualizați UX și UI produselor dvs.? Ne bucurăm să vorbim. Pur și simplu contactați.