Best practice per l’implementazione di indicatori di avanzamento animati a proprio vantaggio

Se hai mai utilizzato un PC, potresti anche essere a conoscenza del simbolo animato di Windows che appare all’avvio del sistema. Ci è 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ù cardinali del design dell’interfaccia utente c’è la capacità di mostrare i suoi progressi 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 corrente dell’operazione quasi in qualsiasi momento senza l’utilizzo di ampie funzioni di testo o video. Ciò 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 una coerenza incrollabile. All’equazione vengono sempre aggiunti alcuni fattori che possono ostacolare la velocità della tua 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 fatto che l’app funzioni e che si stiano facendo progressi. Per fare ciò, è necessario 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 effettuata un’azione da parte dell’utente. Ma a peggiorare la situazione è l’assenza di un indicatore adeguato per rappresentare l’andamento del sistema. L’utente presume naturalmente che l’app non abbia risposto quando non riesce a mostrare una notifica che il sistema sta impiegando del tempo. I risultati possono spaziare dal clic dilagante fino all’abbandono dell’utente, solo perché l’app non ha fornito feedback in tempo.

Le azioni che sono 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ò esibire la risposta della richiesta anche se è stata fatta in background. Ecco perché è necessario introdurre un indicatore animato per sostenere i progressi del sistema dell’app in qualsiasi momento necessario.

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, il progresso 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 l’utente impegnato. 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 caricarsi non richiede necessariamente l’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 dell’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 dicono agli utenti di attendere il completamento dell’azione mantenendoli all’oscuro del tempo necessario per completare l’avanzamento. È quasi chiaro che Indicatore di avanzamento indeterminato dovrebbe essere utilizzato per azioni rapide preferibilmente entro 2-10 secondi. Qualsiasi tempo più lungo potrebbe influire sulla pazienza dell’utente. Ciò può aumentare la frequenza di rimbalzo per un sito Web e gli abbandoni per le applicazioni.
2. Determinate: In caso di indicatore di avanzamento “Determinate”, il tempo è abbastanza esteso all’interno dell’animazione. Questo tipo di indicatori mantiene l’utente informato sul tempo approssimativo o esatto necessario per completare il progresso. 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 uccidere 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 l’avanzamento senza mostrare il tempo di caricamento approssimativo o esatto che ci vorrà. Questo è il motivo per cui gli indicatori di avanzamento 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. Per 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 di percentuale completata: come suggerisce il nome, l’indicatore di percentuale completata mostra l’avanzamento del caricamento riempiendo l’intervallo di animazione, il cerchio o la barra 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 le attività che richiedono più di 10 secondi per essere completate.

  Secondo una ricerca, 10 secondi è la soglia della pazienza media dell’utente. Oltre a ciò, l’utente diventa spericolato e diventa impaziente fino a quando non viene fornito un ulteriore feedback. Mostrando l’indicatore di avanzamento in percentuale per i processi che impiegano più di 10 secondi per caricarsi, puoi mantenere l’utente agganciato al sito Web o all’applicazione senza comprometterne la pazienza.

Come utilizzare gli indicatori di progresso 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 avanzamento siano all’altezza.

1. Mantieni l’utente informato sul motivo dell’attesa: è un errore da principiante mantenere l’utente ignaro dell’avanzamento del caricamento che viene effettuato in background. Ciò aumenta la loro tendenza a perdere la pazienza e ad abbandonare l’applicazione o il sito web. Puoi tenere informato l’utente mostrando l’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 è in corso, ad esempio “caricamento grafica” o “caricamento mappe” ecc.
2. Indica una semplice stima del tempo per attività che richiedono periodi di tempo più lunghi: non portare le cose su micro scale. Puoi coinvolgere l’utente fornendo un semplice preventivo. Scherzare con promesse che non puoi mantenere può irritare gli utenti e costringerli ad andarsene.
3. Mostra la quantità precisa di tempo richiesto: tuttavia, per le operazioni che generalmente richiedono più tempo rispetto al limite medio di attesa dell’utente, optare per determinati indicatori di progresso sarà la mossa più intelligente. La scelta ideale sarebbe l’indicatore di avanzamento fatto in percentuale poiché porta alla ribalta il tempo di caricamento preciso. Per le operazioni ancora più lunghe da gestire, considera l’utilizzo del numero di passaggi per evidenziare i progressi compiuti.
4. Mantieni il progresso: cerca di mirare 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 l’azione verrà completata. Di conseguenza, eventuali blocchi durante i progressi possono infliggere 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 rendere la barra di avanzamento più veloce. Puoi farlo progettando l’animazione in modo che si muova lentamente all’inizio e prenda il suo ritmo mentre chiude la fine. Ciò creerà l’illusione di un rapido progresso senza compromettere il tempo necessario per completare l’attività.
6. Offri una distrazione: la percezione del tempo da parte dell’utente può essere notevolmente ridotta introducendo indicatori di progresso creativi. 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 contro gli indicatori di avanzamento dell’animazione

Sebbene gli indicatori di animazione del progresso possano scuotere quasi ogni brutta sensazione che deriva dall’attesa, alcuni spettatori sono piuttosto resistenti a queste tattiche. Tra le poche buone alternative per far aspettare gli utenti senza utilizzare gli indicatori di avanzamento c’è un metodo chiamato scheletro dello schermo. Conosciute anche come contenitori di informazioni temporanee, queste tecniche comportano 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. Questo crea l’illusione che l’applicazione stia agendo con il tempo di caricamento e la loro attesa viene ricompensata con i progressi mostrati.

Non solo mantiene il pubblico coinvolto con il sito Web o l’applicazione, ma li mantiene anche pronti a completare la loro attività successiva. Sebbene gli indicatori di progresso siano anche ottimi mezzi per soddisfare gli utenti, non riescono a mantenere l’energia all’interno degli utenti che lo schermo scheletrico 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 un tempo di elaborazione non richiesto. L’utilizzo di indicatori di avanzamento dell’attesa animati come gli indicatori di percentuale completata e gli spinner di caricamento aiuta 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 completata. In caso di animazioni in loop e schermate scheletriche, è meglio scegliere schermate scheletriche poiché sono in grado di intraprendere qualsiasi azione che vada oltre pochi millisecondi, mantenendo comunque la calma con gli utenti.