Elenchi e griglie: confronto UX

1) Quando l'elenco, quando la griglia (regola 5 domande)

1. Lo scopo dell'utente è confrontare rapidamente le impostazioni (elenco) o scegliere per visualizzazione/copertina (griglia)?

2. Modulo dati: campi strutturali (tabelle/testo) Elenco; gli oggetti visivi (copertine, foto) sono una griglia.

3. Densità visiva vs: è necessario un massimo di elementi sullo schermo (elenco) o una vetrina uniforme (griglia)?

4. L'azione predefinita è: apri/dettagli (elenco) o'Gioca/Compra "istantaneamente dalla carta (griglia)?

5. Contesto del dispositivo: ritratto cellulare - solitamente una griglia 2-in-fila per le schede; report/tabelle sul desctop - elenco/tabella.

Comparare brevemente - elenco; Scegliere con gli occhi è una griglia.

2) Modello di contenuti e IA

Elenco (row-first) - Il segnale principale è testo/campi. Adatto per: fogli, cronologie delle operazioni, report, risultati di ricerca per attributi.
Griglia (card-first) - Il segnale principale è copertina/anticipo. Adatto per giochi/prodotti, media, collezioni.
L'ibrido è «schede-riga adattive» (sul mobile c'è una scheda, sul descritto una riga con colonne) con la stessa origine dati.

3) Progettazione elementi: stringa vs carta

Stringa (list row)

Struttura: icona/miniatura (opzionale), intestazione, 1-3 campi chiave, meta (data/stato), azioni contestuali (⋮).
Punti di forza: leggibilità, densità elevata, un buon insieme di colonne ordinabili.
Suggerimenti UX - Fissa l'altezza; Allineare alla griglia; nascondi i campi secondari in «discovery».

Carta (grid card)

Struttura: copertina, titolo, firma/etichetta (nuovo/jackpot), un CTA principale + azione in «»....
I punti di forza sono la scelta visiva, l'azione rapida, il contesto emotivo.
Suggerimenti UX: salva aspect-ratio (ad esempio 4: 3/1: 1), le stesse altezze di intestazione, ritaglia il testo da tooltip.

4) Navigazione, ordinamento e filtri

Generale: filtri e ordinamenti sono vicini e stabili (senza salto). Condizioni attive - chip sopra i risultati.
Elenco: supportare molte colonne + congelare le intestazioni; ordinamento click per cappello.
Griglia - Ordina l'elenco a discesa filtri - chip/pannello. Per la ricerca «visiva», prevale su hover/long-press.

5) Mobile vs dectop

• Griglia: 2-in-fila (telefono), 3-in-fila (tablet). I grandi CTA sono nella zona del pollice.
• Elenco: righe compatte (56-72dp), campi meta ridotti.

• Griglia: 4-6-in-fila in caso di ≥1200px, auto-fill con «min» larghezza carta.
• Elenco: tabella/riga, raccolta colonne, ricerca rapida per tabella.

6) Stati e caricamento

Skeletons: righe-scheletri (minimo 3-5), scheletri scheletri con puntini di copertina e testo.
È vuoto spiegare perché è vuoto e suggerire preset/rimuovere filtri.
Errori: salvare la selezione utente e la posizione dare retry.
Dosaggio: Mostra ancora (ibrido) è preferibile a un nastro infinito nelle directory. Per i logi - È possibile eseguire lo scroll automatico con Pausa.

7) Prestazioni

Obiettivi: INP da 200 ms, CLS da 0,1, scroll-jank <1%.

Elenco: virtualizzazione delle righe, altezza fissa, calcoli ritardati.
Griglia: immagini lazy (AVIF/WebP), «srcset/sizes», dimensioni prevedibili, «lotti» di 20-60 schede.
Generale: 'content-visibility: auto', insiemi, priorità di caricamento per gli elementi hero.

8) Disponibilità

Elenco: tabelle con una semantica corretta ('table/thead/tbody', 'aria-sort'), attivo su righe/celle.
Griglia: "role =" grid "o lista c" role = "list" "; ordine in DOM = visivo firme per le immagini.
Tastiera frecce/Taib; Invio - Apri; Space - «Preferiti» (se necessario).
Dimensioni click: ≥ 44px; contrasto AA; Le etichette delle icone sono esplicite.

9) Metriche e telemetria

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.

• Time-to-First-Action (TTFA), qCTR dei risultati, Scroll Depth, Zero-Result Rate,
• Compare Rate (per gli elenchi), Quick-Action Rate (per le griglie), Latency p95.

10) esperimenti A/B (cosa testare)

Visualizzazione predefinita (elenco/griglia) per i nuovi/i tornanti.
Numero di elementi sullo schermo, altezza della riga, dimensione della carta.
Ordine dei filtri/ordinamenti; chip vs pannello laterale.
Azioni rapide sulla scheda (icone/testo, un vs due CTA).
Guardrails: INP/CLS, lamentele per «saltate», crescita Zero-Result.

11) Esempi per il iGaming

Lobby dei giochi (B2C): griglia - copertina + Gioca/Demo, etichetta Nuova/Jackpot, filtri con chip (provider/categoria/meccanica).
Catalogo fornitori: griglia di loghi con numero di giochi; click è la pagina del provider (all'interno c'è anche la griglia dei giochi).
Report/finanza (B2B): elenco/tabella - colonne NGR/GGR/FTD/CR, fissa intestazioni, esporta.
Cronologia delle transazioni: elenco - serie serrata, stato, ricerca per somma/ID/data; apertura di una riga per le parti.
Promozioni/tornei: griglia di bandi con date e CTA, ordinamento per «Ora/Presto».

12) Pulsanti flessibili e personalizzazione

Dì all'utente il pulsante Elenco griglie e ricorda la selezione (per user/tenant).
Offrite i preset dello spettacolo: «Denso», «Solitamente», «Krupo».
Logica contestuale: per la prima volta, griglia nella lobby; La ricerca è una lista per un confronto preciso.

13) Antipattern

Una griglia senza un rapporto fisso tra schede danzanti e CLS alto.
L'elenco con troppe colonne è uno scroll orizzontale senza bisogno.
Duplica i pulsanti di azione sia nella scheda che nell'hover con comportamenti diversi.
Miscelare ordinamenti/filtri ogni volta che viene eseguito un sovraccarico (disattivato).
Filtri attivi nascosti - Gli utenti perdono i risultati.

14) Assegno foglio di implementazione (passo passo)

1. Definire la destinazione della schermata: selezione o confronto degli attributi.
2. Specificare un modello: elenco/griglia/ibrido; concordare IA e origini dati.
3. Progettate una riga o una scheda con le dimensioni fisse delle zone chiave.
4. Ordini/filtri: chip visibili, controllo di ordinamento stabile.
5. Caricamento/vuoto/errore: scheletri, testo comprensibile e retry.
6. Performance: lazy/virtualization, «content-visibility», obiettivo p95.
7. A11y: semantica, tastiera, contrasto, tap-target.
8. Telemetria: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: visualizzazione predefinita, quote, azioni rapide.
10. Memoria di selezione: mantieni la modalità di visualizzazione e i filtri più recenti.

15) Totale

Elenchi e griglie sono strumenti con attività diverse.

Quando gli attributi e il confronto sono importanti, prendi la lista.
Quando decide il rendering e le azioni veloci, prendi la griglia.
Individuate l'obiettivo, fissate le dimensioni e il comportamento, mantenete l'interfaccia rapida e accessibile, e gli utenti ottengono risultati in meno passi, senza troppo rumore cognitivo.