A gennaio 2023, gli utenti di Internet erano 5,16 miliardi, cioè il 64,4% della popolazione mondiale (dati Statista). Oggi più che mai, offrire una buona esperienza utente deve essere una priorità nella realizzazione di siti e applicazioni. Uno dei fattori centrali per quanto riguarda UI&UX design è la velocità di caricamento delle pagine. Abituati a siti ad alte prestazioni, gli utenti perdono in fretta la pazienza di fronte a una pagina che si carica lentamente e a volte la abbandonano frustrati. Impegnarsi per ottimizzare le prestazioni, quindi, è indispensabile, ma non sempre è possibile ridurre ulteriormente il tempo di caricamento. Ci viene qui in aiuto l’UX/UI designer con uno strumento che dà l’illusione di una maggiore velocità: la schermata scheletro.
Cos’è una schermata scheletro nell’ UI/UX design
Sarà probabilmente capitato a tutti di vedere una schermata scheletro su siti come Facebook, YouTube, Google Drive o LinkedIn. Questo strumento di UX/UI è una rappresentazione visiva degli elementi che compariranno sulla pagina che appare durante il caricamento dei contenuti. È composta da forme e linee in colori tenui, spesso in toni di grigio, che mostrano la struttura della pagina e dei suoi elementi in attesa che i dati siano caricati. Permette così agli utenti di farsi un’idea sui contenuti che a breve saranno in grado di visualizzare, oltre a confermare che la pagina sta effettivamente funzionando come deve.
Perché utilizzare la schermata scheletro
Il termine “schermata scheletro” è stato introdotto nel 2013 dal designer Luke Wroblewski, che lo propose come uno strumento per ridurre negli utenti la percezione del tempo di attesa. Il suo scopo principale nell’ottica di UX UI design è proprio questo: pur non avendo alcun effetto sulla durata reale del caricamento, dà l’impressione che questo avvenga più rapidamente.
Rispetto a una pagina bianca, la schermata scheletro comunica chiaramente che il sito funziona senza problemi e che i contenuti stanno per essere caricati. Studi effettuati nell’ambito di UX UI indicano, inoltre, che questa opzione dà risultati migliori rispetto alla rotella animata o alla barra di caricamento. Mostrando un segnaposto del layout della pagina e della posizione in cui si troveranno i diversi elementi, infatti, si crea più efficacemente l’impressione del progresso in corso.
Diverse tipologie di schermata scheletro nell’ UI/UX design
Le tipologie principali tra cui l’UX UI designer può scegliere quando realizza il progetto di una schermata scheletro sono tre. La più comune è quella che mostra semplicemente un abbozzo dei contenuti in fase di caricamento, in modo simile a un wireframe. La schermata replica la struttura della pagina, solitamente in una scala di grigi, mantenendo un aspetto sobrio e pulito. Questo approccio si trova, ad esempio, su piattaforme come LinkedIn, Slack e YouTube, ma anche su numerose app mobili. A volte è utilizzata in combinazione con alcuni elementi di testo, per indicare che il caricamento è in corso e che i contenuti visivi appariranno presto.
La seconda opzione, ideale per l’UI UX design di portali incentrati sulle immagini come Unsplash o Pinterest, è la schermata scheletro a colori. Anche qui si riproduce la struttura della pagina, ma i segnaposti, in questo caso, mostrano il colore principale dell’immagine in caricamento. Si ottiene, così, un effetto esteticamente più gradevole, che migliora l’UI UX del sito e soddisfa le aspettative del pubblico di riferimento.
La terza alternativa è la schermata scheletro animata, che unisce un elemento dinamico in grado di ridurre ulteriormente il tempo di attesa percepito. In particolare, si ottengono buoni risultati con un bagliore che va da sinistra a destra, replicando il movimento che lo sguardo farà durante la lettura dei contenuti.
Consigli per l’utilizzo della schermata scheletro nell’ UX/UI design
Usare la schermata scheletro in modo strategico permette di migliorare l’UX/UI design di un sito o applicazione, mantenendo alto il coinvolgimento degli utenti. È una soluzione che ben si adatta a pagine web che richiedono il caricamento di una grande quantità di dati, per esempio nel caso di diversi script eseguiti in background nello stesso momento. La schermata scheletro è ottima, inoltre, per pagine con molte immagini da caricare. Se il tempo di attesa dovesse diventare troppo lungo, si può optare in alternativa per il lazy load o caricamento differito, che consiste nel mostrare soltanto i contenuti visibili prima di scorrere la pagina, mentre il resto si carica progressivamente. È importante notare per l’UX designer cosa fa la differenza per una buona schermata scheletro: la struttura deve combaciare il più possibile con quella dei contenuti reali, così che in corrispondenza dei segnaposto appaiano, a caricamento completo, gli elementi della pagina.
Quando è meglio non usare la schermata scheletro
Pur essendo, come abbiamo visto, un’eccellente soluzione di UX/UI design, la schermata scheletro non è indicata nella totalità dei casi. Concludiamo, quindi, menzionando alcune situazioni in cui è meglio ricorrere a opzioni differenti.
Nelle pagine che si caricano velocemente non c’è alcun bisogno di una schermata scheletro che sarebbe visibile soltanto per una frazione di secondo. Per quanto riguarda i contenuti video, la rotella animata è l’opzione standard utilizzata in ogni contesto ed è quindi consigliato mantenere un approccio coerente con quello già diffuso. Durante i processi che richiedono più tempo, come aggiornamenti, conversione di file, upload o download, è preferibile utilizzare una barra di caricamento che indichi la percentuale di completamento dell’operazione.
Concludiamo ricordando che la schermata scheletro è un utilissimo strumento di UI UX design, ma non deve mai diventare una scusa per trascurare l’ottimizzazione del sito. È, invece, un elemento complementare nella realizzazione di siti e applicazioni che offrono un’esperienza utente eccellente.
In questo articolo hai avuto un assaggio ad una delle nozioni di UX/UI design, ma se vuoi approfondire questo universo, non perderti la nostra guida di web design per programmatori, dove scoprirai come disegnare un sito web applicando le regole di UX/UI design!
