Merită toate tendințele? Top 5 cele mai frecvente greșeli UX pe care le fac designerii web

„Eleganța se obține atunci când tot ceea ce este de prisos a fost renunțat și ființa umană descoperă simplitatea și concentrarea: cu cât postura este mai simplă și mai sobră, cu atât va fi mai frumoasă.” -Paulo Coelho

Misiunea unui designer web este de a crea experiențe captivante pentru utilizatori, de a ajuta vizitatorii site-ului să îndeplinească sarcini și de a crește conversiile. În acest proces, adesea se concentrează doar pe estetică, iau comenzi rapide și ajung să se bazeze pe diverse modele și tendințe comune de design. Pericolul în acest sens este că aceștia pot fi deviați de tendințele populare și, în consecință, se fac greșeli obișnuite de UX, deoarece tendințele sunt implementate inadecvat.

Când vine vorba de web, oamenii nu vor să învețe lucruri, vor să facă lucruri. Există o mulțime de exemple pe web în care designerii au optat să se concentreze doar pe atractivitatea vizuală și, în acest sens, au sacrificat capacitatea de utilizare. Ei au presupus că un „moment wow” care a condus designul ar fi suficient de puternic în sine pentru a implica utilizatorul. Dar, din păcate, utilizatorilor le este greu să înțeleagă interfața de utilizare, au dificultăți reale în utilizarea site-ului, iar ratele de respingere ale site-ului au crescut vertiginos.

După cum a spus Kate Rutter, „Atuuri urâte, dar utile, drăguțe, dar fără rost”. Cheia pentru utilizarea eficientă a modelelor și tendințelor de design web este să găsiți un echilibru între ceea ce pare plăcut din punct de vedere estetic și ceea ce adaugă valoare.

Să ne uităm la câteva greșeli comune de UX.

Greșeală comună UX de proiectare web nr. 1: anteturi mari, fixe

Din ce în ce mai multe anteturi înalte și lipicioase pot fi văzute pe site-uri web. „Blocuri de branding” și meniuri de navigare care au o poziție fixă ​​și ocupă o cantitate semnificativă de spațiu. Acestea rămân lipite de partea de sus a ferestrei browserului („antetul lipicios”) și blochează adesea conținutul pe măsură ce derulează sub ele.

Unele anteturi de pe site-uri web de marcă mare au peste 150 de pixeli înălțime. Unde este valoarea lor? Elementele fixe, cum ar fi anteturile lipicioase pot avea beneficii reale, dar designerii web ar trebui să fie atenți când le folosesc — există câteva probleme importante de UX de luat în considerare.

Antetul Sticky Nav poate fi prea mare pentru confort

Dacă decizia de a merge cu un antet de navigare lipicios a fost deja luată, cel mai bine este să-l testați cu utilizatorii. Este o greșeală obișnuită de UX să treceți peste bord și să umpleți antetul de navigare lipicios cu conținut. Cu un antet fix, navigarea ar trebui să fie în continuare confortabilă pentru vizitatori. Eșecul de a găsi echilibrul potrivit poate duce la lăsarea unei cantități mici de spațiu pentru conținutul principal și la o experiență de site înăbușitoare, claustrofobă pentru vizitatori.

Uneori, există o soluție simplă cu CSS: făcând antetul lipicios ușor transparent, oamenii pot vedea conținutul prin el în timp ce derulează, ceea ce face ca zona de conținut să se simtă mai substanțială.

Iată un exemplu de antet înalt și lipicios: pagina de profil a jucătorului ATP pe Roger Federer.

Antetul lipicios al acestui site are o înălțime de peste 180 px! Aceasta reprezintă peste 30% din înălțimea întregii pagini pe unele laptopuri: o experiență slabă de utilizator care poate fi evitată.

Nu luați în considerare problema Sticky Nav Header UX pe mobil

Unii oameni pot folosi ecrane mari de computer de înaltă rezoluție, unde un antet de navigare lipicios ar putea accelera interacțiunile, dar cum rămâne cu mobilul? Fără îndoială, un număr semnificativ de vizitatori ai site-ului ar accesa site-ul de pe un dispozitiv mobil, așa că un antet fix poate să nu fie cea mai bună idee. Din fericire, tehnicile de design responsive fac posibilă proiectarea de soluții diferite pentru diferite platforme și rămâne cu antetul de navigare lipicios - joc de cuvinte - pentru browserele desktop.

Site-ul Coffee with a Cop are, de asemenea, un antet fix, dar mult mai mic - mai puțin de 80 de pixeli înălțime.

Navigarea prin antet, în acest caz, este probabil soluția potrivită pentru ecranele de înaltă rezoluție, deoarece permite o navigare mai eficientă. Pe ecranele cu rezoluție mai mică, antetul este și el fix, dar ocupă o cantitate considerabilă de spațiu. O alternativă excelentă la un antet de navigare lipicios pe mobil este meniul de hamburger mereu prezent. Deși acest model nu este o soluție universală de rezolvare a problemelor, eliberează o cantitate semnificativă de spațiu.

Web Design Eroarea comună UX nr. 2: Fonturi subțiri, ușoare

În zilele noastre, fonturile subțiri și ușoare sunt răspândite pe numeroase aplicații și site-uri web mobile. Odată cu progresul tehnologiei ecranului și randarea îmbunătățită, mulți designeri le folosesc pentru că sunt elegante, curate și la modă. Cu toate acestea, fonturile subțiri pot cauza probleme de utilizare și, prin urmare, pot împiedica UX.

Scopul întregului text de pe un site web este să fie lizibil, iar tipul subțire poate afecta grav lizibilitatea. Nu toți vizitatorii vor vizualiza un site pe un afișaj care redă bine tipul subțire. Unele tipuri de lumină sunt dificil de citit pe un iPhone sau un iPad cu ecran Retina.

Mai presus de toate, textul trebuie să fie lizibil. Dacă utilizatorii nu pot citi cuvintele din aplicația dvs., nu contează cât de frumoasă este tipografia.

Ghid Apple pentru interfața umană

Apple se referă la aplicații mobile, dar același principiu se aplică și site-urilor web. Lizibilitatea este obligatorie, nu opțională pentru o bună utilizare. Nu are rost să pui conținut pe un site web dacă acesta este ilizibil.

Iată câteva greșeli comune de UX de luat în considerare înainte de a utiliza tipul subțire:

Folosind fonturi subțiri și ușoare pentru că este la modă

Fonturile nu trebuie doar să arate bine, dar ar trebui să fie și lizibile. Pentru a obține un contrast și o lizibilitate adecvate, designerii ar trebui să se străduiască pentru combinația optimă în design-ul lor: dimensiune, greutate și culoare.

Cel mai bine este să testați site-ul pe diferite dispozitive și dimensiuni de ecran pentru a vă asigura că tot textul site-ului este lizibil.

Ceea ce ne duce la următoarea greșeală comună UX:

Nu se testează lizibilitatea textului pe toate dispozitivele majore

Tipul subțire și ușor poate arăta bine pe monitoarele scumpe și fin reglate ale multor designeri, dar trebuie luat în considerare și utilizatorul obișnuit, care vede adesea designurile noastre pe afișaje mai ieftine, substandard. Cea mai bună practică este să verificați cum arată fonturile pe toate dispozitivele majore: computere desktop, laptopuri, tablete și smartphone-uri.

De exemplu, în timp ce testează un design mobil, solicitați participanților să folosească site-ul pe dispozitive mobile în lumina zilei - utilizatorii din lumea reală nu vor avea întotdeauna condiții perfecte de navigare și iluminare. Dacă utilizați un font subțire pe un site web, există o modalitate simplă de a vă adapta utilizatorilor de dispozitive mobile: specificați un font mai gros pe mobil pentru o mai bună lizibilitate.

Greșeală comună UX de proiectare web nr. 3: text cu contrast scăzut

Folosirea elementelor de contrast scăzut de culoare a devenit, de asemenea, la modă în designul modern al interfeței cu utilizatorul. A apărut dintr-o tendință de design minimalist, deoarece prin reducerea contrastului în unele zone, designul ar părea „minimalist”. Designerii nu au putut reduce complexitatea informațiilor care trebuiau prezentate, așa că s-au jucat cu un contrast scăzut în design.

Am acoperit deja fonturile subțiri, dar există o capcană și mai mare: o combinație de caractere ușoare cu contrast scăzut, care împiedică serios UX din cauza lizibilității proaste. Designerii ar trebui să facă tot ce pot pentru a evita această capcană de utilizare.

Contrast scăzut al textului în copierea corpului

Cool Springs Financial folosește o variantă subțire a Helvetica pentru textul de pe site-ul său. Deși arată elegant și contribuie la o interfață de utilizare plăcută din punct de vedere estetic, este dificil de citit pe mai multe platforme. Deși contrastul scăzut nu este neapărat rău, poate avea un impact negativ asupra gradului de utilizare a unui site web, făcând textul greu de citit.

Nu se testează contrastul textului

Există un instrument ingenios pentru verificarea contrastului pe web, numit Colorable, care îi va ajuta pe designeri să stabilească contrastul corect al textului, conform Ghidurilor de accesibilitate a conținutului web. Odată ce designerii știu că folosesc contrastul corect al textului, pot ajusta alte culori pe site-ul lor și pot face teste rapide pe mai multe dispozitive/utilizatori pentru a se asigura că textul este lizibil.

Greșeală comună UX de proiectare web nr. 4: Deturnarea derulării

O altă tendință cu risc ridicat care câștigă teren pe web este „scroll-hick-ul”. Site-urile web care implementează această tendință preia controlul derulării paginilor (de obicei cu JavaScript). Când oamenii îl întâlnesc, nu mai au controlul derulării paginii și nu sunt în măsură să prezică comportamentul acestuia, ceea ce poate duce cu ușurință la confuzie și frustrare. Este un experiment riscant care ar putea afecta gradul de utilizare al site-ului web și, în cel mai rău caz, ar putea induce „furia computerelor”.

Unele site-uri web pot scăpa de deturnarea scroll, dar asta nu înseamnă că toată lumea poate. De exemplu, mulți designeri web urmăresc site-urile Apple cu deturnări de scroll, efecte de paralaxă și imagini de înaltă rezoluție ale diferitelor produse. Apple are piața țintă, un concept unic și conținut exclusiv pentru site-ul lor. Deoarece fiecare site are probleme unice, trebuie să aibă și soluții unice adaptate acestor probleme.

Nu se testează cu utilizatori din lumea reală

Când împrumutați idei la modă sau modele de UI, cel mai bine este să testați prototipul unui site web pe utilizatorii din lumea reală pentru a evita problemele de UX. Testarea simplă de utilizare va dezvălui dacă implementarea unui scroll hijack, de exemplu, este fezabilă sau nu. Fără testare, designerii nu au de unde să știe dacă deturnarea scroll-ului va funcționa, iar a face presupuneri este adesea costisitoare.

Tumblr, un site popular de bloguri personale, folosește deturnarea derulării pe pagina lor de pornire. Deși acest lucru ar putea fi riscant, este sigur să presupunem că își cunosc bine publicul țintă și experiența cool și modernă de utilizator pe care doresc să o prezinte. Când vizitatorii site-ului încep să defileze, scroll-ul este deturnat, iar oamenii sunt direcționați la următoarea secțiune.

Pagina lungă de defilare este împărțită în mai multe secțiuni care se disting printr-o doză mare de culori saturate și puncte indicatoare proeminente în partea stângă a ferestrei. Ca rezultat, pagina de pornire a lui Tumblr se simte ca pe un carusel vertical mare, vizitatorii au control asupra, mai degrabă decât asupra unui site web experimental neplăcut, cu o minte proprie.

Greșeală comună UX de proiectare web nr. 5: carusele

Caruselele — o prezentare de diapozitive pentru rotirea unei varietăți de conținut — sunt foarte frecvente pe web, în ​​special pe paginile de destinație și paginile de pornire. Deși pot fi utile, au numeroase probleme de utilizare și, prin urmare, se califică drept o altă greșeală comună UX. Potrivit Nielsen Norman Group: „ oamenii derulează adesea imediat pe lângă aceste imagini mari și pierd tot conținutul din ele .” Ar putea avea un impact negativ asupra UX, deoarece vizitatorii pot să nu vadă conținut valoros în unele dintre slide-urile rotative.

Este posibil ca caruselele de site-uri web să nu ofere valoare utilizatorilor

Dacă este făcut corect, un carusel poate atrage utilizatorii cu imagini mari uimitoare. Problema este că de multe ori caruselele nu adaugă nicio valoare suplimentară, ci sunt pur și simplu acolo pentru decorare și sunt incluse doar pentru că toți ceilalți le folosesc. O modalitate de a testa dacă un carusel de site are sens: notează trei beneficii pe care un carusel le oferă vizitatorului. Dacă nu pot fi găsite trei beneficii semnificative, nu adaugă nicio valoare.

Săgețile anterioare și următoare au o capacitate redusă de descoperire

Informațiile importante dintr-un carusel de site-uri web ar putea rămâne ascunse dacă săgețile următoare și anterioare nu pot fi descoperite. De asemenea, comenzile ar trebui să fie compatibile cu atingere pentru mobil.

Adesea nu există săgeți pentru a controla caruselul; sunt incluse doar punctele indicatoare de diapozitive pentru a avansa diapozitivele. Cu toate acestea, acestea au adesea un contrast scăzut, au o capacitate de descoperire scăzută și nu au o zonă suficient de mare pe care se poate face clic sau se poate atinge. Țintele mici pe care se poate face clic pot duce la un UX slab, un vizitator frustrat al site-ului și o ieșire rapidă de pe site.

De exemplu, site-ul Fundației Floresta Longo are un carusel rotativ de imagini pe pagina sa de pornire. Este setat pentru redare automată și se rotește prin cinci fotografii. Cu toate acestea, săgețile anterioare și următoare sunt mici și transparente, ceea ce le face greu de observat și dificil de făcut clic. Nu există indicatori pentru diapozitivele pe care vizitatorii sunt activați și nici etichete care să indice ceea ce reprezintă imaginile. Imaginile nu sunt link-uri și acționează ca un pur decor. În timp ce acest tip de carusel poate avea o anumită valoare pentru a implica vizitatorul, în general, lasă mult de dorit.

Concluzie

Tendințele de design web, dacă nu sunt luate în considerare cu atenție și implementate cu prudență, ar putea duce la mai multe greșeli comune de UX. Designerii UX ar trebui să-și folosească cea mai bună judecată și să nu se teamă să inoveze, dar pentru a asigura o utilizare excelentă a site-ului, le-ar fi de folos să-și testeze designul în detaliu cu utilizatorii din lumea reală.

În abundența nebună a tendințelor de design web, lucrurile în vogă vin și pleacă. În mijlocul acestui haos, utilizarea echilibrată a esteticii, eficienței și uzabilitatii joacă un rol semnificativ în distingerea tendințelor UX care s-au dovedit a fi cele mai puternice și au obținut cea mai mare acceptare a utilizatorilor.

Designerii web pot veni cu cea mai tare schemă de culori, cea mai elegantă animație de defilare sau cele mai fantastice efecte de paralaxă, dar dacă interacțiunea umană va avea de suferit, UX-ul va fi slab, iar oamenii vor trece rapid mai departe. Un alt site este la doar un clic distanță.

Citiri suplimentare pe Blogul Toptal Design:

• Design receptiv – Cele mai bune practici și considerații
• Abordarea procesului de proiectare a site-ului web din browser
• Codificare pentru designeri – Cât de mult ar trebui să știm?
• Cele mai bune practici de design UI și greșeli comune