Durante la creazione di un prodotto, il nostro compito come designer è quello di garantire ottime prestazioni, ma nonostante ce la mettiamo tutta, ci sarà sempre un momento in cui l’utente si troverà ad aspettare.
Fornire un’esperienza positiva e che non crei frustrazione durante questa attesa è molto importante.
Ci sono vari espedienti visivi per comunicare che un processo è in corso, come spinner, barre di avanzamento, messaggi di caricamento, ecc. Tra questi troviamo anche il protagonista di oggi: lo skeleton loader.
Uno skeleton loader (o skeleton screen) è un elemento dell’interfaccia utente utile a migliorare l’esperienza dell’utente durante il caricamento di contenuti dinamici in un’applicazione o un sito web.
Lo scopo principale di uno skeleton loader è quello di fornire indizi su come apparirà la pagina alla fine (come una sorta di wireframe), mentre l’applicazione o il sito web sta recuperando effettivamente i dati dal server.
In questo modo, l’utente non dovrà vedere una schermata vuota o uno spazio bianco durante il caricamento, il che può essere frustrante e far sembrare l’applicazione meno reattiva.
Caratteristiche principali
Lo skeleton loader, oltre ad essere uno tra gli eterni dimenticati da noi designer, è un ottimo esempio di Visibilità dello stato del sistema, 1^ Euristica di Nielsen.
Grazie a questo elemento, infatti, l’utente viene tenuto aggiornato attraverso un feedback appropriato entro un lasso di tempo ragionevole.
Le caratteristiche principali per uno skeleton loader efficace includono:
- Scheletro visuale: lo skeleton loader mostra una versione semplificata del contenuto che verrà caricato, spesso sotto forma di linee o forme che seguono l’aspetto generale degli elementi reali (ad esempio, blocchi di testo, immagini o liste);
- Animazione: gli elementi nello skeleton loader spesso vengono animati in modo da dare l’illusione che qualcosa stia accadendo nell’applicazione. Questo aiuta a mantenere l’attenzione dell’utente e a indicare che l’applicazione è attiva. Poiché questa schermata assomiglia a un wireframe, crea l’illusione che la pagina stia gradualmente passando al suo formato finale.
- Progressione graduale: i dati vengono caricati gradualmente, di solito in piccole parti. Man mano che i dati reali vengono recuperati, gli elementi dello skeleton loader vengono sostituiti dai dati reali. Questo crea un’esperienza più fluida per l’utente;
- Consistenza con il design: lo scheletro del loader dovrebbe essere progettato in modo da rispecchiare lo stile e il layout generali dell’applicazione o del sito web, in modo da non sembrare fuori contesto;
- Performance: uno dei principali vantaggi di uno skeleton loader è la percezione di velocità. Sebbene il caricamento effettivo dei dati possa richiedere tempo, l’utente percepisce che l’applicazione sta rispondendo rapidamente poiché vede già una rappresentazione approssimativa dei dati.
In generale, l’uso degli skeleton loader è una pratica comune nel design delle interfacce utente per migliorare l’esperienza dell’utente durante i caricamenti e per ridurre la frustrazione legata all’attesa.
Spinner o skeleton loader?
Molti di voi, probabilmente, si staranno chiedendo: cosa scegliere tra spinner e skeleton loader?
Lo spinner crea un periodo di attesta incerto, in quanto il tempo di caricamento non è noto.
Lo skeleton loader, al contrario, viene percepito dall’utente di durata più breve rispetto a uno schermo vuoto e uno spinner.
Come detto precedentemente, questo tipo di schermata, porta l’attenzione dell’utente al progresso di caricamento, piuttosto che al mero tempo di attesa, creando l’illusione dei una “creazione” della pagina in divenire.
Inoltre, lo skeleton loader ha il potere di ridurre il carico cognitivo degli utenti.
Invece di passare da uno stato di nulla (schermata vuota) ad un’immediato stato di pagina completa di contenuti, mette gli utenti nelle condizioni di capire in anticipo come apparirà la pagina e dà loro il tempo di sviluppare modelli mentali legati alla struttura prima di essere bombardati da troppe informazioni in un colpo solo.
Per facilitarci il lavoro, ovviamente, Figma ci copre le spalle con un plugin gratis molto comodo.
Il plugin in questione si chiama Ghost.
Basta selezionare la schermata, azionare il plugin, ed il gioco è fatto!
