Schermi scheletrici: quando usarli al posto degli spinner
Cosa sono gli schermi scheletrici, quando battono gli spinner, come progettarli in modo che corrispondano al contenuto reale e come animarli senza compromettere le prestazioni o l'accessibilità.
Punto chiave
Una schermata scheletro è un segnaposto simile a un wireframe che mostra il layout del contenuto durante il caricamento. Usalo per pagine intere ed elenchi con una forma prevedibile; usa uno spinner per piccole aree o contenuti sconosciuti e progressi reali per compiti lunghi. Fai in modo che lo scheletro corrisponda al layout reale in modo che nulla salti quando arriva il contenuto.
Cos'è uno schermo scheletro
Nielsen Norman Group definisce uno schermo scheletro come segnaposto per una pagina di caricamento che imita il layout con una grafica simile a un wireframe. Viene utilizzato per caricamenti di pagine intere e riduce il tempo di caricamento percepito, perché le persone vedono la struttura di ciò che sta arrivando invece di un'area vuota.
Quando usare quale
Abbina l'indicatore al contenuto e all'attesa:
- Scheletro: caricamenti di pagine o elenchi di cui è noto il layout, come feed, schede e profili.
- Spinner: piccole aree, pulsanti o contenuti di cui non è possibile prevedere la forma.
- Barra di avanzamento: attività lunghe che puoi misurare, come caricamenti ed esportazioni.
- Niente: risposte rapidissime, dove un indicatore lampeggerebbe solo.
Progettare un buon scheletro
Utilizza le dimensioni reali dei componenti in modo che la pagina non si sposti quando arriva il contenuto, proteggendo così anche il tuo punteggio di spostamento cumulativo del layout. Mantieni le forme semplici (blocchi per le immagini, barre per il testo), utilizza i grigi a basso contrasto e sostituisci ogni segnaposto con contenuto reale non appena è pronto invece di aspettare tutto.
Scheletri animati
NN/g nota che alcuni scheletri includono un'animazione pulsante o luccicante per segnalare che il sistema sta ancora funzionando. Mantienilo lento e discreto, anima l'opacità o una trasformazione anziché le proprietà del layout e interrompilo quando è attivo il movimento ridotto. Assegna alla regione di caricamento un'etichetta accessibile come "Caricamento risultati".
Principi chiave da ricordare
- Gli scheletri mostrano il layout dei contenuti in arrivo e riducono l'attesa percepita
- Usali per caricamenti prevedibili di pagine ed elenchi; filatori per aree piccole o sconosciute
- Abbina le dimensioni reali per evitare spostamenti del layout
- Mantieni la lucentezza discreta e fermala per ridurre il movimento
- Aree di caricamento delle etichette per gli screen reader
Domande frequenti
Fonti
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev