Ierarhia conținutului în UI

1) De ce este necesară ierarhia

• răspunde la trei întrebări în 3-5 secunde: ce este? → ce este important? → ce este de făcut?;
• Face interfața previzibilă și ușor de scanat
• reduce erorile și crește conversia.

Principii: semnale> zgomot, secvență> diversitate, context> reguli absolute.

2) Niveluri de importanță și structură

1. Context de navigație (marcă, secțiune, firimituri/firimituri de pâine).

2. H1 - țintă ecran (cât mai scurt posibil, verb, dacă este necesar).

3. Plumb/subtitrare (o linie de beneficii sau de stare).

4. Acțiuni primare (1-2 CTA-uri-cheie).

5. Date primare (KPI-uri principale, carduri de primă linie).

6. Date secundare (piese, filtre, tabele auxiliare).

7. Meta/Ajutor (sugestii, note, text legal).

Regulă: pe un ecran - un H1, nu mai mult de două CTA primare.

3) Tipografie și ritm

Scala fontului: H1 28-32, H2 22-24, H3 18-20, corp 14-16, micro 12 (echivalent px/pt în web).
Distanța dintre linii: 1. 3–1. 5 pentru corp, 1. 2–1. 3 pentru titluri.
Ritm de indentare: multiplu al unității de bază (4/8 px). Zagolovok↔blok: 16-24; punctele: 8-12.
Contrast: minim WCAG AA; titlul este întotdeauna mai contrastant decât subtitrările/meta.
Culoare vs greutate: culoare - accent, nu „cârjă” în loc de dimensiune/grăsime.

4) Grilă și aspect

Grilă 12 coloane (desktop )/4-6 (mobil) cu gattere fixe.
Vizual primul = primul în DOM: ajută cititoare de ecran și SEO-uri.
Axa de citire: de la stânga la dreapta (LTR) sau de la dreapta la stânga (RTL) - oglindă ordinea semnalelor.
„Zone de atenţie”: stânga sus/centru - titlu şi plumb; „action bar” - aproape/dedesubt.

5) Semnale prioritare vizuale

Dimensiunea și greutatea (tipografie) este semnalul principal.
Poziția (deasupra/spre stânga = mai importantă în LTR).
Culoare (accent pentru CTA, statusuri - conform unei palete fixe).
Iconografie (numai ca suport text).
Liniuțe/cadre (o carte cu mult „aer” este mai importantă).
Dinamică (animație ≤ 200 ms pentru a atrage atenția fără iritare).

6) Dezvăluire progresivă

• Deasupra ori - numai context, scop și acțiune primară.
• Secțiunile acordeon/tab sunt date secundare.
• Drill-down: card → panou → modal.
• Inline indicii în loc de supraîncărcat „ajută”.
• Scheletele/înlocuitorii păstrează structura pe durata sarcinii.

7) Ierarhie în ecrane tipice

7. 1 Tablou de bord

H1 + filtru de timp în partea de sus.
KPI bar (3-5 cărți) - prima linie.
Grafice/tabele - a doua linie, sortare/filtre una lângă alta.
Anomalii/alerte - coloană/bandă separată, nu se amestecă cu KPI.

7. 2 Catalog/Lobby

H1 + filtre/jetoane rapide.
Sortarea mai aproape de titlu, CTA „Play/Buy” în carte.
Etichete (nou/top/jackpot) - secundar vizual numelui.

7. 3 Card Entitate (Joc/Articol)

Zona eroului: nume (H1), fapte cheie (RTP/volatilitate/rating), CTA primar.
Detalii: Descriere/Caracteristici/File de feedback.
Metadate: etichete și text legal - în partea de jos.

7. 4 Formulare/vrăjitori

Pasul antet + plumb scurt („2 minute, cardul nu este dezafectat”).
Ordinea câmpurilor după frecvență/obligatoriu.
CTA dreapta/jos, acțiuni de sprijin - link-uri de jos/stânga.
Erori - lângă teren, pe scurt și pe caz.

8) Prioritizarea statului

• Normă → încărcare → succes/eroare de → goală.
• În încărcare - păstrați cadrul (schelete), CTA nu sare.
• În eroare - modificările H1 la „ce sa întâmplat”, CTA - „repetare/contact”.

9) jetoane de conținut și sistem de proiectare

• 'font. rubrică. xl ',' font. corp. md', "spaţiu. 200 ',' rază. md', "altitudine. sm.
• Roluri text: 'text. titlul „,” text. plumb „,” text. secundar „,” text. meta ',' text. ajutor ".
• Roluri de culoare: „accent/neutru/succes/avertizare/pericol” + „niveluri” (100-900).
• Componente: "KPI. Card/Secțiune. Titlu/Inline. Ajutor/Meta. Linie ".

10) Măsurarea și calitatea

• Timpul de scanare (valoarea mediană a primului clic/acţiune semnificativă).
• Focus Order Errors (de câte ori utilizatorul „ratează” aspectul).
• CTA Vizibilitate% (cât de multe văzut CTA vs clic).
• INP/CLS (ierarhia nu trebuie să „sară” la încărcare).
• A/B: mai mare H1 vs contrast mai puternic; filtre cip pe partea de sus vs în panoul lateral.

• 'first _ focus _ target', 'primary _ cta _ exposed/clicked', 'section _ collapse _ toggle', 'help _ show'.

11) Practici pentru iGaming (exemplu)

Casino lobby: H1 „Lobby”, „New/Live/Jackpots/Favorit” chips-uri, apoi gresie. Fiecare carte conține un nume, pictograma furnizor, CTA „Play”; etichete noi/jackpot - secundare.
Tabloul de bord al operatorului: prima linie - NGR/GGR/DA/CR, a doua - tendințe și anomalii, a treia - tabele.
Etapa de plată: H1 „Reaprovizionare”, plumb „Nu comision, instantaneu”, lista de metode de conversie, metatext minim pe partea de sus.

12) Antipattern

Zece accente de aceeași putere pe ecran („țipăt vizual”).
Titluri ca imagini/pictograme fără text (pauze accesibilitate și căutare).
„Rezultate în imprimare mică”, și notificări în bannere gigant.
Legături auxiliare lângă CTA primar cu aceeași greutate vizuală.
Ordine inconsecventă: astăzi „filtre de sus”, mâine „din stânga”.

13) Lista de verificare a implementării

1. Definiți ținta ecranului (H1 + 1-2 acțiuni primare).
2. Marcați nivelurile: primar/secundar/meta; pin la DS jetoane.
3. Colecta scara de tipografie și ritmul de indentare de bază.
4. Stări de depanare (boot/blank/eroare) fără salturi STA/antet.
5. Efectuați un „test de scanare” de 5 minute cu 3-5 persoane: ceea ce ați observat, unde ați făcut clic.
6. Conectați telemetria (CTA de expunere, timpul de scanare, ordinea de focalizare).
7. Fixați modelul în ghidaje cu exemple înainte/după.

14) Linia de jos

Ierarhia conținutului nu este un „font mare pentru principal”, ci un sistem de soluții: tipografie, grilă, culoare, ritm de indentare, ordine în DOM și comportament în diferite stări. Când fiecare nivel are propriul rol și greutate, interfața devine clară, rapidă și previzibilă, iar utilizatorii sunt încrezători în acțiunile lor.