1
1. UI vs UX — definitii si relatia dintre ele
UI (User Interface — Interfata utilizator) cuprinde toate elementele vizuale si interactive ale unui sistem digital: butoane, meniuri, culori, fonturi, iconite, campuri de introducere a datelor. UI raspunde la intrebarea: Cum arata produsul?
UX (User Experience — Experienta utilizatorului) este conceptul mai larg: include intreaga experienta a unei persoane atunci cand interactioneaza cu un produs digital — cat de usor isi atinge scopul, cat de putine erori face, cat de multumit se simte. UX raspunde la intrebarea: Cat de usor si placut este sa folosesti produsul?
Analogie militara: UI vs UX la o statie radio
UI al unei statii radio militare: butoanele fizice, ecranul LCD, culoarea carcasei, marimea cifrelor afisate. UX: cat de rapid poate un operator sa schimbe frecventa in conditii de stres, cat de clar aude confirmarea operatiei, cate greseli face in intuneric.
Un design UI atractiv nu garanteaza UX bun. O statie cu butoane elegant pozitionate dar confuz etichitate are UI decent si UX slab.
Componentele UX (modelul lui Don Norman)
- Utilitate — produsul face ceea ce utilizatorul are nevoie
- Uzabilitate — utilizatorul poate realiza sarcina usor si fara erori
- Accesibilitate — produsul poate fi folosit si de persoane cu dizabilitati
- Placere — interactiunea este agreabila, nu frustranta
- Credibilitate — utilizatorul are incredere in sistem si in datele afisate
In industrie, designerul UI se ocupa de estetica si componentele vizuale, iar designerul UX face cercetare cu utilizatori, creaza fluxuri de utilizare (user flows) si wireframe-uri. In proiectele mici, acelasi om face ambele roluri (designer UI/UX).
2
2. Principii de baza ale design-ului UI: contrast, ierarhie, spatiere
Principiile fundamentale ale UI determina daca o interfata este lizibila, clara si eficienta:
1. Contrast
Contrastul dintre text si fundal trebuie sa fie suficient de ridicat pentru ca textul sa fie citibil. Standardul international WCAG 2.1 (Web Content Accessibility Guidelines) defineste:
- Text normal (<18pt): raport de contrast minim 4.5:1
- Text mare (≥18pt sau 14pt Bold): raport de contrast minim 3:1
Exemple de contrast:
Text gri pe fond gri — contrast insuficient (aprox. 1.5:1)
Text alb pe fond albastru inchis — contrast bun (aprox. 8:1)
2. Ierarhia vizuala
Ochiul uman urmeaza ordinea vizuala impusa de designer: elementele mari si contrastate sunt vazute primele. Instrumente pentru ierarhie vizuala:
- Marimea — titlurile sunt mai mari decat textul de corp; actiunile principale au butoane mai mari
- Greutatea (weight) — Bold pentru elemente importante, Regular pentru informatii secundare
- Culoarea — culoarea de accent (accent color) atrage atentia catre actiunile cheie
- Pozitia — elementele importante sunt plasate sus sau in centru (zone cu atentie maxima)
3. Spatiere (Whitespace / Negative Space)
Spatiul liber dintre elemente nu este „spatiu pierdut" — este un instrument de design. Spatiere corecta:
- Reduce aglomeratia vizuala (clutter) si face interfata respirabila
- Grupeaza elementele inrudite (Legea Gestalt a proximitatii: elementele apropiate par legate)
- Ghideaza privirea catre zona importanta
Regula: spatiul dintre grupuri de elemente trebuie sa fie mai mare decat spatiul dintre elementele din acelasi grup.
4. Consistenta
Acelasi tip de actiune trebuie sa arate identic in toata aplicatia. Butoanele de confirmare (OK, Salvati, Trimite) sa aiba aceeasi culoare, marime si pozitie in orice ecran. Inconsistenta create confuzie si erori.
3
3. Euristicile Nielsen pentru uzabilitate
Jakob Nielsen a formulat in 1994 cele 10 euristici ale uzabilitatii — principii generale verificate empiric care descriu ce face o interfata usor de folosit. Sunt standard in industrie si in auditurile de UX.
Cele 10 euristici Nielsen (rezumat)
| Nr. | Euristica | Exemplu practic |
|---|---|---|
| 1 | Vizibilitatea starii sistemului | Bara de progres la incarcarea unui fisier; mesaj „Raportul a fost trimis cu succes" |
| 2 | Potrivire intre sistem si lumea reala | Folderul arata ca un dosar fizic; cosul de gunoi arata ca un cos real |
| 3 | Control si libertate pentru utilizator | Buton Anuleaza / Undo la orice actiune importanta |
| 4 | Consistenta si standarde | Butonul OK intotdeauna verde, butonul Sterge intotdeauna rosu |
| 5 | Prevenirea erorilor | Dialog de confirmare inainte de stergere definitiva a unui fisier |
| 6 | Recunoastere in loc de amintire | Meniu vizibil permanent vs. comenzi ascunse pe care utilizatorul trebuie sa le memoreze |
| 7 | Flexibilitate si eficienta | Scurtaturi de tastatura (Ctrl+S) pentru utilizatori avansati, pe langa meniu pentru incepatori |
| 8 | Design estetic si minimalist | Afisarea doar a informatiei necesare; eliminarea elementelor decorative care distrag atentia |
| 9 | Ajutor la recunoasterea, diagnosticarea si recuperarea din erori | Mesaj de eroare clar: „Fisierul nu a putut fi salvat — verificati spatiul disponibil pe disc" (nu „Eroare 0x80070005") |
| 10 | Ajutor si documentatie | Sectiune Ajutor accesibila din orice ecran, cu exemple concrete si pasii de urmat |
Aplicatie militara: interfata sistemului de raportare
Un sistem de raportare operationala respecta euristicile astfel: bara de status arata „Raport transmis — asteptare confirmare" (E1), formularele folosesc terminologia din regulamentele militare (E2), exista buton „Anuleaza transmiterea" in primele 30 secunde (E3), confirmarea de stergere apare obligatoriu (E5), iar mesajele de eroare indica exact ce camp este gresit si cum se corecteaza (E9).
4
4. Wireframe-ul — schita structurala a unei interfete
Un wireframe este o schita schematica a unei interfete digitale, realizata inainte de design-ul final. Arata ce exista pe ecran si unde este plasat fiecare element, fara a specifica culori finale, fotografii sau tipografie detaliata.
De ce se folosesc wireframe-uri?
- Validare rapida — se poate modifica structura in minute, nu ore; mult mai ieftin decat a redesena intreg design-ul
- Comunicare intre echipe — designerul, programatorul si clientul vad acelasi plan structural
- Focus pe structura, nu estetica — evita discutii premature despre culori cand inca nu s-a stabilit ce functii are pagina
- Testare cu utilizatori — poti testa fluxul de navigare pe wireframe inainte de a scrie o linie de cod
Exemplu: wireframe simplificat al unui ecran de raportare
[ Acasa ] | [ Rapoarte noi ] | [ Arhiva ] | [ Profil ] | [ Deconectare ]
[ Titlu sectiune: Raport zilnic de activitate ]
[ Camp text: Data si ora (completat automat) ]
[ Camp text: Unitate raportoare ]
[ Zona text mare: Descrierea activitatii ]
[ Dropdown: Nivel clasificare ] [ Dropdown: Prioritate ]
[ Buton principal: TRIMITE RAPORT ] [ Buton secundar: Salveaza ciorna ]
In wireframe, elementele sunt reprezentate prin dreptunghiuri si text descriptiv. Culorile, fonturile si imaginile vor fi adaugate in etapa de mockup (design detaliat).
Etapele procesului de design UI/UX
- Cercetare (User Research) — interviuri si observarea utilizatorilor reali pentru a intelege nevoile lor
- Wireframe (Lo-Fi) — schita structurala, rapid de realizat si de modificat
- Mockup (Hi-Fi) — design detaliat cu culori, fonturi, imagini reale (realizat in Figma, Adobe XD, Sketch)
- Prototip interactiv — mockup-ul devine „clickabil" pentru testare cu utilizatori
- Testare uzabilitate — utilizatori reali executa sarcini; designerul observa si noteaza problemele
- Implementare — programatorii construiesc interfata pe baza mockup-ului aprobat
5
5. Ergonomie digitala si standarde militare (MIL-STD-1472)
Ergonomia digitala (sau Human Factors Engineering in terminologia anglosaxona) studiaza cum trebuie proiectate sistemele digitale pentru a minimiza erorile umane, oboseala cognitiva si timpul de executie a sarcinilor. In mediul militar, erorile de interfata pot costa vietii — de aceea exista standarde obligatorii.
MIL-STD-1472 — principii relevante pentru interfete digitale
- Dimensiuni minime ale elementelor interactive: butoanele fizice trebuie sa fie operabile cu manusi tactice; pe ecrane tactile, dimensiunea minima recomandata este 25mm x 25mm pentru operare cu degetul inmanat
- Culori standardizate de alarma:
- Rosu — conditie de pericol, oprire urgenta, alarma critica
- Galben / Portocaliu — atentie, conditie de precautie, degradare de performanta
- Verde — conditie normala, sistem operational, siguranta
- Albastru — informatii neutrale (utilizarea ca alarma este interzisa)
- Contrast in conditii variate de iluminare: interfetele trebuie lizibile atat in intuneric complet (mod nocturn, fundal negru, text verde/alb) cat si la lumina solara directa (contrast maxim)
- Reducerea incarcarii cognitive: pe un ecran de lupta, numarul de elemente simultan vizibile trebuie minimizat; informatia critica trebuie sa aiba prioritate vizuala absoluta
- Cod redundant: informatia critica este transmisa prin mai mult de un canal senzorial (vizual + auditiv + vibratii) pentru a nu fi ratata
Mod nocturn si adaptabilitate la mediu
Sistemele militare moderne au mod zi / mod noapte comutabil: in mod nocturn, fundalul devine negru, textul devine verde sau rosu inchis (culori care pastreaza vederea adaptata intunericului si nu orbesc operatorul). Luminozitatea ecranului este reglabila fin pentru a nu compromite camuflajul.
Principiu transferabil la orice aplicatie: dark mode nu este doar o preferinta estetica — in anumite conditii de lucru (cabine de pilotaj, centru de comanda cu lumina redusa), modul inchis reduce oboseala vizuala si erorile de citire.
Incarcare cognitiva (Cognitive Load)
Memoria de lucru umana poate procesa simultan 7 ± 2 elemente (Legea lui Miller). O interfata buna nu forteaza utilizatorul sa retina mai mult decat atat simultan. Tehnici de reducere a incarcarii cognitive:
- Gruparea informatiilor inrudite (chunking)
- Completarea automata a campurilor predictibile
- Afisarea contextului relevant doar atunci cand este necesar (progressive disclosure)
- Meniuri cu maxim 7 optiuni la un nivel de adancime
6
6. Proiectarea unui produs digital: proces complet si evaluare
Un produs digital de calitate rezulta dintr-un proces iterativ: cercetare → design → testare → corectie → repetare. Nici un designer nu produce design perfect din prima iteratie — testarea cu utilizatori reali este obligatorie.
Metode de evaluare a uzabilitatii
- Testare cu utilizatori (Usability Testing) — 5-8 utilizatori reprezentativi executa sarcini concrete; designerul observa si noteaza unde se blocheaza. Regula lui Nielsen: 5 utilizatori descopera 85% din problemele de uzabilitate
- Evaluare euristica — 3-5 experti in UX evalueaza independent interfata in raport cu cele 10 euristici Nielsen si identifica problemele
- A/B Testing — doua versiuni ale unui element (buton rosu vs. albastru) sunt testate simultan pe utilizatori reali; se masoara care varianta produce mai multe actiuni corecte
- Analiza jurnalelor (Log Analysis) — se analizeaza date de utilizare reala: ce butoane sunt apasate cel mai mult, unde se abandoneaza o sarcina, ce erori apar frecvent
- Card Sorting — utilizatorii grupeaza elementele de meniu in categorii logice din perspectiva lor; reveleaza cum gandesc utilizatorii, nu cum gandeste designerul
Evaluarea unui design: lista de verificare rapida
- ☑ Contrastul text/fundal respecta WCAG 4.5:1 pentru text normal?
- ☑ Exista feedback vizibil pentru orice actiune a utilizatorului?
- ☑ Elementele interactive sunt suficient de mari pentru utilizarea prevazuta (mouse / touch / manusi)?
- ☑ Culorile de alarma respecta conventiile standardizate (rosu = pericol)?
- ☑ Meniurile au maxim 7 optiuni la un nivel de adancime?
- ☑ Exista posibilitate de Undo / Anulare pentru actiuni importante?
- ☑ Mesajele de eroare sunt clare si indica solutia, nu doar codul erorii?
- ☑ Designul este consistent pe toate ecranele aplicatiei?
Instrumente uzuale de design UI/UX
- Figma — instrument colaborativ bazat pe web (browser); cel mai raspandit in industrie; permite wireframe, mockup si prototip interactiv in acelasi loc
- Adobe XD — alternativa Adobe la Figma; integrat cu suita Creative Cloud
- Balsamiq — specializat in wireframe-uri rapide cu aspect de schita (schitatoare intentionat pentru a evita discutii premature despre estetica)
- Canva — instrument accesibil pentru mockup-uri simple, fara courba de invatare
- Draw.io / diagrams.net — gratuit, bun pentru diagrame de flux si wireframe-uri simple
7
7. Recapitulare: de la concept la produs digital ergonomic
Un produs digital ergonomic nu apare intamplator — este rezultatul unui proces structurat in care fiecare decizie de design este luata in beneficiul utilizatorului final, nu al designerului sau al clientului.
Sinteza procesului UI/UX — de la nevoie la produs
- Identificarea nevoii — Ce problema rezolva produsul? Pentru cine? In ce context de utilizare? (Birou, teren, conditii de stres?)
- Cercetarea utilizatorilor — Interviuri, observatie, analiza sarcinilor reale; livrabil: personaje utilizator (personas) si harti de calatorie (journey maps)
- Arhitectura informatiei — Cum este organizata informatia? Ce este la primul nivel de meniu, ce este la al doilea? Livrabil: sitemap, diagrama fluxului de navigare
- Wireframe (Lo-Fi) — Schita structurala; validata rapid cu utilizatori; iterata pana cand structura este corecta
- Mockup (Hi-Fi) — Design vizual detaliat cu culori, fonturi, iconite, imagini; respecta principiile de contrast, ierarhie, consistenta
- Prototip interactiv — Mockup-ul devine clickabil; simuleaza experienta reala fara a scrie cod
- Testare de uzabilitate — 5+ utilizatori reali; se identifica problemele; se itereaza designul
- Specificatii tehnice — Designerul livreaza programatorilor: grid, spatieri exacte, culori in cod hex, exporturi de iconite, descrierea comportamentelor interactive
Principii de memorat
- UI = cum arata | UX = cum functioneaza din perspectiva utilizatorului
- Contrast WCAG 4.5:1 pentru text normal — standard obligatoriu de accesibilitate
- Cele 10 euristici Nielsen — checklist de evaluare pentru orice interfata
- Wireframe inainte de mockup — nu investi in estetica pana cand structura nu este validata
- Testare cu 5 utilizatori descopera 85% din probleme (regula Nielsen)
- MIL-STD-1472 — standard de ergonomie pentru sisteme militare: culori de alarma fixe, dimensiuni minime pentru operare in manusi
Regula de aur a UX: nu esti utilizatorul tau. Designerul cunoaste prea bine produsul si nu poate anticipa confuzia unui utilizator nou. Testarea cu utilizatori reali nu este optionala — este singura cale de a valida ca produsul functioneaza pentru oamenii pentru care a fost creat.