4 trucchi per rendere i tempi di caricamento più veloci
Non importa quanto sia ben progettata la tua interfaccia utente, ad un certo punto o in un altro, le persone che la utilizzano dovranno aspettare qualcosa da caricare.
Il tempo di caricamento potrebbe danneggiare l'esperienza complessiva. Fare in modo che gli utenti aspettino troppo a lungo per caricare la tua app può rendere impazienti gli utenti. Se gli utenti hanno questa sensazione, abbandoneranno il tuo sito e andranno da qualche altra parte. Per fortuna, ci sono alcune cose che puoi fare per accelerare la percezione del tempo da parte degli utenti e farli sentire come se il tuo contenuto venisse caricato più velocemente di quanto non faccia.
1. Non fare mai aspettare gli utenti senza dare loro un feedback
Se la connessione dell'utente è lenta, potrebbe essere necessario un po 'di tempo prima che un sito possa popolare il contenuto sullo schermo. Il tempo di attesa di un utente inizia nel momento in cui inizia un'azione, e il caso peggiore è quando non hanno alcun indicatore che il sito lo abbia ricevuto.
Quando il tuo sito non riesce a notificare agli utenti che ha bisogno di tempo per completare un'azione, gli utenti spesso pensano di non aver ricevuto la richiesta e ci riprovano. Sono stati generati molti altri tocchi a causa della mancanza di feedback. Per rendere felici le persone, dobbiamo dare l'indicazione che qualcosa sta accadendo, offrire un feedback visivo.
2. Evitare gli indicatori di progresso statici
Gli indicatori statici di progres sono quelli che hanno un'immagine o un testo immobile, come "Caricamento in corso ..." o "Attendere prego ..." per indicare che la richiesta è stata ricevuta. Mentre qualsiasi feedback è migliore di nessuno, gli indicatori statici sono male UX. Gli utenti non hanno alcun indicatore del caricamento del contenuto, quindi non sono sicuri che il processo sia effettivamente bloccato.
3. Usa gli indicatori di caricamento animati
Studi psicologici sui tempi di attesa mostrano che l'attenzione dell'utente inizia a spostarsi dopo un secondo di attesa senza alcun feedback. Al fine di ridurre l'incertezza di un utente, utilizzare un indicatore di avanzamento per qualsiasi azione che richiede più tempo di quello. (Nota: l'uso dell'animazione non è raccomandato per tutto ciò che richiede meno di un secondo per essere caricato, perché gli utenti potrebbero sentirsi in ansia per ciò che è appena apparso sul display e fuori dallo schermo).
Filatoi a caricamento infinito per operazioni ragionevolmente veloci
La forma più semplice di indicatori animati è uno spinner di caricamento. Questo tipo di feedback visivo afferma solo il fatto che l'utente deve attendere, ma non dice per quanto tempo devono aspettare. Come regola generale, è necessario utilizzare questo tipo di indicatore di avanzamento per azioni rapide (2-10 secondi).
Uno spinner di linee grigie che si irradiano da un punto centrale è un approccio standard.
I filatori di caricamento vengono spesso usati insieme al gesto di pull-to-refresh. Agisce come intermediario tra due stati dell'interfaccia utente e aiuta gli utenti a capire cosa sta succedendo quando lo schermo cambia.
App Apple Mail per iOS
Animazione in percentuale per operazioni di lunga durata
Il caricamento dei filatori non è il modo giusto per indicare un carico di lunga durata. È molto più sopportabile aspettare qualcosa se sappiamo quando accadrà. Ecco perché per operazioni di lunga durata dovresti dare ai tuoi utenti una chiara indicazione di quanto tempo devono aspettare. Come regola generale, dovresti usare un'animazione fatta per cento per processi più lunghi che impiegano 10 o più secondi.
Credito immagine: Behance
In alternativa è possibile fornire una stima generale del tempo per l'operazione. Non cercare di essere precisi, un semplice, "Questo potrebbe richiedere un minuto" può essere sufficiente per informare l'utente e incoraggiarli ad attendere.
Installazione dell'aggiornamento software in Mac OS X
4. Modificando la percezione del tempo da parte dell'utente
La velocità di caricamento del contenuto è nella mente dell'utente. Quando si tenta di creare un'esperienza utente più veloce, è possibile abbreviare il tempo percepito piuttosto che il tempo effettivo. Per fare ciò, puoi riempire i tempi di attesa usando contenuti, animazioni o azioni che l'utente può eseguire.
Barre di avanzamento
Una barra di avanzamento consente agli utenti di sviluppare un'aspettativa relativa alla velocità di elaborazione dell'azione. Il modo in cui la barra di avanzamento si sposta influisce sul modo in cui percepiscono il tempo di caricamento. Per far sì che una barra di avanzamento si senta più veloce per gli utenti, puoi utilizzare le seguenti semplici tecniche:
- La barra di avanzamento non dovrebbe mai fermarsi, altrimenti gli utenti penseranno che il sito si sia bloccato. Il caso peggiore possibile è quando la barra di avanzamento si avvicina al 99% e si interrompe improvvisamente. La maggior parte degli utenti sarà frustrata da questo comportamento.
- Puoi nascondere piccoli ritardi nella barra di avanzamento spostandolo in modo istantaneo e costante.
- Sposta la barra di avanzamento lentamente all'inizio e accelera verso la fine per dare agli utenti un rapido senso del tempo di completamento.
Credito immagine: Dribbble
Schermi scheletrici
Il tempo di attesa è il momento giusto per le schermate skeleton (ovvero i contenitori di informazioni temporanee). Una schermata scheletro è essenzialmente una versione vuota di una pagina in cui le informazioni vengono gradualmente caricate. Fornisce un'alternativa ai tradizionali indicatori animati. Anziché mostrare un widget astratto, le schermate skeleton creano anticipazioni su ciò che verrà e mettono l'utente al centro dell'attenzione invece dei tempi di attesa.
Le immagini di scheletri si caricano rapidamente poiché si tratta di una piccola immagine che spesso è composta da forme semplici. Queste tecniche possono essere adottate ulteriormente nelle app per dispositivi mobili perché il modello di scheletro può essere archiviato localmente insieme ai dati dell'app. L'app di Facebook per iOS mostra agli utenti blocchi e linee grigie per rappresentare immagini e testo man mano che l'app viene caricata. Al termine del caricamento, le immagini e il testo vengono visualizzati al posto dei contenitori temporanei. Non è più veloce di avere una schermata di caricamento con uno spinner, ma nella mente dell'utente, sembra che sia.
Operazioni in background
Un altro trucco di velocità che puoi usare sono le operazioni in background. Le azioni che sono raggruppate in operazioni in background hanno due vantaggi: sono invisibili all'utente e accadono prima che l'utente le richieda effettivamente. Offri agli utenti altre cose su cui concentrarsi mentre un processo procede in background. Un buon esempio di questo è il caricamento di immagini su Instagram. Non appena l'utente sceglie un'immagine da condividere, inizia a caricarsi. L'app invita gli utenti ad aggiungere titoli e tag mentre l'immagine viene caricata in background. Nel momento in cui gli utenti saranno pronti a premere un pulsante "Condividi", il caricamento sarà completato e sarà possibile condividere la propria immagine all'istante .
Caricamento dell'immagine progressivo
Poiché le app e i siti moderni caricano sempre più immagini, è opportuno pensare al loro processo di caricamento, poiché influisce sulle prestazioni e sull'esperienza utente. Utilizzando un effetto sfocatura è possibile creare un effetto di caricamento dell'immagine progressivo.
Un buon esempio è Medio, che offusca la copertina dell'immagine post e le immagini all'interno del contenuto del post fino a quando l'immagine non è completamente caricata. Innanzitutto, carica una piccola immagine sfocata (miniatura) e quindi effettua una transizione all'immagine grande. Le miniature sono molto piccole (solo pochi kilobyte) che combinate con l'effetto sfocato consentono un segnaposto migliore di un colore solido, senza sacrificare il carico utile.
Medio utilizza la sfocatura per creare un effetto di caricamento dell'immagine progressivo
Distrazione visiva
Dovresti sempre cercare di rendere più piacevole l'attesa se non riesci ad accorciare la linea. Per garantire che le persone non si annoino nell'attesa che qualcosa accada, offri loro una certa distrazione. Belle animazioni possono distrarre i tuoi visitatori e farli ignorare i tempi di caricamento lunghi.
Schermata iniziale animata. Credito immagine: Ramotion (Dribbble)
Credito immagine: Vimeo