Gerarchia dei contenuti in UI

1) Perché è necessaria una gerarchia

• Risponde a tre domande in 3-5 secondi: cos'è questo? Cos'è importante?
• Rende l'interfaccia prevedibile e facilmente scansionabile
• riduce gli errori e aumenta la conversione.

Principi: segnali> rumore, sequenza> varietà, contesto> regole assolute.

2) Livelli di importanza e struttura

1. Contesto di navigazione (marchio, partizione, briciole/briciole di pane).

2. H1 è l'obiettivo dello schermo (il più breve possibile, verbo se necessario).

3. Lead/sottotitolo (una riga di beneficio o di stato).

4. Primary action (1-2 CTA chiave).

5. Primary data (KPI principali, schede di prima linea).

6. Secondary data (parti, filtri, tabelle secondarie).

7. Meta/Help (suggerimenti, note, testo legale).

Regola: su uno schermo c'è un H1, non più di due CTA primari.

3) Tipografia e ritmo

Scala dei caratteri: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt equivalente in web).
Intervalli tra righe: 1. 3–1. 5 per body, 1. 2–1. 3 per i titoli.
Tasso di rientro: unità di base multipla (4/8 px). Zagolovok↔blok: 16-24; paragrafi 8-12.
Contrasto: minimo WCAG AA; il titolo è sempre più contrastato delle firme/meta.
Colore vs peso: colore - accento, non «stampella» invece di dimensioni/grasso.

4) Griglia e layout

Griglia 12 colonne (desktop )/4-6 (mobile) con gattatori fissi.
Visually first = first in DOM - Aiuta gli screener e i SEO.
Asse di lettura: da sinistra a destra (LTR) o da destra a sinistra (RTL) - Specchiate l'ordine dei segnali.
Punti di attenzione: alto sinistro/centro - titolo e lead; La «barra d'azione» è vicino/sottostante.

5) Segnali di priorità visivi

Dimensione e peso (tipografia) è un segnale primario.
Posizione (sopra/sinistra = più importante con LTR).
Colore (accento CTA, stato a tavolozza fissa).
Iconografia (solo per supportare il testo).
Indentazioni/bordi (la carta con aria più grande è percepita più importante).
Altoparlante (animazione da 200 ms per attirare l'attenzione senza fastidio).

6) Divulgazione progressiva

• Above the fold è solo il contesto, l'obiettivo e l'azione primaria.
• Sezioni-accordeoni/tab - dati secondari.
• Dettaglio click (drill-down) - La scheda → il pannello →.
• Suggerimenti inline invece degli help sovraccarichi.
• Gli scheletri/playsholder mantengono la struttura durante il caricamento.

7) Gerarchia in schermi tipici

7. 1 Dashboard

Filtro temporale H1 + in alto.
La barra KPI (3-5 carte) è la prima linea.
Grafici/tabelle - seconda linea, ordinamento/filtri accanto.
Anomalie/alert - colonna/nastro separata, non miscelare con KPI.

7. 2 Catalogo/lobby

H1 + filtri/chip veloci.
Ordinamento più vicino al titolo, CTA «Gioca/Compra» nella scheda.
Etichette (nuovo/top/jackpot) - visivamente secondario rispetto al titolo.

7. 3 Tessera di entità (gioco/merce)

Area eroe: nome (H1), dati chiave (RTP/volatilità/rating), primary CTA.
Parti: schede Descrizione/Caratteristiche/Recensioni.
Metadati, etichette e testo legale, sotto.

7. 4 Moduli/Procedure guidate

Titolo del passo + lead breve («2 minuti, la carta non viene cancellata»).
Ordine dei campi per frequenza/obbligatorietà.
CTA a destra/in basso, le azioni di supporto sono riferimenti in basso/a sinistra.
Gli errori sono vicino al campo, brevemente e sul caso.

8) Priorità degli stati

• Norma Download Successo/Vuoto.
• In avvio - Salvare l'ossatura (scheletri), CTA non salta.
• Nell'errore - H1 cambia per «cosa è successo», CTA per «ripetere/contattare».

9) Token di contenuti e design

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Ruoli di testo: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Ruoli di colore: 'accent/neutral/success/warn/tanger' + «livelli» (100-900).
• Componenti: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Misura e qualità

• Scan Time (mediana fino al primo click/azione sensibile).
• Focus Order Errors (quante volte l'utente «fallisce» con lo sguardo).
• CTA Visibility% (quanto visto da CTA vs cliccato).
• INP/CLS (la gerarchia non deve «saltare» durante il caricamento).
• A/B: più grande dell'H1 vs più forte del contrasto; filtri chip in alto vs nel pannello laterale.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Pratiche per il iGaming (esempio)

Lobby casinò H1 Lobby, chip New/Live/Jackpot/Preferiti, poi piastrelle. Ogni carta contiene il nome, l'icona del provider, il CTA «Gioca»; etichette nuovo/jackpot secondarie.
Dashboard operatore: la prima riga è NGR/GGR/DAU/CR, la seconda è trend e anomalie, la terza è tabella.
Passo di pagamento: H1 «Reimpostazione», lead «Nessuna commissione, istantanea», elenco dei metodi di conversione, minimo metatexto in alto.

12) Antipattern

Dieci accenti identici sullo schermo («urlo visivo»).
Intestazioni come immagini/icone senza testo (rompe la disponibilità e la ricerca).
Riepilogo in caratteri piccoli e notifiche con bandi giganti.
Collegamenti secondari accanto a primary CTA dello stesso peso visivo.
Ordine incoerente: oggi «filtri in alto», domani «a sinistra».

13) Assegno-foglio di implementazione

1. Definire l'obiettivo dello schermo (H1 + 1-2 attività primarie).
2. Contrassegna i livelli: primary/secondary/meta; fissa i token DS.
3. Raccogliete la scala di stampa e il ritmo di base dei ritiri.
4. Esegui il debug degli stati (caricamento/vuoto/errore) senza saltare CENTO/intestazioni.
5. Fate uno scan-test di 5 minuti con 3-5 persone che hanno notato dove sono stati cliccati.
6. Collegare la telemetria (esposure CTA, scan time, focus order).
7. Fissare il pattern nelle haydline con gli esempi «prima/dopo».

14) Totale

La gerarchia dei contenuti non è un tipo di carattere principale, ma un sistema di soluzioni: tipografia, griglia, colore, ritmi di rientro, ordine DOME e comportamento in diversi stati. Quando ogni livello ha il suo ruolo e il suo peso, l'interfaccia diventa comprensibile, veloce e prevedibile e gli utenti sono sicuri delle proprie azioni.