Utilizarea legii lui Fitts: principii de proiectare a interfeței cu utilizatorul pentru comerțul electronic

Îmbunătățirile mici aduse fluxului de cumpărare al unui site de comerț electronic pot avea un impact mare atunci când atrage vizitatorii să devină clienți plătitori. Aplicând Legea Fitts la interfața unui site de comerț electronic, designerii pot facilita utilizatorilor să găsească exact ceea ce caută, să adauge articole în cărucioarele lor și, în cele din urmă, să facă achiziții.

Legea lui Fitts spune că timpul necesar unei persoane pentru a muta un indicator către o țintă este o funcție de distanța până la țintă împărțită la dimensiunea țintei. În esență, înseamnă că obiectele care sunt mai mari și mai apropiate sunt mai ușor de interacționat. Legea a fost concepută inițial în 1954 de către psihologul Paul Fitts, care a creat modele matematice ale comportamentului uman și a lucrat la cuantificarea abilităților sistemului nervos uman.

Legea lui Fitts cuantifică compromisul viteză-acuratețe: cu cât execuția unei sarcini trebuie să fie mai precisă, cu atât va dura mai mult. Tradus pentru designul UI, înseamnă că cu cât o țintă, cum ar fi un buton „Adăugați în coș” este mai departe de cursorul sau degetul unui utilizator, cu atât ținta trebuie să fie mai mare. În acest fel, actul de a atinge ținta nu necesită multă precizie și poate fi executat rapid.

Importanța măririi unei componente a UI poate părea evidentă, dar Legea lui Fitts nu se referă la creșterea dimensiunii pentru impactul vizual. Este vorba despre reducerea timpului necesar unui utilizator pentru a ajunge la o componentă cu cursorul sau cu degetul. Adesea, asta înseamnă mărirea unei componente a UI, dar ar putea însemna și implementarea altor tehnici care permit utilizatorilor să se deplaseze mai eficient printr-un site de comerț electronic și, în cele din urmă, să facă o achiziție.

Defalcarea formulei legii lui Fitts

Ecuația matematică scrisă de Fitts este t = a + b log2 (2 d/w) unde:

• t este egal cu timpul.
• a și b reprezintă coeficienți de regresie care sunt derivați din observarea testelor.
• d este distanța dintre punctul de plecare și țintă.
• w este lățimea țintei.
• log2 indică faptul că formula este logaritmică, iar log2 (2 d/w) dă indicele de dificultate (ID), o măsurătoare care cuantifică cât de greu este să obții ținta.

Ecuația logaritmică indică relația dintre dimensiunea sau distanța țintei și timpul de reacție: o mărire mică sau o creștere a distanței pentru ținte mici le poate face mai ușor de achiziționat, în timp ce o creștere mică a dimensiunii sau distanței pentru ținte mai mari nu le va face mult mai ușor de obținut. a ajunge.

În lumina ecuației, designerii de interfață de utilizare de comerț electronic trebuie să ia în considerare două lucruri: dimensiunea unei ținte de interfață în raport cu alte articole de pe site și distanța acelei ținte de cursor. Aplicarea legii Fitts pentru comerțul electronic înseamnă a face o țintă ușor de identificat și cu care interacționează, astfel încât clienții să își poată îndeplini rapid sarcina și să treacă la următorul pas din procesul de cumpărare.

Legea lui Fitts și design de interfață de comerț electronic: o potrivire perfectă

Legea lui Fitts a ajutat, de asemenea, la nașterea conceptului de pixel principal - locația cursorului unui utilizator în orice moment dat. Scopul designerilor de interfață de utilizare de comerț electronic este de a scurta cât mai mult posibil distanța de la pixelul principal la țintă. Dar, deoarece pixelul principal este variabil (Cine știe unde exact își va plasa cursorul un utilizator când ajunge la o pagină?), există mai multe tehnici de control al componentelor fixe ale unei pagini de comerț electronic pentru a le plasa cât mai aproape. posibil acolo unde este probabil ca pixelul principal al utilizatorului să fie.

Design pentru descoperirea eficientă a produselor

Pe site-urile de comerț electronic de succes, produsele sunt ușor de găsit. O modalitate de a folosi Legea lui Fitts pentru a îmbunătăți descoperirea produselor este să adăugați funcționalitate de căutare la secțiunea eroi a paginii de pornire. Oamenii au tendința de a scana paginile web în modele previzibile, iar comportamentul de scanare și mișcările cursorului sunt strâns corelate.

Plasarea unei bare de căutare într-o zonă în care te-ai aștepta ca vizitatorii să privească – și, prin urmare, să-și poziționeze cursorul pentru a-și crea pixelul principal – ar putea reduce dramatic distanța de care ar trebui să-și miște cursorul pentru a introduce o interogare de căutare. În plus, implementarea căutării predictive poate ajuta utilizatorii să vizeze înregistrări mai rapid.

Optimizați meniurile de comerț electronic

O caracteristică critică a oricărui site de comerț electronic de succes este un meniu care permite clienților să exploreze eficient și să găsească categoriile și produsele pentru care fac cumpărături. Aplicați Legea Fitts adoptând un meniu derulant automat care apare atunci când un client trece cu mouse-ul peste o categorie de conținut. Evitați să plasați prea multe articole într-o singură listă, astfel încât utilizatorii să nu fie nevoiți să mute cursorul departe pentru a selecta un articol. În plus, folosiți o arhitectură bună a informațiilor și fotografii ale produselor pentru a oferi utilizatorilor zone țintă mai mari care scurtează distanța pe care trebuie să o parcurgă cursoarele lor pentru a face selecții.

Măriți suprafața butoanelor de îndemn

Locul evident pentru a aplica Legea lui Fitts este un buton CTA care va declanșa o achiziție. Faceți butonul mare astfel încât să iasă în evidență și să fie ușor de apăsat; obținerea unei ținte mai mari necesită mai puțină precizie. În plus, faceți butonul evident incluzându-l deasupra pliului, aplicând un contrast accesibil și plasându-l suficient de departe de alte componente încât utilizatorii să nu facă clic pe elementul greșit. Pentru a spori și mai mult încrederea utilizatorilor în luarea deciziilor, asigurați-vă că microcopia de pe buton este clară și instructivă.

De asemenea, luați în considerare plasarea butonului CTA de-a lungul marginii ecranului pentru a maximiza utilizarea a ceea ce sunt cunoscuți sub numele de pixeli magici, zone ale ecranului în care un utilizator poate naviga rapid și imprecis în timp ce atinge ținta.

Faceți unele acțiuni mai dificile decât altele

În cele mai multe cazuri, designerii de interfață de utilizare de comerț electronic aplică Legea Fitts pentru a accelera interacțiunile utilizatorilor. Cu toate acestea, în unele cazuri ar putea dori să le încetinească. De exemplu, designerii ar putea implementa casete de selectare mici pentru suplimentele de produs care sunt mai departe de pixelul principal (care în acest caz este probabil un buton „Adaugă în coș”). Procedând astfel, utilizatorii ar obliga să fie mai precisi atunci când selectează produse suplimentare, asigurându-se că nu cumpără articole nedorite din neatenție.

Legea lui Fitts pentru dispozitive mobile

În aplicarea Legii lui Fitts la designul de interfață de utilizare pentru comerțul electronic pentru dispozitive mobile, designerii trebuie să ia în considerare unele constrângeri.

Degetele sunt cursorele

Pe dispozitivele mobile, nu există cursore. Utilizatorii se bazează pe degetele lor pentru a interacționa cu interfața. Cu toate acestea, degetele sunt mai groase și, prin urmare, mai puțin precise decât cursoarele. Țintele tactile ar trebui să fie mai mari pentru aplicațiile mobile decât pentru site-uri web. Luați în considerare un buton CTA care se întinde pe lățimea unui ecran și creșteți-i umplutura pentru a-l face mai accesibil.

Utilizarea mobilă este adesea cu o singură mână

De cele mai multe ori, utilizatorii își țin dispozitivele mobile într-o mână și le acționează cu degetele mari. În general, acest lucru limitează utilizatorii să interacționeze cu partea de jos a ecranului, cu excepția cazului în care folosesc două mâini pentru a permite atingerea părții superioare. Atunci când iau în considerare designul UI pentru comerțul electronic mobil, designerii ar trebui să își plaseze țintele dorite în intervalul natural de atingere al degetului mare.

Luați în considerare avertismentele

Când aplicați Legea lui Fitts, merită să luați în considerare două întrebări cheie: Care este obiectivul principal pe care utilizatorii doresc să-l atingă atunci când ajung pe această pagină? Și: Cum pot face acest obiectiv ușor de realizat de către utilizatori?

Legea lui Fitts nu este un glonț de argint; vor exista cazuri când este logic să o aplici și momente în care alte concepte sunt mai potrivite. În cazul comerțului electronic, merită să ne gândim și dacă concentrarea asupra unui alt aspect al site-ului – de exemplu, cât de bine vorbește conținutul publicului – ar putea aduce rezultate mai bune.

Există și pericolul ca Legea lui Fitts să poată fi folosită ca un model întunecat, așa cum se întâmplă uneori cu anunțurile care apar pe paginile motoarelor de căutare. De obicei, aceste reclame sunt prezentate în partea de sus a paginii ca și cum ar fi ele însele rezultate ale căutării. Acesta este un exemplu de Legea lui Fitts, deoarece distanța dintre anunț și ultima componentă cu care a interacționat sunt aproape una de alta. Deși există multe cazuri de utilizare bune pentru afișarea anunțului unei companii lângă un rezultat de căutare relevant, această decizie de design este adesea deturnată de concurenții care doresc să direcționeze greșit utilizatorii.

Urmați Legea lui Fitts pentru succesul comerțului electronic

Deși Legea lui Fitts a fost dezvoltată cu decenii înainte de apariția internetului, este un principiu valoros în proiectarea produselor digitale. Astăzi, designerii pot folosi Legea lui Fitts pentru a crește veniturile, facilitând clienților comerțului electronic să navigheze pe un site, să găsească produse și să facă achiziții.

Citiți suplimentare pe blogul Toptal:

• Pregătirea drumului către achiziție – Cele mai bune practici de eCommerce UX
• Cele mai bune practici pentru pagina de destinație (cu infografic)
• Cum să proiectați pagini de destinație care convertesc
• Construirea și scalarea unui sistem de proiectare în Figma: un studiu de caz