Cele mai bune practici de proiectare a UI pentru o mai bună scanare

Designerii de produse comunică adesea multe informații într-o perioadă scurtă de timp. Cei care înțeleg termenul „scanabilitate”, modele obișnuite de urmărire a ochilor și principii moderne de design sunt mai bine echipați pentru a crea conținut ușor de consumat și „interfețe de utilizare lipicioase”.

În fiecare zi, internetul se extinde cu noi aplicații, site-uri web, articole și multe altele. Devine din ce în ce mai dificil să atragi atenția utilizatorilor supraîncărcați de informații, cărora le este dificil să filtreze informațiile relevante din conținutul irelevant. Expertul în marketing David Zheng a constatat că, în peste 60% din cazuri, vizitatorii renunță și părăsesc un site web în mai puțin de 15 secunde .

Cercetarea indică faptul că utilizatorii nu citesc de fapt tot ce văd cuvânt cu cuvânt – ei scanează și apoi determină dacă materialul merită timpul lor. Făcând conținutul adecvat scanat instantaneu, un designer de produs poate transforma un vizitator pe termen scurt într-un utilizator de lungă durată. Mai jos este o selecție de cele mai bune practici de proiectare a interfeței de utilizare pentru a ajuta la amplificarea factorului important al designului de utilizare care este adesea trecut cu vederea: scanabilitatea .

Ce este scanabilitatea?

Experții UX de la Nielsen Norman Group au efectuat cercetări pentru a răspunde la întrebarea: Cum citesc oamenii pe web? Descoperirile lui au fost simple. Ei nu.

Grupul a descoperit că doar 16% dintre cei care vizitează pentru prima dată un site web probabil îl citesc cuvânt cu cuvânt. Ceilalți 84% vor scana rapid pentru elemente de cârlig, cum ar fi titluri, propoziții, imagini sau animații înainte de a decide să aprofundeze materialul. Acest comportament nu se limitează la interfețele digitale. De exemplu, oamenii citesc rar fiecare cuvânt dintr-un ziar. În schimb, scanează aceleași elemente — titluri, imagini etc. — pentru a determina ce merită timpul lor.

Scanabilitatea este, prin urmare, abordarea de a prezenta conținut, astfel încât să fie ușor de scanat. Există adesea doar o perioadă scurtă de timp pentru a impresiona un vizitator cu conținut valoros pe ecran, ceea ce face esențială optimizarea completă a unei interfețe pentru modul în care utilizatorii citesc pe web. Indiferent dacă produsul digital este un site web, o aplicație sau un alt tip de interfață cu utilizatorul, capacitatea de scanare este unul dintre cei mai importanți factori ai designului ușor de utilizat.

Beneficiile unei interfețe scanabile

Modul ideal de a determina capacitatea de scanare a unui produs digital este de a-l observa din perspectiva utilizatorului și de a răspunde la aceste întrebări cheie:

1. Conținutul paginii corespunde așteptărilor publicului?
2. Mesajul principal al paginii este ușor de înțeles într-o perioadă scurtă de timp?

Deși interfețele scanabile necesită efort pentru a produce, se plătește pe termen lung prin crearea unui design UI lipicios. Studiul Nielsen Norman Group arată că paginile optimizate pentru scanabilitate devin mult mai eficiente în următoarele moduri:

• Utilizatorii au timpi de finalizare a sarcinilor mai rapid
• Utilizatorii pot defini cu ușurință dacă conținutul este potrivit pentru ei
• Utilizatorii fac mai puține erori în amintire
• Utilizatorii au o mai bună înțelegere a structurii unei pagini
• Un site primește evaluări subiective mai favorabile pentru credibilitate și calitatea conținutului
• Ratele de respingere sunt reduse
• Probabilitatea vizitelor de întoarcere este crescută
• Optimizarea pentru motoarele de căutare (SEO) este îmbunătățită

Puterea obiceiurilor utilizatorilor în modelele de scanare

Fiecare consumă conținut diferit. Cu toate acestea, prin cercetare, au apărut modele de urmărire a ochilor bine definite. Cunoașterea modului în care utilizatorii interacționează cu interfețele în primele câteva secunde îi poate ajuta pe designeri să prioritizeze conținutul, să plaseze informații importante în zonele vizibile principale și să stabilească o ierarhie vizuală puternică.

Potrivit Nielsen Norman Group, există șapte modele comune în care utilizatorii scanează o interfață:

• Celebrul model F: La 12 ani de la descoperire, acest model este încă cel mai comun model de scanare, chiar și atunci când scanați interfețe mobile. Ochiul se mișcă orizontal, așa cum este de obicei când citiți, apoi trece la conținutul de mai jos. Acest lucru se poate face lent și sistematic sau rapid cu o hartă termică mai precisă.
• Model Z: Modelul în zig-zag este tipic în paginile web cu o prezentare uniformă a informațiilor și o ierarhie vizuală slabă.
• Layer Cake Pattern: utilizatorii urmează acest model atunci când scanează titluri și subtitluri pentru a determina rapid unde (și dacă) informațiile pe care le caută pot fi găsite pe pagină.
• Model spotat: Reclamele urmează de obicei acest model de scanare, în care omit bucăți mari de text și scanează componente vizuale, cum ar fi culoarea, formele și anomaliile de proporție, pentru a găsi o anumită informație.
• Model de marcare: la fel ca un dansator care se fixează pe un obiect pentru a rămâne echilibrat în timp ce se învârtește, utilizatorii își păstrează ochii concentrați pe un singur loc în timp ce derulează – un model foarte comun pentru UX mobil.
• Ocolirea modelului: utilizatorii opresc în mod deliberat primele cuvinte dintr-o linie atunci când mai multe rânduri de text dintr-o listă încep toate cu același (cuvinte).
• Model de angajament: Acesta este un model rar și apare numai atunci când un utilizator este foarte interesat de conținut și motivat să-l consume în întregime.

Modelele adoptate de utilizator se vor referi în primul rând la motivația pentru a vizita pagina web: Ce tip de informații caută? Cât timp sunt dispuși să aloce pentru a-l găsi? Există și alte site-uri web care ar putea furniza aceste informații mai rapid?

Oferirea de valoare prin cercetarea utilizatorilor și modele de scanare

Dr. Donald Norman, cercetătorul în științe cognitive care a inventat termenul „ design centrat pe utilizator ”, a scris: „Nu este suficient să construim produse care să funcționeze, care să fie ușor de înțeles și utilizabile, trebuie, de asemenea, să construim produse care să aducă bucurie și entuziasm. , plăcere și distracție, și da, frumusețe în viața oamenilor.”

Cercetarea utilizatorilor este o piatră de temelie a celor mai bune practici de design centrat pe utilizator și de proiectare a UI. Ulterior, pentru a îmbunătăți capacitatea de scanare a unei interfețe digitale, un designer trebuie să înțeleagă utilizatorul final. Atunci când modelele UI sunt concepute din perspectiva utilizatorului final, are loc o experiență naturală și intuitivă.

Soluțiile de impact nu sunt făcute din abstracții. Mai jos sunt un set de produse digitale care sunt frumoase, funcționale și durabile. Fiecare echipă de proiectare a definit publicul cheie, a folosit modele de urmărire a ochilor și a proiectat machete de conținut pentru a produce o interfață de utilizare lipicioasă.

Instacart folosește designul centrat pe utilizator prin modelele lor de design UI. O parte semnificativă a audienței lor este formată din seniori și utilizatori cu deficiențe de vedere, astfel încât articolele sunt enumerate într-o grilă cu contrast ridicat, cu un accent clar pe principalele CTA. Designul permite ca modul de scanare a modelului spotat să găzduiască vizitatorii de lungă durată.

Yelp servește utilizatorilor care caută cele mai bune restaurante, cumpărături, viață de noapte, mâncare etc. Este posibil ca oamenii să evalueze recenziile pe baza propriilor criterii personale și a cercetării amănunțite, făcând modelul F cel mai aplicabil model de scanare. Prin urmare, Yelp prezintă conținutul într-un mod ușor de scanat, cu accent pe elemente specifice, cum ar fi evaluări, imagini și adrese.

Airbnb este, fără îndoială, una dintre cele mai iubite aplicații de acolo și se datorează în mare parte cercetării lor utilizatorilor. Deoarece știu că utilizatorii lor sunt adesea pe dispozitive mobile, ei proiectează pentru a se adapta modelului de marcare. Interfața curată și intuitivă este amenajată pentru a sublinia imaginile de apartamente mari, cu lățime completă. Au păstrat intenționat numărul de imagini de copertă pe ecran limitat la două, astfel încât utilizatorul să își poată dedica timpul în mod corespunzător și să vadă dacă listarea îi atrage atenția sau nu.

Un factor de care trebuie să țineți cont atunci când îmbunătățiți scanabilitatea unui produs digital este definirea tipului de dispozitiv pe care va fi vizualizat. Platforma mobilă a Airbnb primește trafic semnificativ. După cum se vede în harta termică a utilizării degetului mare, Airbnb a plasat strategic elementele de interfață de utilizare cele mai frecvent utilizate, cum ar fi „Explorare” și „Căutări salvate”, la un acces ușor în timpul derulării și scanării.

Cele mai bune practici de proiectare a UI pentru o mai bună scanare

Creați o ierarhie vizuală adecvată

Ierarhia vizuală a unei interfețe digitale se referă la aranjarea și prezentarea elementelor de design UI pentru a comunica nivelurile de importanță, astfel încât utilizatorii să poată scana rapid pentru informațiile dorite. Există mai mulți factori în proiectarea unui aspect cu ierarhie vizuală adecvată:

• mărimea
• Culoare
• Contrast
• Proximitate
• Aliniere
• Spațiu negativ
• Repetiţie

Luând în considerare aceste modele de design UI în timp ce creează un design de layout UI, un designer se va asigura că produsul final are un aspect grozav, armonios și care poate fi scanat intuitiv.

Pagina cu rezultatele căutării Google folosește toți factorii de ierarhie vizuală pentru a crește capacitatea de scanare. Titlurile sunt subliniate prin utilizarea culorii, mărimii și, ulterior, a contrastului. Spațiul negativ din jurul fiecărui titlu contribuie la faptul că acesta este primul lucru pe care îl va scana utilizatorul.

Când un utilizator găsește un titlu relevant, ar putea verifica linkul pentru credibilitate - un element care este ușor de recunoscut datorită culorii și proximității. Apoi, pentru a evalua mai bine rezultatul, ei vor săpa în copia de conținut care este consecventă în culoare, dimensiune și proximitate. Pe lângă acești factori, repetarea și alinierea fac ca rezultatele căutării Google să fie în general ușor de scanat.

Profitați de spațiul negativ

Genialul Claude Debussy a spus odată: „Muzica este spațiul dintre note”. Același sentiment este valabil și pentru scanabilitate - spațiul negativ dintre elemente este ceea ce face ca un aspect să fie de succes. Cantitatea adecvată de spațiu negativ (alb) în jurul elementelor UI aduce accentul asupra elementelor în sine. Subliniază conținutul și oferă spațiul de respirație necesar pentru a se asigura că aspectul nu se simte aglomerat. Fără spațiu de respirație, creierul uman este mai puțin probabil să scaneze punctele de interes și mai probabil să fie confuz.

Utilizați subtitluri pentru a rezuma conținutul

Oamenii răspund adesea negativ la bucăți mari de text. Poate declanșa presupunerea că vor pierde timp dacă paragraful nu se potrivește cu interesele lor. Cele mai bune practici de proiectare a UI oferă o soluție la această problemă. Adăugând subtitluri scurte la începutul articolelor lungi, utilizatorul are o perspectivă finală asupra subiectului.

În timp ce scrieți subtitlul, este esențial să îl mențineți la obiect. Pur și simplu comunicați mesajul cheie pe care îl oferă conținutul de mai jos.

Creați liste cu marcatori și numerotate

Creierul uman este foarte sistematic – observă conținutul și apoi îl grupează în unități semnificative. Prin urmare, un utilizator are mai multe șanse să înțeleagă o listă cu marcatori sau numerotate decât mai multe puncte îmbinate într-un paragraf textual.

Spațiul negativ creat de liste facilitează scanarea unui utilizator, așa că este benefic să căutați cu atenție oportunitățile. Dacă mai mult de două puncte dintr-un text sunt paralele între ele și fiecare nu necesită mai mult de două propoziții pentru a descrie, acesta este un candidat puternic pentru o listă. Nielsen Norman Group oferă și mai multe informații despre crearea de conținut digital cu marcatori.

Vizualizați conținutul

Utilizatorii digitali moderni sunt în mod natural vizuali și nu sunt întotdeauna probabil să răspundă bine la conținutul textual (chiar dacă este perfect structurat și urmează toate sfaturile de design UI pentru o scanabilitate ideală). Mediile externe vor fi întotdeauna un factor. Prin urmare, pentru a compensa aspectele grele de text, utilizarea imaginilor și a graficelor oferă pauze vizuale atât informative, cât și atrăgătoare din punct de vedere emoțional. După cum se spune, o imagine valorează cât o mie de cuvinte!

Elementele vizuale originale (ilustrări, fotografii captivante etc.) pot capta cu ușurință atenția unui utilizator și pot sprijini conceptul stilistic general. În plus, pot îmbunătăți ierarhia vizuală și pot face textul mai ușor de digerat. Cu toate acestea, există pericolul ca un grafic să provoace un efect contrar dacă nu este utilizat corespunzător. Înainte de a transforma ideile cheie în grafică, este esențial ca designerii să înțeleagă complet conținutul pe care îl proiectează.

Pune un accent adecvat pe CTA

Majoritatea experiențelor digitale au ca scop atragerea unei anumite acțiuni din partea utilizatorului. Deși butoanele de îndemn (CTA) par adesea foarte simple, ele sunt concepute strategic pentru a ajuta utilizatorul să finalizeze o acțiune, cum ar fi cumpărarea, adăugarea într-un coș sau pur și simplu să acceseze o altă pagină.

Cele mai bune practici de proiectare a UI sugerează poziționarea CTA aproape de conținutul care descrie acțiunea, făcându-l intuitiv pentru utilizator. O modalitate eficientă de a testa dacă CTA este bine proporționat, colorat și poziționat este de a converti temporar designul final în tonuri de gri. Dacă CTA rămâne distinct vizibil și subliniat, interfața de utilizare lipicioasă este bine făcută.

Importanța scanabilității

Există o mulțime de elemente care determină dacă un design de layout UI va fi bine primit de oameni, cum ar fi relevanța conținutului, soluțiile concurenței și logica de afaceri. Potrivit Forbes , scanabilitatea poate fi cel mai neglijat factor al marketingului de conținut. Prin crearea de conținut care poate fi scanat, un vizitator pe termen scurt poate deveni un utilizator de lungă durată.

Conținutul care poate fi scanat demonstrează utilizatorului final că timpul său este prețuit și oferă oportunitatea de a înțelege mesajul de bază, prin simpla privire peste un design de aspect. Blogger viral și profesor de jurnalism Kim Keller subliniază designerilor că „începi o conversație cu cineva pe care îl dorești ca client. Este o relație și nicio relație nu poate supraviețui dacă nu petreceți timp împreună. Respectă-le timpul și fă-l să merite.”

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Cele mai bune practici de design UI și greșeli comune
• State goale – Cel mai neglijat aspect al UX
• Simplitatea este cheia – Explorarea designului web minimal
• Principii euristice pentru interfețele mobile
• Proiectare pentru lizibilitate – Un ghid pentru tipografia web