Bad Design vs. Good Design: 5 exemple din care putem învăța

Urmărirea exemplelor de bad design alături de contra-exemple de good design nu este doar amuzantă, ci trage și lecții importante pentru designeri. Acestea evidențiază capcanele pe care designerii trebuie să le evite și ne permit să înțelegem cum să traducem teoriile de design în soluții care funcționează în lumea reală. Jared Spool, scriitorul, cercetătorul și expertul american în uzabilitate, a spus odată: „Nu este o idee bună: „Un design bun, atunci când este făcut bine, devine invizibil. Doar atunci când este făcut prost îl observăm.” Așadar, haideți să ne uităm la cinci exemple de designuri evident proaste, să punem în lumină modul în care designul bun le face să funcționeze și să distilăm câteva lecții, astfel încât să putem crea cu toții experiențe excelente și invizibile pentru utilizatorii noștri.

Supraîncărcarea cu informații

Rău: Semnele de parcare din Los Angeles

Semnele de parcare din Los Angeles (LA) au fost, timp de decenii, întruchiparea supraîncărcării de informații. Întotdeauna au fost în mod notoriu greu de înțeles, deoarece regulile de circulație sunt complexe, ceea ce a dus la necesitatea de a transmite o mulțime de informații pe o suprafață mică.

Cât de confuze sunt aceste semne? În mod tradițional, foarte – priviți acest exemplu din anii 2010:

Autor/Deținător de drepturi de autor: Jorge Gonzalez. Termenii și licența drepturilor de autor: CC BY-SA 2.0

Cum sunt semnele de parcare din LA, acest exemplu este deja unul destul de simplu.

Imaginați-vă că sunteți un șofer pe acest drum într-o marți dimineața la ora 9. Puteți parca în acest loc? Ceea ce pare a fi o întrebare simplă necesită o mulțime de procesare mentală pentru a răspunde.

Ca designeri, ne confruntăm adesea cu situații în care trebuie să proiectăm pentru ca o mulțime de informații să fie afișate într-un spațiu mic. Semnele de parcare din LA ar putea fi un caz extrem, dar de multe ori proiectarea pentru aplicații mobile înseamnă să ne confruntăm cu aceleași probleme. Există o cale de ieșire – atât pentru semnele de parcare, cât și pentru designeri în general?

Bine: Nikki Sylianteng’s Parking Sign

Desenarea unui semn care să afișeze toate informațiile, fiind în același timp ușor de înțeles, pare o sarcină imposibilă. Dar exact asta a făcut designerul din Brooklyn, Nikki Sylianteng.

Autor/Deținător de drepturi de autor: Nikki Sylianteng. Termenii și licența drepturilor de autor: CC BY-NC-SA 4.0

Semnul de parcare propus de Nikki a fost în cele din urmă folosit în Los Angeles ca parte a unui proces de testare.

O parte din motivul pentru care designul lui Nikki1 funcționează bine este că este centrat pe utilizator: Nikki și-a dat seama că șoferii vor pur și simplu să știe dacă pot parca pe un loc. Da sau nu – asta este tot ce aveau nevoie șoferii și asta este tot ceea ce arată semnul de parcare.

Designul ei a folosit, de asemenea, elemente vizuale, mai degrabă decât text, pentru a transmite informații. Rezultatul este incredibil de intuitiv: verde pentru OK, roșu pentru parcare interzisă. Este proiectat chiar și pentru daltoniști, cu dungi pentru Parcare interzisă.

Acum, când vă uitați la semn, veți ști că marți, la ora 9 dimineața, nu este permisă parcarea. Barele arată ce este ce dintr-o privire-simplu.

Lecții învățate: Cele mai bune practici

• Înțelegeți de ce au nevoie utilizatorii dumneavoastră, apoi proiectați în funcție de asta. Acest lucru ajută la reducerea supraîncărcării de informații.
• Aveți multe informații de transmis utilizatorilor dumneavoastră? Încercați să folosiți elemente vizuale în loc de text. Aflați mai multe despre vizualizarea datelor aici.

Navigația cu carne de mistere

Rău: LazorOffice.com

Condamnat în 1998 de Vincent Flanders de la Web Pages That Suck2, Mystery Meat Navigation (MMN) se referă la cazurile în care destinația unui link nu este vizibilă până când utilizatorul nu face clic pe el sau nu îndreaptă cursorul spre el. Termenul „mystery meat” a fost o referire la carnea servită în cantinele școlilor publice americane care este atât de procesată încât nu se mai poate distinge tipul lor exact.

MMN este rău pentru că reduce posibilitatea de descoperire a elementelor de navigare. Acest lucru adaugă încărcătură cognitivă utilizatorilor, deoarece aceștia trebuie acum să ghicească cum să navigheze sau ce face un clic pe ceva.

În timp ce majoritatea MMN se găsesc în site-urile web mai vechi, acestea sunt surprinzător de răspândite în site-urile web moderne. Luați ca exemplu Lazor Office, o firmă de design care creează case prefabricate.

Autor/Deținător de drepturi de autor: Lazor Office, LLC. Termenii și licența drepturilor de autor: Fair Use

LazorOffice.com are o grilă de imagini MMN pe pagina sa de start. După cum puteți vedea, acest tablou oferă foarte puține indicații prețioase cu privire la locul unde trebuie să mergeți. În schimb, nouă imagini stau pur și simplu, lăsându-i pe unii dintre noi să mediteze la o enigmă mai degrabă decât să interacționeze cu o pagină.

Desubt de pliul paginii lor de pornire, o grilă de miniaturi de imagini așteaptă. Se poate da clic pe ele? Ei bine, da – dacă mutați cursorul mouse-ului peste o imagine, acesta se transformă într-un pointer. Dar ce se întâmplă atunci când faceți clic pe o imagine?

„Faceți clic pentru a afla!” nu este niciodată o soluție bună pentru experiența utilizatorului (UX). Sunt șanse mari ca utilizatorii dvs. să abandoneze navigarea și să găsească o soluție alternativă pe site-ul unui concurent.

Bine: Fișe de curs pe site-ul Interaction Design Foundation

Din fericire, problemele MMN sunt ușor de rezolvat. Cheia este să fiți conștienți că trebuie să etichetați clar legăturile. Simpla adăugare a mențiunii „View project” care apare la trecerea mouse-ului va îmbunătăți utilizabilitatea paginii Lazor Office de mai sus.

Autor/Deținător de drepturi de autor: Interaction Design Foundation ApS. Termeni de copyright și licență: Fair Use

Cărțile noastre de curs sunt la fel de puțin misterioase ca și linkurile.

Pentru cărțile de curs ale Interaction Design Foundation, nu numai că avem „View Course” în partea de jos a fiecărei cărți pentru a indica acțiunea care se va întâmpla, dar avem și o stare de hover cu textul „Go to course”. Multe site-uri web urmează o convenție similară și ar trebui să faceți și dvs. la fel, pentru a maximiza utilizabilitatea site-ului dvs. web.

Lecția învățată: Cele mai bune practici

Etichetați-vă întotdeauna legăturile! Nu v-ar plăcea să mâncați carne misterioasă – și, în mod similar, utilizatorilor dvs. nu le-ar plăcea să facă clic pe linkuri misterioase.

Adaugarea de fricțiune la acțiunile utilizatorilor

Răul: iFly50.com

Ca proiectanți, ar trebui să adăugăm fricțiune la acțiunile utilizatorilor cu extremă precauție, cu excepția cazului în care scopul este de a descuraja utilizatorii să efectueze acea acțiune. Uneori, însă, am putea chiar să adăugăm neintenționat fricțiune la acțiunile utilizatorilor (de cele mai multe ori din motive estetice sau de noutate) care au ca rezultat o UX dăunătoare.

Un exemplu este iFly50.com, creat pentru aniversarea revistei iFly de către KLM. iFly 50 este un site web cu defilare verticală care prezintă 50 de destinații de călătorie, iar în unele destinații (cum ar fi cea de mai jos), un buton din partea de jos le cere utilizatorilor să facă clic și să mențină apăsat timp de câteva secunde pentru a vedea mai multe fotografii.

Autor/Deținător de drepturi de autor: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Termenii și licența drepturilor de autor: Fair Use

iFly 50 se așteaptă ca utilizatorii săi să facă clic și să mențină apăsat timp de câteva secunde de fiecare dată când doresc să vadă mai multe fotografii.

Acțiunea de a adăuga câteva secunde de fricțiune la fiecare acțiune poate duce la o UX extrem de slabă. Imaginați-vă dacă, în loc să dați clic pentru a încărca instantaneu o pagină, acum trebuie să dați clic și să țineți apăsat timp de două secunde pentru fiecare link pe care ați dat clic în browser. Veți renunța cu totul la explorarea internetului după câteva click-uri și mențineri.

De multe ori, noi, designerii, avem tendința de a ne lăsa purtați de cele mai noi stiluri de interacțiune sau acțiuni, dar este esențial să fiți întotdeauna precauți atunci când designul dumneavoastră ar putea adăuga fricțiune la acțiunile utilizatorilor. De cele mai multe ori, convențiile încercate și testate (de exemplu, simplele clicuri sau glisări) funcționează perfect.

Bine: Derularea elastică pe iOS

Interesant este faptul că adăugarea atentă de fricțiune la acțiunile utilizatorului poate avea ca rezultat un design excelent. Una dintre cele mai populare invenții ale Apple în sistemul lor de operare mobil, iOS, este crearea derulării elastice, unde în anumite situații (cum ar fi la sfârșitul unei pagini web) derularea devine din ce în ce mai dificilă.

Autor/Deținător de drepturi de autor: Interaction Design Foundation ApS. Termenii și licența drepturilor de autor: Fair Use

În derularea elastică a iOS, se adaugă în mod deliberat fricțiune în anumite situații.

Puteți vedea acest lucru în acțiune mai sus, unde apare o fricțiune crescută atunci când utilizatorul derulează până la finalul paginii web. Fricțiunea a fost adăugată pentru a indica situațiile în care derularea nu mai este permisă: iar efectul este o experiență intuitivă.

Lecția învățată: Cea mai bună practică

Evitați, pe cât posibil, să adăugați orice fel de fricțiune la acțiunile utilizatorului – și implementați-o cu atenție atunci când nu aveți alternativă.

Design „inteligent” care ignoră utilizabilitatea

Rău: Bolden.nl

Câteodată, designul inteligent poate fi în detrimentul UX-ului. Ceea ce face ca această greșeală să fie și mai periculoasă este faptul că noi, designerii, iubim designurile inteligente. Sunt mici minuni grafice care ne aduc un zâmbet pe față. Din păcate, majoritatea oamenilor nu sunt designeri. Chiar și mai trist, nu toate designurile inteligente sunt designuri bune, mai ales atunci când creează probleme de accesibilitate, de descoperire sau de utilizare.

Să luăm ca exemplu site-ul web al studioului olandez de design strategic și dezvoltare Bolden:

Autor/Deținător de drepturi de autor: Bolden. Termenii și licența drepturilor de autor: Fair Use

Puteți spune ce încearcă să spună pagina lor de pornire? Nu? Ei bine, asta pentru că va trebui să vă deplasați cu mouse-ul în colțul paginii pentru a vedea corect mesajele.

Autor/Deținător copyright: Bolden. Termenii și licența drepturilor de autor: Fair Use

Este acesta un design inteligent? Da, cu siguranță. Dar este un design prost? Absolut!

Acesta este un exemplu excelent de proiectare pentru designer, mai degrabă decât pentru utilizator: site-ul a redus serios lizibilitatea titlurilor sale în determinarea creatorilor săi de a oferi un design inedit. Cel care a proiectat acest lucru a omis, de asemenea, un text care să le spună utilizatorilor că trebuie să își mute mouse-ul în colțuri, ceea ce înseamnă că descoperirea titlurilor se bazează pe întâmplare. În plus, chiar și atunci când titlul este dezvăluit, contrastul dintre text și fundal este slab datorită faptului că încă se poate vedea textul suprapus. Toate acestea se adaugă pentru a crea un site web neprietenos pentru utilizator.

Binele: CultivatedWit.com

Site-ul lui Cultivated Wit este un contra-exemplu grozav despre cum un design inteligent nu trebuie neapărat să pună la grea încercare ușurința de utilizare.

Autor/Deținător de drepturi de autor: Cultivated Wit. Termenii și licența drepturilor de autor: Fair Use

Pagina de start a lui Cultivated Wit afișează o bufniță ilustrată.

În pagina de start a lui Cultivated Wit, ilustrația bufniței face cu ochiul atunci când mouse-ul trece peste ea:

Autor/Deținător de drepturi de autor: Cultivated Wit. Termenii și licența drepturilor de autor: Fair Use

Surpriză! Bufnița îți face cu ochiul atunci când îndrepți cursorul spre ea. Observați, de asemenea, alocarea înțeleaptă a spațiului alb.

Diferența cheie aici este că acest lucru nu formează o parte esențială a site-ului web, astfel încât nu diminuează utilizabilitatea chiar dacă utilizatorul nu descoperă acest element de design inteligent.

În plus, au o săgeată clară îndreptată în jos pentru a sugera că ceva se află sub pliu. Iar când derulați în jos, veți vedea acest lucru:

Autor/Deținător de drepturi de autor: Cultivated Wit. Termeni de copyright și licență: Fair Use

Și site-urile web pot fi inteligente fără a sacrifica UX.

Copia (care este lizibilă și are un contrast bun) creează un sentiment de spirit – nu foarte diferit de ceea ce Bolden a încercat să obțină – fără a diminua UX-ul site-ului web. Singura mică problemă este că textul „Alăturați-vă clubului nostru de e-mail” ar trebui să fie mai vizibil, dar luat în ansamblu, site-ul web al Cultivated Wit este un exemplu excelent de realizare a unui design inteligent fără a crea un UX slab.

Lecția învățată: Cele mai bune practici

Proiectele inteligente ar trebui întotdeauna să fie făcute cât mai infailibile posibil, și/sau testate pe utilizatori reali. Uneori, proiectele inteligente se pot întoarce împotriva lor și pot dăuna uzabilității.

Animări superflue

Rău: PayPal Receipt Concept on Dribbble

Animațiile sunt un element crucial al designului de interacțiune, dar ar trebui să aibă întotdeauna un scop. Ele nu ar trebui să fie făcute niciodată de dragul animației. Din păcate, designerii au tendința de a avea o poveste de dragoste cu animațiile, în parte pentru că animațiile sunt atât de distractive de creat încât s-ar putea să nu știm când să ne oprim.

Conceptul de animație al lui Vladyslav Tyzun pentru o chitanță de e-mail PayPal, postat pe Dribbble, este un exemplu de animație făcută greșit:

Autor/Deținător de drepturi de autor: Vladyslav Tyzun. Termenii și licența drepturilor de autor: Fair Use.

Animarea este frumoasă, dar superfluă. În total, durează enorm de mult, 3,5 secunde pentru a vedea detaliile tranzacției. Un simplu fade-in al chitanței ar fi mai elegant și, pentru că ocupă mai puțin timp, mai bun și pentru utilizator.

Această problemă devine periculoasă atunci când designerii par să nu se mai sature de animații. Începând cu 2016, animația lui Vladyslav ar fi primit peste 500 de like-uri și 8.000 de vizualizări. Acest lucru arată o apreciere greșită pe care designerii o au față de animație de dragul animației. Faptul de a avea o perspectivă asupra tendinței designerilor de a prefera epicul în picaj în detrimentul unor reprezentări mai directe și de a vă prinde înainte de a ceda în fața animațiilor vă va economisi mult timp și va preveni multe dureri de cap. Nu uitați, utilizatorii vin pe site-uri cu un scop – vrem să le arătăm ceea ce caută într-un spațiu și timp scurt, nu să-i reținem într-un mare tur al galeriei.

Binele: Stripe Checkout’s Animation

Când facem animația în mod intenționat, totuși, rezultatele pot fi grozave. Priviți animația lui Stripe Checkout atunci când utilizatorul primește un cod de verificare:

Autor/Deținător de drepturi de autor: Stripe, Inc. Termenii și licența drepturilor de autor: Fair Use.

Stripe folosește animații pentru a face ca lucrurile să pară mai rapide decât sunt: oferă utilizatorilor actualizări (cum ar fi „Sent”), chiar dacă s-ar putea să nu fi primit încă SMS-ul. Acest lucru îi împiedică pe utilizatori să se simtă frustrați de faptul că trebuie să aștepte și le oferă siguranța că un SMS este pe drum chiar acum.

Rachel Nabors, un expert în animații web invitat la W3C, sugerează cinci principii de care trebuie să se țină cont atunci când se proiectează animații3:

1. Animați în mod deliberat: gândiți-vă la fiecare animație înainte de a o crea.
2. Este nevoie de mai mult de 12 principii: Cele 12 principii de animație ale lui Disney funcționează pentru filme, dar nu neapărat pentru site-uri web și aplicații.
3. Util și necesar, apoi frumos: estetica ar trebui să treacă în plan secundar față de UX.
4. Mergeți de patru ori mai repede: animațiile bune sunt discrete, ceea ce înseamnă că se execută rapid.
5. Instalați un kill switch: pentru animațiile mari, cum ar fi efectele parallex, creați un buton de oprire.

Lecția învățată: Cele mai bune practici

Faceți întotdeauna ca animațiile să aibă un scop: prea multe pot ucide UX-ul unui produs. Frumusețea trebuie să își facă datoria și să fie funcțională.

The Take Away

Nu este amuzant să te uiți la exemple de design prost? Din fericire, este și educativ. Iată care sunt lecțiile cheie și cele mai bune practici din cele cinci exemple de design bun și rău:

1. Înțelegeți de ce au nevoie utilizatorii dvs., apoi livrați acele informații.
2. Dacă aveți multe informații de transmis, încercați să folosiți elemente vizuale în loc de text.
3. Etichetați-vă întotdeauna legăturile! Utilizatorilor nu le plac legăturile misterioase.
4. Evitați să adăugați orice fel de fricțiune la acțiunile utilizatorilor, cu excepția cazului în care acestea sunt menite să descurajeze acțiunea.
5. Testați-vă desenele inteligente și includeți-le cu prudență.
6. Animația este ca o înjurătură. Dacă o folosiți în exces, își pierde tot impactul.4

Când vă încruntați la un exemplu de design prost, opriți-vă să vă gândiți: înțelegeți de ce designul a eșuat, găsiți exemple de designuri care au făcut lucrurile bine și notați mental lecția pe care ați învățat-o. Și apoi împărtășiți dragostea: împărtășiți lecția dvs. cu alți designeri pe forumul nostru de discuții!