5 principii UX la care trebuie să respectați pentru un design UX Uimitor

Will Grant, expert UI / UX și designer de produse digitale, explică cele 5 principii pe care trebuie să le urmați pentru a asigura o experiență excelentă a utilizatorului.

1. Nu folosiți mai mult de două caractere tipografice

Doar amatorii numesc tipografii „fonturi”, știți? Profesioniștii în proiectare „potriviți” le numesc „tipografii” Fonturile sunt fișierele de pe dispozitivul pe care software-ul îl folosește pentru a reda tipografia. Fonturile sunt vopseaua de pe paletă, în timp ce tipografia este capodopera de pe pânză.

Indiferent, prea des, designerii adaugă prea multe tipografii la produsele lor. Ar trebui să urmărești să folosești maximum două caractere: una pentru titluri și titluri și alta pentru copie corporală destinată să fie citită.

Utilizați greutăți și caractere italice în cadrul acelei familii de fonturi pentru accent - mai degrabă decât să treceți la o altă familie. În mod obișnuit, acest lucru înseamnă utilizarea fontului dvs. de marcă corporatistă ca titlu, lăsând controalele, dialogurile și copiile în aplicație (care trebuie să fie clar lizibile) într-o tipografie mai dovedită, care poate fi citită.

Utilizarea prea multor tipuri de caractere creează prea mult „zgomot” vizual și crește efortul pe care utilizatorul trebuie să-l înțeleagă pentru a înțelege vederea din fața lor. Ba mai mult, multe tipuri de mărci personalizate sunt adesea realizate cu impact vizual accentuat, nu lizibilitate.

2. Utilizatorii au deja fonturi pe calculatoarele lor, așa că folosiți-le

Da, fontul dvs. de marcă corporatist este minunat. Este atât de jucăuș și fermecător, dar este nevoie de trei secunde suplimentare pentru a încărca pagina, deoarece fontul trebuie descărcat de pe server și redat - și nimic nu apare până când se încarcă - înnebunind utilizatorii.

Includerea fonturilor de afișare personalizate pentru titluri și titluri este în regulă; ajută la marca produsului și adaugă un anumit interes vizual. Cu toate acestea, utilizarea fonturilor personalizate pentru copierea corpului este în general o idee proastă.

În primul rând, aceste fonturi trebuie să fie încărcate de undeva, fie că este vorba despre fonturile Google, Typekit sau propriul CDN. Aceasta înseamnă că există o suprapunere în ceea ce privește transferul fișierelor de caractere la mașina utilizatorului. Paginile cu conținut grosier se vor rupe adesea în timp ce fonturile corecte sunt descărcate și redate - temutul Flash de conținut nestilat sau Flash de text nestilat (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

În al doilea rând, dacă specificând tipuri de copii ale corpului sălbatic și minunat, credeți că exercitați un anumit control asupra rezultatului final, gândiți-vă din nou. Designul sensibil și 1.000 de dispozitive diferite în sălbăticie înseamnă că paginile dvs. vor arăta puțin diferit pentru toată lumea.

Din fericire, indiferent dacă utilizatorul dvs. este pe un telefon sau un desktop, Windows sau Mac (sau Linux), au câteva fonturi frumoase, care pot fi citite deja instalate și care așteaptă să fie utilizate. „Stilul de fonturi de sistem” este o regulă CSS care indică browserele moderne să redea tipul în tipografia auto-sistemă.

În cele mai multe cazuri, utilizarea fonturilor native din sistem face ca paginile să apară mai repede, iar tipul pare mai clar și mai lizibil.

Familie de fonturi:
   mere sistem
   BlinkMacSystemFont
   Interfață de utilizator Segoe
   Roboto
   Oxigen-Sans
   Ubuntu
   Cantarell
   Helvetica Neue
   sans-serif

Vă rugăm, utilizați doar stiva de fonturi de sistem.

Utilizați Dimensiunea tipului pentru a descrie Ierarhia de informații

Aceasta este o metodă simplă, dar eficientă pentru organizarea vizionărilor dvs. și pentru a le face instantaneu inteligibile pentru o gamă largă de utilizatori. Haideți să aruncăm un exemplu despre cum să nu faceți acest lucru într-o interfață de utilizator a aplicației „Calendar” imaginată:

Pur și simplu modificând dimensiunea tipului cu un factor vizibil, putem arăta utilizatorului cele mai relevante informații:

Măriți informațiile pe care doriți să le vadă mai întâi utilizatorii sau pe care considerați că le vor găsi cele mai utile și le pot citi mai detaliat pentru detalii suplimentare. Acesta este motivul pentru o mulțime de știri și jurnalism faptic care se bazează pe acest format:

Titlu care îți spune ceva

Subtitrare care adaugă contextul și pune mai multe întrebări

Aceasta este copia corpului care se extinde pe poveste adăugând detaliat progresiv prin copie. Citiți până la sfârșit pentru a afla detalii din ce în ce mai puțin importante.

Exact aceeași tehnică poate fi folosită în proiectarea interfeței cu utilizatori.

Notă
Sfat: găsiți un echilibru și nu exagerați. Dacă prea multe elemente din pagină sunt mari, atunci ele pierd orice simț de ierarhie și accent.

Utilizați o dimensiune implicită sensibilă pentru copierea corpului

Clienții dvs. vor citi o mulțime de text în aplicația sau site-ul dvs., deci cât de mare ar trebui să fie tipul?

Zilele tipului cu dimensiuni fixe au trecut de mult. Majoritatea browserelor de pe desktop și mobile vor permite utilizatorilor să scară tipul în sus și în jos, să treacă la „modul de citire” și să aplice setări de accesibilitate la nivelul întregului sistem, cum ar fi culorile de tip mare și contrastul ridicat.

În acest sens, tot ce faceți aici este să setați dimensiunea implicită a tipului care apare la prima deschidere a produsului. În mod ideal, tipul ar trebui să fie suficient de mare pentru a putea fi citit, dar nu atât de mare încât să copleșească utilizatorul sau să ocupe prea mult spațiu într-o vedere aglomerată.

Copia corporală în 16px, cu o înălțime de 1,5 linii și spațiu de caractere „auto” sau „implicit”, este de obicei un pariu sigur și o valoare implicită bună pentru marea majoritate a utilizatorilor.

Încercarea de a stabili spațiul dvs. de caractere este de obicei inutilă pentru copierea corpului, deoarece browserul va face o treabă mai bună de redare a textului decât puteți.

Utilizați o elipsă pentru a indica faptul că există un pas suplimentar

Dacă utilizatorul dvs. vede un buton „Eliminați”, de unde știu dacă îl apasă:

· Îndepărtați „lucrul” la care se uită?

· Întrebați ce „lucru” trebuie eliminat?

· Întrebați-i dacă doresc cu adevărat să înlăture „lucrul”?

· Îndepărtați imediat toate lucrurile?

Etichetați butonul „Eliminați…” și utilizatorul va avea o idee bună că există un alt pas înainte ca toate lucrurile lor să fie eliminate. Majoritatea utilizatorilor vor deduce de aici că butonul este prima parte a unui proces cu mai multe părți și va exista un al doilea pas pentru confirmarea sau anularea acțiunii. Dacă un control necesită un pas suplimentar pentru a-și îndeplini acțiunea, includeți o elipsă (...) în control:

Aceste mici puncte sunt un excelent exemplu de design invizibil: majoritatea utilizatorilor nu le-au observat niciodată, dar transmit un mesaj subtil pe măsură ce experiența utilizatorului se dezvoltă de-a lungul timpului. Ei nu se pricep și ei „doar funcționează”.

Dacă v-a plăcut să citiți acest articol, puteți consulta 101 Principii UX de Will Grant pentru a explora 101 moduri de îmbunătățire a design-urilor dvs. UX. Urmărind pașii lui Jakob Nielsen și Don Norman, 101 Principiile UX sunt ghidul ideal pentru profesioniștii UX, care acoperă totul, de la parolele până la planificarea călătoriei utilizatorului.