Scorrimento e gestione dei contenuti

1) Perché pianificare lo scorrimento

• accelera la ricerca dei contenuti desiderati (meno click - più scroll),
• dà una sensazione di controllo (ancoraggio, «tornare all'inizio», filtri attaccati),
• risparmio di risorse (scaricamento pigro, virtualizzazione),
• aumenta la conversione (il contenuto è già visibile, il contenuto CTA è nella «zona del pollice»).

Principi: velocità> densità; Contesto> rumore prevedibilità> «magia».

2) Modelli di scorrimento: quando scegliere cosa

1. Paginazione classica

Adatto per risultati di ricerca, tabelle, report. I vantaggi sono il controllo, gli URL stabili, la navigazione facile nelle pagine. Contro, più click, «rotture» dell'attenzione.

2. Nastro infinito (infinite scroll)

Per FID e directory a basso costo di errore (notizie, carte di contenuto). I vantaggi sono il coinvolgimento, meno click. I contrari sono il «millimetro perso», è difficile tornare indietro, è difficile da indirizzare.

3. Ibrido: Mostra ancora/Scarica ancora

Compromesso: i widget vengono usati con pacchetti sul pulsante. I vantaggi sono il controllo dei renderi, la disponibilità del futer, la prevedibilità. Contro, è ancora lineare.

4. Scorrimento segmentato (partizioni/ancoraggi)

Per articoli lunghi, aiuto e wiki. I vantaggi sono la mappa del documento, i salti veloci. Contro - complessità di navigazione e sommario.

• Cataloghi/lobby - ibrido o infinito + «tornare all'inizio».
• Ricerca/tabella - Paginazione con dimensioni di pagina e filtri veloci.
• Documentazione/Longrid - segmenti con TOC e Breakfast Bar.

3) Architettura e mappatura delle informazioni

Cappello superiore (sticky) - Ricerca, filtri rapidi, ordinamento; non sovrappongono i contenuti quando vengono visualizzati.
Pannello laterale (desktop) - Sommario (TOC), filtri; Su un mobile, uno sheet in partenza.
Gli elementi Sticky sono filtri superiori, menu di ancoraggio, indicatore di lettura avanzato, «Back to Top».
Schede di contenuto: l'altezza prevedibile è superiore a quella del layout.
Stati vuoti: scheletri/shimmer, non schermi vuoti.

4) Comportamento di scorrimento (micromeccanico)

Inerzia e fisica: lo scorrimento deve sembrare «nativo»; non rompere i pattern di sistema.
Punto asse - Bloccate l'asse verticale dopo la soglia di movimento durante gli orizzonti (giostra).
Snap point - Appropriato per caroselli, schede e passaggi della procedura guidata. Non abusate dei nastri lunghi.
Anchored scrolling - Mantieni attivo l'utente e la posizione relativa durante l'attivazione.
Scroll-chaining - Limitare il «flusso» degli eventi dai contenitori annidati per non «saltare» alla pagina.

5) Controllo dell'attenzione

100/Deposito/Gioco fluttuante: nella zona del pollice non sovrappone i contenuti.
Bar di lettura avanzata: linea superiore, sincronizzata con ancoraggi.
Sommario (TOC) - La sezione corrente è evidenziata, i collegamenti rapidi, il pulsante in alto.
L'ancoraggio delle intestazioni: hash stabili nell'URL; scroll con compensazione dell'altezza del cappello.
I filtri contestuali «appiccicosi» sono fissati dopo lo scorrimento di 1-2 schermate.

6) Caricamento e rendering di grandi nastri

Caricamento pigro (lazy) - Immagini, video, blocchi. La soglia di allungamento è il punteggio dello schermo più avanti.
Virtualizzazione/rendering finestre - Disegna solo l'area visibile + buffer.
Playsholder/skeleton: dimensioni prevedibili, senza «sbalzi».
Dosaggio lotti - passo 20-60 elementi; bilanciamento tra richieste e render.
La cache delle sezioni - Ripristina le posizioni e le caselle caricate quando si torna indietro.

7) Gestione dei contenuti nel nastro

Raggruppamento per data/categoria; le intestazioni separate vengono attaccate.
Ordinamenti e filtri: visibili e disponibili, con indicazione delle condizioni attive.
Comprimi/espandi: Mostra più per le descrizioni lunghe.
Media in scroll: video di pausa automatica fuori dall'area visibile; auto-play solo senza audio e con controllo esplicito.
Stati di errore: Perdita di rete, Caricamento non riuscito - con retry e posizione.

8) Disponibilità e localizzazione

Tutte le azioni sono disponibili senza gesti: Scarica ancora, Avvia, Apri TOC.
Gestione attiva - Durante la navigazione sulle ancorate, si sposta il focus sull'intestazione della sezione.
Lettori di schermo: descrizioni per i pulsanti di scorrimento/TOS, logica di ordine.
RTL: Mirate le giostre orizzontali e gli indicatori.
Riduced motion: disattiva le animazioni «complesse» e il parallax per gli effetti semplificati preferiti.

9) Performance: obiettivi e metriche

INP (Interaction to Next Paint) gesti chiave/scroll: ≤ 200 ms.
Scroll-jank: <1% fotogrammi> 16,7 ms su device tipici.
CLS (variazione cumulativa del layout) - ≤ 0,1 (specialmente durante il caricamento).
TBT/Blocking: evita i calcoli sincroni pesanti durante lo scroll.
Memoria: utilizzo stabile per sessioni lunghe (nessuna perdita durante la virtualizzazione).

• ascoltatori passivi dello scroll, calcoli ritardati tramite «requestAnimationFrame»;
• Ombre leggere/senza blur complessi durante lo scorrimento
• Dimensioni fisse o prevedibili delle schede
• risparmi di disegno (batched updates).

10) Telemetria ed eventi

• «scroll _ start »/« scroll _ end» (origine, velocità, direzione),
• 'content _ load _ sollest/success/fail' (pacchetto, dimensioni),
• «viewport _ item _ exposed» (id, tempo di visibilità),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list _ restore' (posizione, tempo di ripristino).

• Depth Reached (quanti schermi/elementi sono stati visualizzati),
• Exposure Time per Item (media/media),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (uscito prima del caricamento del lotto successivo),
• Return-to-Position Success.

11) Pattern per diversi tipi di contenuti

Cataloghi giochi/prodotti: nastro ibrido, filtri sticky, virtualizzazione, pulsante Mostra ancora.
Longridi/wiki: TOC, Progress Bar, Ancoraggi, «Copia il collegamento alla sezione».
Notiziario: un nastro infinito con le date separate, «tornare alle ultime».
Tabelle/grid: paginazione + «mostra per N», congelamento di intestazioni e colonne chiave, scroll orizzontale per necessità.
Nastri live/logg-striam: auto-scroll con «pausa/raggiungimento», limite di buffer.

12) Caratteristiche mobili

Le aree del pollice: CTA e Inizio sono in basso; filtri - nello sheet in uscita.
Pollice di estrusione - Mostra solo quando viene interrotto; Non interferire con lo scroll.
Gesti: giostre orizzontali con punto asse; pull-to-refresh - solo dove è previsto.
Fluidità: verifica di 60 FPS su elenchi pesanti; Ridurre la densità degli effetti.

13) Antipattern

«Nastro infinito + filetto nascosto senza uscita» (nessun collegamento/contatto/regola).
Il dosaggio che sposta la lettura è una perdita di contesto.
Pannelli flottanti che sovrappongono testo e CTA.
L'altezza illimitata delle schede è layout-maiusc.
Impermeabilizzazione automatica dei media audio quando compare nell'area visibile.
Nessun ritorno alla posizione.

14) Assegno foglio di implementazione (per spring)

Sprint 1: selezione del modello (paginazione/ibrido/infinito), contenitori scroll di base, cappello/filtri sticky, «Back to Top».
Sprint 2: caricamento pigro di immagini/blocchi, scheletri, dimensioni prevedibili delle schede.
Sprint 3 - Virtualizzazione degli elenchi, memorizzazione della posizione e cache dei pacchetti, ancoraggio/TOS.
Sprint 4 - telemetria scroll ed esposizioni, così come gli alert scroll-jank.
Sprint 5: disponibilità (focus/lettori), RTL, reduced motion, navigazione da tastiera (desktop).
Sprint 6: ottimizzazione sottile: ruota di asse, snap point, miglioramento del media UX nel nastro.

15) Glossario

Infinite Scroll è un rimboccamento infinito di elementi.
Windowing/Virtualization è il rendering solo degli elementi visibili dell'elenco.
Anchored Scrolling - Mantiene la posizione relativa durante il dosaggio.
Scroll-jank - «Derganza» a causa dell'omissione di fotogrammi durante lo scorrimento.
TOC (Table of Contents) - Sommario con ancoraggi.
CLS/INP - Metriche di stabilità del layout e sensibilità.

16) Totale

1. seleziona il modello di flusso appropriato (paginazione/ibrido/infinito),

2. dà il controllo (ancoraggio, TOC, filtri sticky, «all'inizio»),

3. renderite veloce e stabile (scaricamento pigro, virtualizzazione, senza spostamenti),

4. rimane disponibile e prevedibile,

5. Misura la telemetria e migliora l'UX in base ai dati.