Migliori pratiche per la distribuzione di indicatori di avanzamento animati a tuo vantaggio

Se hai mai utilizzato un PC, potresti anche essere a conoscenza del simbolo animato di Windows che appare all'avvio del sistema. C'è voluta un'evoluzione nel design e nell'animazione per svilupparsi in ciò che vediamo oggi, ma in Windows 1995 l'immagine non si muoveva affatto. Alcuni di voi potrebbero pensare, perché usare questi indicatori animati?

Ma considera questo, preferiresti aspettare e guardare uno schermo vuoto per vedere la tua azione completata? O rimanere intrattenuto con qualcosa di significativo fino a quando lo schermo non appare di nuovo?

Tra le caratteristiche più importanti del design dell'interfaccia utente c'è la capacità di mostrarne l'avanzamento come stato del sistema. L'utente deve sapere se il sistema è a conoscenza della sua azione e sta rispondendo di conseguenza. Gli indicatori di avanzamento animati sono in grado di mostrare il contesto attuale dell'operazione quasi in qualsiasi momento senza utilizzare testo o funzionalità video estese. Questo li rende ideali per fornire lo stato del sistema mentre l'avanzamento viene completato in background.

Perché è importante interagire con l'utente durante l'avanzamento del sistema?

Chi non ama la risposta rapida da un'app o da un sito Web? Sebbene significhi molto per l'utente, non è possibile eseguirlo con coerenza costante. Nell'equazione vengono sempre aggiunti alcuni fattori che possono ostacolare la velocità dell'applicazione. Questi fattori includono principalmente una cattiva connessione a Internet, prestazioni lente a causa di carichi pesanti e persino errori del programma. In tali circostanze, la mossa migliore sarebbe ridurre al minimo la tensione dell'utente e introdurre rassicurazioni sul funzionamento dell'app e sui progressi compiuti. Per fare ciò, devi fornire un feedback all'utente in modo che il tempo non influisca sulla pazienza dell'utente.

Mantieni gli utenti agganciati con il feedback

Il tempo di attesa inizia quasi immediatamente quando viene eseguita un'azione da parte dell'utente. Ma ciò che lo rende peggiore è l'assenza di un indicatore adeguato per rappresentare l'andamento del sistema. L'utente presume naturalmente che l'app non abbia risposto quando non mostra una notifica che il sistema sta impiegando tempo. I risultati possono variare dal clic dilagante fino all'abbandono dell'utente, solo perché l'app non ha fornito feedback in tempo.

Le azioni cablate per riavviare l'avanzamento o aggiornare il sistema vengono spesso eseguite quando il caricamento richiede più tempo del previsto. Ancora una volta, l'assenza di feedback non può mostrare la risposta alla richiesta anche se è stata fatta in background. Ecco perché è necessario introdurre un indicatore animato per sostenere l'avanzamento del sistema dell'app in qualsiasi momento.

Come utilizzare un indicatore di avanzamento per qualsiasi azione che richiede più di un secondo?

Normalmente, quando un'app impiega meno di 1 secondo per caricarsi, l'avanzamento sembra quasi senza ostacoli e l'utente non perde la concentrazione. Tuttavia, se il tempo di caricamento supera 1 secondo, è necessario adottare misure per mantenere impegnato l'utente. Il breve ritardo diventa evidente e l'utente inizia a vagare sull'efficacia dell'attività svolta sull'applicazione.

Ecco perché l'app deve rispondere attraverso un indicatore di avanzamento per offrire una ragione credibile per l'attesa e ridurre l'incertezza dell'utente prima che vada fuori controllo. Va notato che l'azione che richiede meno di un secondo per essere caricata non richiede necessariamente un indicatore di animazione, ma l'immagine può farlo. Questo è consigliato perché un'animazione che continua a lampeggiare sullo schermo ogni volta che viene eseguita un'azione può disorientare l'utente. Gli indicatori di avanzamento animati sono utilizzati al meglio per neutralizzare gli effetti di un'attesa prolungata e mantenere l'utente impegnato sull'app o sul sito Web.

Tipi di indicatori di progresso

1. Indeterminato : gli indicatori di attesa animati sono progettati per comunicare con l'utente e tenerlo informato sull'ultima azione dell'utente. Il tipo più comune e piuttosto semplice di indicatore di attesa è "Indeterminato". Tali tipi di indicatori indicano agli utenti di attendere il completamento dell'azione, mantenendoli all'oscuro del tempo necessario per completare l'avanzamento. È quasi chiaro che l'indicatore di avanzamento indeterminato dovrebbe essere utilizzato per azioni rapide preferibilmente entro 2-10 secondi. Qualsiasi tempo più lungo di quello e potrebbe influenzare la pazienza dell'utente. Ciò può aumentare la frequenza di rimbalzo per un sito Web e gli abbandoni per le applicazioni.
2. Determina : in caso di indicatore di avanzamento "Determina", il tempo è abbastanza lungo all'interno dell'animazione. Questo tipo di indicatori informa l'utente sul tempo approssimativo o esatto necessario per completare l'avanzamento. Sono piuttosto il tipo più popolare di indicatori di attesa poiché mostrano il progresso da dove è iniziato, quanto è stato realizzato e quanto ancora ci vorrà per interrompere l'attesa. Ciò aiuta l'utente a rimanere sicuro dei progressi compiuti e mostrati attraverso l'animazione, aumentando al contempo la sua disponibilità a rimanere coinvolto nel sito Web o nell'applicazione.

Indicatore di animazione in loop e Indicatore di percentuale completata

• Animazione in loop: l'indicatore di animazione in loop è progettato per rappresentare i progressi senza mostrare il tempo di caricamento approssimativo o esatto necessario. Questo è il motivo per cui gli indicatori di progresso animati in loop di maggioranza sono indeterminati. Ad esempio, l'indicatore di avanzamento di Windows 7 è stato progettato per mostrare la stessa ripetizione dell'animazione senza alcun feedback sul tempo preciso necessario per completare l'avanzamento. Inoltre, includeva tutto, dalle funzioni di avvio, all'impostazione del funzionamento dell'interfaccia e ad altre forme di caricamento dei dati. A causa di questi due motivi, gli utenti non preferiscono vedere l'indicatore di attesa in loop per rappresentare il tempo di caricamento del sito Web o dell'applicazione.

• Indicatore percentuale completata : come suggerisce il nome, l'indicatore percentuale completata mostra l'avanzamento del caricamento riempiendo l'intervallo, il cerchio o la barra dell'animazione dallo 0% al 100%. Poiché mostra il tempo impiegato per completare l'avanzamento, l'indicatore di percentuale completata è classificato in determinati indicatori di attesa. Per questa particolare qualità, è meglio utilizzare l'indicatore di percentuale completata per attività che richiedono più di 10 secondi per essere completate.

  

  

  Secondo una ricerca, 10 secondi è la soglia di pazienza dell'utente medio. Oltre a ciò, l'utente diventa sconsiderato e si spazientisce fino a quando non viene fornito un ulteriore feedback. Mostrando l'indicatore di avanzamento percentuale per i processi che richiedono più di 10 secondi per essere caricati, puoi mantenere l'utente agganciato al sito Web o all'applicazione senza compromettere la sua pazienza.

Come utilizzare gli indicatori di avanzamento in modo efficace?

L'uso efficace degli indicatori di avanzamento nelle applicazioni e nei siti Web può fare la differenza tra successo e fallimento. Ecco alcuni suggerimenti per assicurarti che i tuoi indicatori di progresso siano all'altezza del punteggio.

1. Tieni l'utente informato sul motivo dell'attesa : è un errore da principiante mantenere l'utente ignaro dell'avanzamento del caricamento in background. Ciò aumenta la loro tendenza a perdere la pazienza e chiudere l'applicazione o il sito Web. Puoi tenere informato l'utente mostrando un indicatore di avanzamento animato accompagnato da del testo per una maggiore comprensione. Puoi mostrare quale processo è specificamente preso di mira. Ad esempio, puoi mostrare l'avanzamento dell'attesa di un videogioco con una barra di caricamento e un testo che legge quale processo è stato eseguito, ad esempio "caricamento di grafica" o "caricamento di mappe" ecc.
2. Indicare una semplice stima del tempo per attività che richiedono periodi di tempo più lunghi : non prendere le cose su micro scale. Puoi coinvolgere l'utente fornendo un semplice preventivo. Imbrogliare con promesse che non puoi mantenere può irritare gli utenti e costringerli ad andarsene.
3. Mostra la quantità precisa di tempo richiesta : Tuttavia, per le operazioni che generalmente richiedono più tempo del limite medio di attesa dell'utente, optare per determinati indicatori di avanzamento sarà la mossa più intelligente. La scelta ideale sarebbe l'indicatore di avanzamento in percentuale poiché porta il tempo di caricamento preciso sotto i riflettori. Per operazioni ancora più lunghe da gestire, valutare l'utilizzo del numero di passaggi per evidenziare i progressi compiuti.
4. Tieni il passo con i progressi : prova a puntare alla coerenza nella barra di avanzamento durante il caricamento delle attività. Dopo alcune esperienze, la barra di avanzamento costringe gli utenti a sviluppare un'aspettativa sulla velocità con cui verrà completata l'azione. Di conseguenza, qualsiasi blocco in mezzo ai progressi può dare un duro colpo alle aspettative degli utenti. Ad esempio, quando la barra raggiunge il 99% e rimane così per un periodo di tempo prolungato, la maggior parte degli utenti si sente frustrata da questo comportamento e lascia l'applicazione credendo che si sia bloccata. Per contrastare questo, puoi mascherare questi ritardi incoerenti nella barra di avanzamento mostrando che si muove istantaneamente e costantemente.
5. Mostra i progressi nella barra più velocemente della velocità effettiva : la velocità grezza può essere manifestata da una semplice percezione che puoi creare per far sembrare più veloce la barra di avanzamento. Puoi farlo progettando l'animazione in modo che si muova lentamente all'inizio e ne prenda il ritmo quando chiude la fine. Ciò creerà l'illusione di un rapido progresso senza compromettere il tempo necessario per completare l'attività.
6. Offrire una distrazione : la percezione del tempo da parte dell'utente può essere notevolmente ridotta introducendo indicatori di progresso creativo. Se l'app mostra alcuni dettagli testuali o visivi interessanti durante l'avanzamento, può distrarre la mente dell'utente dal tempo impiegato per completare l'azione. Puoi offrire una varietà di cose per tenere occupati gli utenti, ad esempio brevi video, fatti interessanti, animazioni e persino giochi banali.

Alternativa: utilizzare gli schermi degli scheletri per contrastare gli indicatori di avanzamento dell'animazione

Sebbene gli indicatori di animazione del progresso possano scuotere quasi ogni brutta sensazione che esce dall'attesa, alcuni spettatori sono piuttosto resilienti a queste tattiche. Tra le poche buone alternative per far aspettare gli utenti senza utilizzare gli indicatori di avanzamento c'è un metodo chiamato schermo scheletro. Conosciuti anche come contenitori di informazioni temporanee, queste tecniche implicano la visualizzazione dei progressi in tempo reale all'utente invece di aprire una barra di caricamento. Immagina uno schermo vuoto che viene gradualmente riempito con i suoi componenti ed elementi fino a quando non è completamente rifornito. Ciò crea l'illusione che l'applicazione agisca con il tempo di caricamento e che la loro attesa venga premiata con i progressi mostrati.

Non solo mantiene il pubblico coinvolto con il sito Web o l'applicazione, ma li tiene anche pronti a completare l'attività successiva. Sebbene gli indicatori di avanzamento siano anche ottimi mezzi per soddisfare gli utenti, non riescono a mantenere l'energia all'interno degli utenti che lo schermo dello scheletro mantiene durante il loro avanzamento di caricamento.

Pensieri finali

Non importa quanto siano rapide le operazioni della nostra app o del nostro sito Web, c'è sempre la possibilità di tempi di elaborazione non invitati. L'utilizzo di indicatori di avanzamento di attesa animati, come gli indicatori di percentuale completata e gli spinner di caricamento, aiutano a rassicurare gli utenti sui processi in corso e sullo stato corrente del sistema. Di conseguenza, aumenta la probabilità che rimangano sul sito Web o sull'applicazione per attendere il caricamento e continuare con le attività rimanenti. Calcolando il tempo necessario per il completamento dei processi, è necessario assegnare il tipo appropriato di indicatori di animazione di avanzamento.

Un indicatore in loop è l'ideale per le operazioni che richiedono 2-10 secondi, mentre le operazioni che richiedono più tempo possono essere assistite con l'indicatore della percentuale di completamento. In caso di animazione in loop e schermate scheletriche, è meglio optare per schermate scheletriche poiché sono in grado di intraprendere qualsiasi azione che vada oltre pochi millisecondi, mantenendo comunque la calma con gli utenti.