UX-ghid și standarde de interfață

1) Principii

Claritate înaintea frumuseţii. Semnificația și acțiunea sunt evidente în 1-2 secunde.
O ţintă pe ecran. Orice altceva este secundar sau ascuns.
Consistență. Aceleași modele = aceleași așteptări.
Disponibilitate implicită. Contrast, focalizare, tastatură, actorie vocală.
Contextualitate. Sfaturi și texte sunt exact în cazul în care acestea sunt necesare.
Localizare-primul. Lungimi de linie, formate, cultură - în design inițial.
Reversibilitate. Orice acțiune riscantă poate fi anulată/confirmată.
Măsurabilitate. Fiecare regulă este cu o metrică (conversie pas, timp, erori).

2) Grilă, liniuțe și ritm

Grilă: 4/8-pt; coloane: 12 (desktop), 6 (tabletă), 4 (mobil).
Liniuțe componente interne: multipli de 4; extern - 8/ 12/16/24.
Ritm vertical: titlu → subtitrare → conținut de acțiune → (CTA).
Frontiere și divizoare: economice; preferă „aerul” și ierarhia tipografiei.

3) Tipografie

Scala PIN: 12/14/ 16/20/24/32/40 (corp 16).
Înălțimea rândului: 1. 4–1. 6 pentru text, 1. 2–1. 3 pentru titluri.
Lungime linie: 45-75 caractere (desktop), 35-55 (mobil).
Evidențiere: îndrăzneț pentru accente semantice; capace - numai în etichete.
Readability cu voce tare: textele ar trebui să sune natural.

4) Culoare și contrast

Semantica: 'succes/info/warning/error/neutru'.
Contrast: WCAG minim 2. 1 AA (text/fundal ≥ 4. 5:1; mare ≥ 3:1).
Culoarea ≠ singurul semnal. Adăugați o pictogramă/text/formular.
Focalizați inelul: întotdeauna vizibil (nu dezactivați în CSS).

5) Arhitectura de navigație și informații

Calea utilizatorului: "Unde sunt? Ce este aici? Ce urmează?" - evident.
Ierarhia meniului: ≤ 2 nivele în navigarea principală.
Pesmet: pentru secțiuni profunde.
Căutare: disponibil la nivel global pe directoare complexe; hotkey '/'.
Stări de navigare: Fila/pagina activă este evidențiată cu jetoane.

6) Componente și modele

Folosim componentele sistemului de proiectare (fără „de casă”).
Un primar-CTA pe ecran; celelalte sunt secundare/terțiare.
State: implicit/hover/focus/active/disabled/loading - obligatoriu pentru fiecare interactiv.
Stări goale: context + valoare + CTA (+ legătură secundară).
Alerte comune: o pagină-alertă pe ecran + solicitări inline locale.

7) Formulare, validare și erori

Eticheta este obligatorie. Înlocuitorul este un exemplu de format, nu un înlocuitor.
Validare inline pentru neclaritate, erori sumare pentru trimitere.
Mesaj de eroare: ce este greșit + cum să remediați + constrângere/format.
Auto-scroll și să se concentreze la prima eroare; „aria-invalid”, „aria-descripedby”.
Măști și formate: prompt, dar nu rupe intrarea (paist este posibil).
Siguranța datelor: nu pierdeți nimic în timpul repornirii/erorii.

8) Condiții și feedback

Succes: pâine prăjită 2-4 s, ton neutru-pozitiv, CTA „ce urmează”.
Info/notificare: banner moale/tip, nu blochează fluxul.
Avertizare/Eroare/Critică: ierarhie vizual/semantic; critic - modal/banner cu acțiune explicită.
Încărcare: schelet> spinner; evaluarea timpului de așteptare> 3 s.

9) Conținut și microcopie

Regula celor trei răspunsuri: ce se întâmplă → de ce → ce să facem în continuare.
CTA: verb de acțiune + obiect („Salvați modificările”, „Verificarea trecerii”).
Numere/date/valute: formate locale.
Ton: prietenos; în pași stresanți (plată/securitate) - neutri.

10) Disponibilitate (A11y)

Navigare completă la tastatură; ordinea tabbing logic.
Roluri și „aria” pentru regiuni interactive, vii pentru toasturi/stări.
Contraste, inele de focalizare, dimensiuni interactive ≥ 44 × 44 px.
Alternative text pentru pictograme/imagini; tabele cu „th ”/„ domeniul de aplicare”.
Verificări: automate (linter/scanner) + scripturi manuale ale cititorului de ecran.

11) Localizare și internaționalizare

Toate șirurile de caractere sunt în contextul tastelor i18n.
Testarea „limbilor lungi” (DE/TR), moduri RTL.
Numere/valute/ori - formatarea utilităților.
Ton-map: gradul de formalitate/emoție după scenariu (onboarding/plăți/securitate).

12) Capacitatea de reacție și †

Puncte de întrerupere: 360/768/1024/1280 +.
Mobile-first: Cale critică disponibilă cu o mână, CTA în zona degetului mare.
Gesturi și tastatură: gesturile sunt duplicate cu butoane; pe desktop - taste rapide.
Densitate: pe desktop - „aer”, pe mobil - economii verticale fără a compromite clickability.

13) Temă întunecată

Contrastul prin WCAG este menținut; evitați „negru pur” pentru fundal (gri închis).
Strălucire/umbre - slăbit; focalizare inel contrast.
Ilustrații și logo-uri - cu versiuni inversate.
Politica de tranziție: salvați alegerea utilizatorului (sistem/lumină/întuneric).

14) Animații și mișcare

Durata: 120-200 ms (mici), 200-300 ms (tranziții).
Funcțiile de accelerare sunt naturale (cubic-bezier cu ușoară decelerare).
Animațiile nu ar trebui să blocheze fluxul și să afecteze lizibilitatea.
Respectul „preferă mișcarea redusă”.

15) Performanță

LCP ≤ 2. 5s, TTI/TBT în verde; despicarea codurilor; încărcare media leneș.
Virtualizarea listelor lungi; cache de date.
Schelet pentru percepția vitezei; minimiza aspectul „junk”.

16) Securitate și confidențialitate în UI

Explicații clare ale motivelor cererilor (aparat de fotografiat, KYC, geo).
termene/comisioane/limite transparente; fără „instantanee” dacă sunt posibile întârzieri.
Date confidențiale - mascarea, explicit „arată/ascunde”.
Confirmări pentru acțiuni ireversibile; Activitate Jurnal/Autentificare Notificări.

17) Măsurători de calitate UX

Pas de conversie și timp pentru a finaliza.
Rata de eroare pe câmpuri/pași și Timp-la-Fix.
CTR de CTA și repetabilitatea scenariului.
Drop-off după eroare/după încărcare> N secunde.
Suport apeluri după subiect (înainte/după modificări).
A11y-defects pentru eliberare (țintă - 0 critică).

18) Liste de verificare

Ecran pre-eliberare

• O țintă primară și una primară-CTA.

[The] navigare și în cazul în care I-am statutul sunt evidente.

• Conținut scurt: 1-2 propoziții pe bloc.
• Statele: încărcarea/golirea/eroarea/succesul sunt acoperite.
• A11y: AA contrast, se concentreze vizibil, „aria” pe interactiv.
• Localizare: lungimi de șir/formate/verificat RTL.
• Performanță: Fără blocuri „grele” inutil.

Formular de pre-eliberare

• Etichetele și formatele de probă sunt prezente.
• Validare inline + rezumat pentru a trimite.
• Derulați la prima eroare, focalizați-vă în casetă.
• Mesaje: ce/cum/de ce; fără 500/400 coduri pentru utilizator.
• Datele nu se pierd pe erori/repornire.

19) Anti-modele

„OK” ca CTA pe pași semantici.
Înlocuitor în loc de etichetă.
Culoare ca singurul semnal de stare.
Spinners cu nici o estimare de timp și nici o alternativă.
Ferestre modale fără capcană de focalizare și închidere ESC.
Amestecarea stilurilor/pictogramelor, duplicarea componentelor în afara sistemului de proiectare.
Umor/emoji în scenarii critice (plată/securitate).

20) Înainte/după exemple

Eroare de formular

Înainte de: „Eroare 400”

După: "Formatul de dată nevalidă. Utilizați DD. MM. AAAA"

Stare goală

Înainte: „E gol aici”

După: "Istoria operațiunilor după prima reaprovizionare va apărea aici. [Reîncărcare]"

Mesaj de succes

Către: „Făcut”

După: "Plata acceptată. Echilibru actualizat. [Vezi istoricul]"

Navigare

Înainte: Nu este clar unde este utilizatorul

După: tab-ul activ + firimituri de pâine + titlul explicit al paginii

21) Șabloane pentru revizuirea designului

Cadru ecran

Titlu → scurtă descriere → conținutului/listei → feedback/stări → acțiuni.

Cadru de mucegai

Antet prompt câmp (etichetă + ajutor + eroare) CTA acțiuni secundare note.

Șablon microcopie

Titlu (ex)

1-2 propoziții: context + pasul următor

CTA: acțiune + obiect

Link secundar: ajutor/reguli

22) Procesele și menținerea standardelor

Definiția Done (UX): layout + texte + stări + A11y + i18n + metrics.
Recenzie UX în PR: listă de verificare din secțiunile 18-21.
Documentație: fiecare caracteristică adaugă/actualizează un ghid la wiki/Storybook.
Audit o dată pe trimestru: conținut, A11y, performanță, consecvență.

Foaie de trișat finală

O ţintă, o CTA principală.
Statele și feedback-ul sunt proiectate în avans.
A11y și localizare - de la zero, nu „mai târziu”.
Mai puține culori - mai multă semantică și ritm.
Măsură: conversie, erori, timp, inversări.
Toate prin sistemul de proiectare: aceleași reguli → aceleași așteptări → previzibile UX.

Pot suplimenta acest ghid cu șabloane gata făcute pentru scenariile cheie (înregistrare/CUS, depunere/retragere, bonusuri/turnee) și colecta liste de verificare pentru procesul de revizuire.