Designuri rele vs. Designuri bune: 5 exemple din care putem invata

Analiza de exemple de designuri rele comparativ cu contra-exemple de designuri bune nu este doar distractiv ci, de asemenea, scoate in evidenta lucruri importante pentru designeri. Ele evidentiaza capcanele pe care sa le evite designerii si ne ajuta sa intelegem cum sa traducem teoriile designului in solutii care sa functioneze in lumea reala. Jared Spool, un scriitor american, cercetator si expert in uzabilitate, a spus candva: „Designurile bune, cand sunt realizate cum trebuie, devin invizibile. Doar atunci cand sunt realizate prost, ele sunt observabile. ”Sa ne uitam, deci, la 5 exemple de designuri clar proaste, sa scoatem in evidenta modul in care designurile bune functioneaza si sa distingem cateva lectii prin care si noi sa reusim sa creem experiente marete si invizibile pentru utilizatorii nostri.

1. Supraincarcarea cu informatie

Rau: Semne de parcare in Los Angeles

Semnele de parcare din Los Angeles (LA) au fost rezumatul supraincarcarii cu informatie de-a lungul ultimilor zeci de ani. Ele au fost dintotdeauna cunoscut de greu de inteles deoarece regulile de trafic sunt complexe, ceea ce a dus la nevoia de a comprima multa informatie in spatii foarte mici. Cat de confuze sunt aceste semne? Hai sa ne uitam de acest exemplu din anii 2010:

Asa cum arata si semnele de parcare din LA, acest exemplu este unul destul de simplu.

Imaginati-va ca sunteti un sofer ce conduceti pe aceasta sosea intr-o zi de luni dimineata la ora 9. Puteti parca in acest loc? Ceea ce suna ca o intrebare foarte simpla, necesita un efort intelectual deosebit pentru a da un raspuns.
Ca designeri, ne confruntam frecvent cu situatii in care suntem nevoiti sa proiectam o multime de informatii pentru ca acestea sa fie afisate intr-un spatiu mic. Semnele de parcare din LA ar putea fi un caz extrem, dar de multe ori, design-urile pentru aplicatii mobile se confrunta cu aceleasi probleme. Exista o cale de rezolvare – pentru semne de parcare si designeri deopotriva?

Bun: Semnul de parcare al lui Nikki Sylianteng

Proiectarea unui semn care sa afiseze toate informatiile, fiind in acelasi timp si usor de inteles, suna ca o sarcina imposibila. Dar asta e exact ceea ce designer-ul din Brooklyn, Nikki Sylianteng a facut.

Nikki a propus semnul de parcare pentru ca acesta sa fie folosit in LA ca parte a unui experiment. O parte din ceea ce a realizat Nikki functioneaza bine datorita faptului ca este centrat pe utilizator: Nikki pur si simplu a realizat ca soferii vor doar sa stie daca pot sau nu parca intr-un loc. Da sau nu – asta e tot ceea ce considera soferii ca fiind necesar si aceasta e tot ceea ce toate semnele de parcare arata.

In design-ul ei, de asemenea, a facut uz de efecte vizuale mai degraba decat de text, pentru a transmite informatii. Rezultatul este incredibil de intuitiv: verde pentru OK, rosu pentru “ Nu parcati”. Chiar este proiectat si pentru discromati, cu dungi pentru “ Nu parcati”.
Acum, cand te uiti la semn, vei stii ca marti, la ora 9:00, parcarea nu este permisa. Barele iti vor arata tot ceea ce trebuie sa stii dintr-o simpla privire – simplu.

Lectii invatate: Pratica cea mai buna

• Intelege ceea ce utilizatorii au nevoie, deoarece design-ul este bazat pe asta. Acest lucru ajuta la reducerea excesului de informatii.
• Ai o multime de informatii sa le transmiti utilizatorilor tai? Incearca sa utilizezi imagini in locul textului. Aflati mai multe despre datele de vizualizare aici.

2. Navigarea Mystery Meat

Rau: LazorOffice.com

Inventata in 1998 de Vincent Flanders prin pagini web ca Suck2, Navigarea Mystery Meat (MMN) se refera la cazurile in care destinatia unui link nu este vizibila pana cand utilizatorul face click pe acestea sau pune cursorul pe ea. Termenul MMN a fost o trimitere la carnea servita in cantinele scolilor publice americane, care sunt prelucrate in asa fel incat tipul sa nu mai fie vizibil exact.

MMN este rau, deoarece reduce descoperirea elementelor de navigare. Aceasta adauga eforturi de gandire pentru utilizatori, deoarece ei acum trebuie sa ghiceasca sau sa presupuna cum sa navigheze.

In timp ce majoritatea MMN se gasesc in site-urile mai vechi, acestea sunt surprinzator de raspandite chiar si in site-urile moderne. Vezi Lazor Office, o firma de design, care creaza case pre-fabricate, de exemplu.

LazorOffice.com are o grila de imagini MMN pe pagina de start. Dupa cum puteti vedea, acest tablou da mici indicii pretioase cu privire la unde sa mergi. In schimb, cele noua imagini doar stau, lasandu-ne sa deslusim o enigma decat sa interactionam cu pagina.

Mai jos pe pagina initiala se afla in asteptare o grila de imagini in miniatura. Se poate da click pe ele? Ei bine, da – in cazul in care deplasati cursorul mouse-ului peste o imagine, aceasta se va schimba intr-un indicator. Dar ce se intampla cand faceti click pe o imagine?
“Click pentru a afla!” nu este o solutie buna pentru experienta unui utilizator (UX). Sunt sanse ca utilizatorii sa abandoneze navigarea pentru a gasi o solutie alternativa pe site-ul unui concurent.

Bun: Carti de cursuri pe site-ul Interaction Design Fundation

Din fericire, problemele de MMN sunt usor de rezolvat. Cheia consta in faptul ca trebuie sa fii constient ca trebuie sa evidentiezi clar link-urile. Prin simpla adaugare “Vezi proiect” care apare la trecerea mouse- ului peste link, va imbunatati gradul de utilizare a paginii Lazor Office.

Cartile de cursuri ale Interaction Design Fundation sunt la fel de putin misterioase ca link-uri care trebuiesc accesate pentru ele.

Pentru cartile de cursuri ale Interraction Design Fundation, avem nu numai “Vezi curs” in partea de jos a fiecarei carti, pentru a indica actiunea ce va avea loc, dar avem de asemenea, un status a trecerea mouseului peste carte cu textul “Mergi la curs”. Multe site-uri urmeaza o conventie similara, si ar trebui ca si tu sa-ti maximizezi gradul de utilizare al site-ului dvs.

Lectie invatata: Cele mai bune practici

• Eticheteaza intotdeauna link-urile! Nu ti-ai dori sa mananci carne misterioasa – si in mod similar, utilizatorii nu ar trebui sa fie fortati sa dea click pe link-uri misterioase.

3. Intarzierea actiunilor utilizatorului

Rau: iFly50.com

Ca designeri, ar trebui sa adaugam intarzieri la actiunile utilizatorului cu extrema prudenta, cu exceptia cazului in care efectuarea acestei actiuni are scopul de a descuraja utilizatorii. Uneori, cu toate acestea, s-ar putea chiar sa adaugam si neintentionat intarziere la actiunile utilizatorului (mai ales din motive estetice sau de noutate), care sunt in detrimentul UX design-ului.
Un exemplu este iFly50.com, creat pentru aniversarea revistei iFly a lui KLM. iFly este un site cu scrool vertical care prezinta 50 de destinatii de calatorie iar, in unele destinatii (cum ar fi cel de mai jos), un buton in partea de jos cere utilizatorilor sa faca click si sa tina apasat pentru cateva secunde, pentru a putea vizualiza mai multe fotografii.
iFly50 se asteapta ca utilizatorii sa faca click si sa tina pentru cateva secunde de fiecare data cand vor sa vada mai multe fotografii.

Actul de a adauga cateva secunde de intarziere la fiecare actiune poate duce la experiente de utilizare destul de scazute.

Imaginati-va cazul in care, in loc sa faceti click pentru a incarca o pagina instantaneu, veti face click si veti tine timp de doua secunde pentru fiecare link pe care ati facut click in browser-ul dumneavoastra. Veti inchide browserul cu totul dupa cateva click-and-holds.
De multe ori, noii designeri tind sa se lase distrasi de cele mai noi stiluri de interactiune sau actiuni, dar este foarte important sa fiti precauti de fiecare data cand design-ul ar putea adauga intarzieri la actiunile utilizatorului. In majoritatea cazurilor, conventiile incercate si testate (de exemplu, simplele click-uri) functioneaza perfect.

Bun: Scroll elastic pe IOS

Interesant, adaugarea intarzierii cu grija la actiunile utilizatorului poate duce la design deosebit. Una dintre inventiile Apple cele mai populare in sisteme de operare mobile, IOS, este crearea de scroll elastic, in cazul in care, in anumite situatii (cum ar fi la sfarsitul unei pagini web), scrollul devine tot mai dificil.

In scroll-ul elastic pe IOS, intarzierea este adaugata in mod deliberat in unele situatii.

Puteti vedea acest lucru in actiunea de mai sus, in cazul in care intarzierea apare atunci cand utilizatorul deruleaza la sfarsitul paginii web. Intarzierea a fost adaugata pentru a indica situatii unde scroll-ul nu mai este permis: efectul este o experienta intuitiva.

Lectie invatata: Cele mai bune practici

• Evitati adaugarea a oricarui fel de intarziere la actiunile utilizatorului, in masura in care aveti posibilitatea.
• Implementati- o cu grija atunci cand nu aveti alta alternativa.

4. Design “Inteligent” care ignora uzabilitatea

Rau: Bolden.nl

Uneori, design-ul inteligent poate fi in detrimentul experientei de utilizare. Ceea ce face aceasta greseala mai periculoasa este ca designerii iubesc design-ul inteligent. Acestea sunt mici minuni grafice care aduc zambetul pe fetele noastre. Din pacate, majoritatea oamenilor nu sunt designeri. Chiar mai trist, nu toate design-urile inteligente sunt design-uri bune, mai ales atunci cand acestea creeaza accesibilitate, descoperire sau probleme de utilizare.
Ia, de exemplu, design-ul strategic olandez si mediul de programare a site-ului Bolden,:

Puteti spune ceea ce incerca pagina lor sa afiseze? Nu? Ei bine, asta e pentru ca va trebui sa mutati mouse-ul in coltul paginii pentru a vedea mesajele in mod corespunzator.

Acesta este un design inteligent? Da, cu siguranta. Dar acest lucru este rau pentru design? Absolut!

Acesta este un exemplu excelent de proiectare pentru designer, mai degraba decat utilizator: site-ul reduce serios lizibilitatea titlurilor sale, iar asta numai pentru a incerca sa ofere un design nou. Cine a conceput acest text, de asemenea, a incercat sa spuna utilizatorilor ca acestia ar trebui sa mute mouse- ul in colturi, ceea ce inseamna ca descoperirea titlurilor se bazeaza pe intamplare. In plus, chiar si atunci cand titlul este dezvaluit, contrastul dintre text si fundal este slab din cauza ca puteti vedea texte care se suprapun. Toate acestea creeaza un site neprietenos.

Bun: CultivatedWit.com

Site-ul Cultivated Wit este un mare contra-exemplu despre cum modul de design inteligent nu are nevoie sa puna o presiune pe uzabilitate.

Pagina de start a site-ului Cultivated Wit afiseaza o bufnita ilustrata.

In pagina de pornire a site-ului Cultivated Wit, bufnita ilustrata iti va face cu ochiul atunci cand treci cu mouse-ul peste ea.

Surpriza! Bufnita iti face cu ochiul atunci cand treci cu cursorul peste ea.

Diferenta aici este ca acest lucru nu constituie o parte esentiala a site-ului astfel incat aceasta nu reduce gradul de utilizare chiar daca utilizatorul nu descopera acest element de design inteligent.

In plus, exista o sageata indreptata in jos pentru a sugera ca mai jos se afla ceva. Si atunci cand defilati in jos, veti vedea acest lucru:

Si site-urile web pot fi inteligente fara a sacrifica experienta de utilizare (User Experience-ul).

Transcrierea (care este lizibila si are un contrast bun) creeaza un sentiment de istetime – spre deosebire de ceea ce Bolden a incercat sa realizeze – fara a diminua experienta de utilizare a site-ului. Singura mica problema este textul “Intra in clubul nostru de email”. Acesta ar trebui sa fie mai vizibil, dar in ansamblu, site-ul Cultivated Wit este un exemplu foarte bun de design inteligent fara a crea o experienta saraca de utilizare.

Lectie invatata: Cele mai bune practici

• Design-urile inteligente ar trebui intotdeauna sa faca totul simplu de manevrat.
• Uneori, design-ul inteligent poate sa aiba recul si sa afecteze uzabilitatea.

5. Animatii inutile

Rau: Conceptul de primire bani PayPal, pe Dribble

Animatiile sunt elemente cruciale de interactiune ale design-ului, dar acestea trebuie sa serveasca intotdeauna unui scop. Acestea nu trebuie sa fie facute niciodata de dragul animatiei. Din pacate, designerii tind sa aiba o poveste de dragoste cu animatii, partial pentru ca animatiile sunt atat de distractiv de creat, insa trebuie sa stii cand sa te opresti.

Conceptul de animatie al lui Vladyslav Tyzin pentru email-ul de confirmare prin PayPal, postat pe Dribble, este un exemplu de animatie realizat gresit:

Animatia este draguta, dar inutila. In total este nevoie de un timp enorm de 3,5 secunde pentru a vedea detaliile tranzactiei. Un simplu fade-in de primire ar fi mai elegant, si pentru ca este nevoie de mai putin timp, asta este mai bine pentru utilizator.

Aceasta problema devine periculoasa atunci cand designerii aparent nu pot obtine destule animatii. Incepand cu 2016, animatia lui Vladyslav a obtinut mai mult de 500 aprecieri si 8000 de vizualizari. Acest lucru arata o apreciere gresita pe care designerii o au fata de realizarea animatiilor de dragul animatiei. Intelegand tendinta designer-ului de a prefera picajul epic mai mult decat reprezentarile si capturarile inainte de a da animatii, vei salva o multime de timp si vei preveni multe dureri de cap. Amintiti-va, utilizatorii vor veni pe site-uri pentru un scop. Noi vrem sa le aratam ceea ce cauta intr-un interval scurt de timp, fara sa ii retinem intr-un tur de muzeu.

Bun: Animatia Checkout pentru Stripe

Atunci cand facem animatie intentionat, rezultatele pot fi totusi si mari. Uita-te la animatia checkout pentru Stripe, atunci cand utilizatorul primeste un cod de verificare:

Stripe foloseste animatii pentru a face lucrurile mult mai repede: ofera utilizatorilor informatii cu actualizari (cum ar fi “Sent”), chiar daca acestia nu au primit inca SMS-uri. Acest lucru impiedica utilizatorii sa se simta frustrati ca trebuie sa astepte, si ofera asigurarea ca un SMS este pe cale sa ajunga.

Rachel Nabors, un expert de animatii web invitat la W3C, sugereaza cinci principii care trebuiesc pastrate in minte atunci cand se proiecteaza animatii:

1. Animare deliberata: crede in fiecare animatie inainte de a crea-o.
2. Este nevoie de mai mult de 12 principii: 12 principii ale lui Disney functioneaza pentru filme, dar nu neaparat pentru site-uri web si aplicatii.
3. Utile si necesare, apoi frumoase: estetica ar trebui sa ia loc pe bancheta din spate a experientei de utilizare.
4. Sa mearga de 4 ori mai rapid: animatiile bune sunt discrete, ceea ce inseamna ca acestea merg repede.
5. Instalati un comutator: pentru animatiile mari sa se creeze un buton de renuntare.

Lectie invatata: Cele mai bune practici

• Intotdeauna finalizeaza animatia: ceea ce este prea mult poate duce la uciderea experientei de utilizare a unui produs. Aceasta trebuie neaparat sa fie functionala.

Nu este distractiv sa privesti exemple de design slab? Din fericire, este educativ, de asemenea. Aici sunt lectii cheie si cele mai bune practici din cinci exemple de design-uri bune si rele:

• Intelege ceea ce utilizatorii au nevoie, apoi ofera aceste informatii.
• In cazul in care doriti sa transmiteti o multime de informatii, incercati sa utilizati imagini in locul textului.
• Etichetati intotdeauna link-urile dvs! Utilizatorilor nu le plac link-urile misterioase.
• Evita adaugarea de orice fel de intarziere la actiunile utilizatorului, cu exceptia cazului in care acestea sunt menite sa descurajeze actiunea.
• Testati design-urile dumneavoastra inteligente si includeti-le cu prudenta.
• Animatia este precum injuratura. In cazul in care va folositi prea mult de aceasta, isi pierde tot impactul.

Data viitoare incrunta-te cand vezi un exemplu de design slab si gandeste-te de ce design-ul nu a reusit, gaseste exemple de modele care au facut acest lucru corect. Si intr-un final, share the love: impartaseste ceea ce ai invatat cu alti utilizatori in forumurile de UX!