Web Design e User Experience: l’interfaccia Skeleton Screen inganna l’attesa

Scritto dalla redazione MeterWeb il 18 Dic 2016

Anche con un'interfaccia utente ben progettata arriva quel momento in cui l’applicazione dovrà caricare qualcosa per cui può essere richiesto all’utente di attendere. Uno studio del 2014 fatto dal MIT ha dimostrato che gli esseri umani possono percepire discretamente un’immagine in appena 13 millisecondi, ma per decidere cosa mettere a fuoco vengono impiegati tra i 100 e i 140 millisecondi.

In pratica, si hanno circa 200 millisecondi per presentare un cambiamento di stato dell’ interfaccia utente in modo che tale cambiamento appaia immediato. Tra 200 millisecondi e 1 secondo di attesa, le persone si sentono comunque coinvolte all'interno del flusso delle loro azioni. Dopo un secondo, senza alcun altro tipo di reazione, l'attenzione comincia a spostarsi. Oltre i 10 secondi, l’attenzione dell'utente rischia di essere persa del tutto.

Per mantenere il contatto con gli utenti e non perdere il loro interesse, è necessario indicare che qualcosa sta accadendo in modo da “ingannare l’attesa”. Questo ci lascia con tre opzioni di base per agire sulla user experience attraverso il web design:

  • usare la barra di avanzamento, se si è in grado di misurare la durata;
  • inserire uno “spinner” (indicatore grafico che visualizza un movimento) se non è possibile conoscere la durata esatta dell’attesa;
  • non indicare nulla.

Studi psicologici sugli indicatori di progresso mostrano che l’interpretazione di questi indicatori è tutt'altro che lineare. La percezione da parte degli esseri umani di un ritardo non corrisponde alla reale attesa. La comprensione di questo concetto ci porta nel regno di interfacce manipolate al fine di migliorare proprio questa percezione. Nella progettazione del software, gli “skeleton screen” (schermate ridotte all’osso, nda) forniscono un'alternativa ai metodi tradizionali.

Invece di mostrare un widget astratto, le schermate skeleton creano una previsione di ciò che verrà visualizzato in modo da ridurre il carico cognitivo.

Skeleton screen allo stato puro

Apple ha incorporato la tecnica dello skeleton screen direttamente tra le sue linee guida di sviluppo delle interfacce utente (Human Interface Guidelines iOS) con il nome di "launch images” (immagini di lancio). Queste linee guida di Apple raccomandano che la “schermata di lancio” mostri una descrizione della schermata dell'applicazione escluso il testo iniziale e tutti gli elementi che possono cambiare.

Clock di Apple

La sveglia di Apple è un classico esempio di skeleton screen. La sua schermata di avvio imposta durante l'attesa una visualizzazione simile a come l'applicazione sarà e crea un'impressione di caricamento della app più veloce di quello che effettivamente è: la schermata di lancio mostra la struttura di base delle app e le quattro icone alla base dello schermo, una volta lanciata, tutti gli elementi di testo e le variabili dell'interfaccia utente sono compilati.

Facebook

Facebook ad esempio ottiene molto bene l’obiettivo di attenuare l’attesa dell’utente e, nell’applicazione per iOS di Facebook, la schermata di lancio iniziale segue le linee guida di Apple. Oltre a raggiungere l'obiettivo applicando le linee guida di Apple, Facebook popola la maggior parte dello schermo con le immagini di intestazione, a piè di pagina e attraverso dei segnaposto nel corpo del testo. Poiché il tempo necessario per caricare il contenuto finale è sconosciuto, c'è anche un'animazione sottile sullo schermo usata come “spinner”.

Per concludere

Gli Skeleton Screen possono migliorare la sensazione percepita durante i tempi d’attesa per operazioni che durano più di un paio di centinaia di millisecondi. La loro applicazione ai colli di bottiglia tipici dei rendering rende la percezione dell’interfaccia utente più veloce e offre una migliore esperienza d’utilizzo dell’applicazione web.

Per un confronto con noi di Meterweb (web agency e digital company a Milano) per la progettazione e lo sviluppo di applicazioni ed interfacce utente contattaci (clicca qui).

Per la stesura di questo articolo la redazione di Meterweb (web agency e digital company a Milano) ha preso spunto dall’articolo di Chris Lienert pubblicato il 23 giugno 2016 sul sito web www.sitepoint.com



CONDIVIDI
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn
Letto 215 volte Ultima modifica il Giovedì, 02 Febbraio 2017 14:28
Vota questo articolo
(1 Vota)
JoomShaper

Meterweb.it usa i cookies per poter configurare in modo ottimale e migliorare costantemente le sue pagine web. Continuando ad utilizzare il sito Internet fornite il vostro consenso all'utilizzo dei cookies. Maggiori informazioni