CONTATTACI

Blog

gruppo di designer con strumenti come matita, pc e razzo in mano

Ux Ui: cos’è una schermata scheletro e come usarla per migliorare l’UX

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.