Questa pagina fornisce linee guida di progettazione su come creare un'esperienza utente ottimale su reti lente e offline.
La qualità di una connessione di rete può essere influenzata da una serie di fattori, tra cui:
- Scarsa copertura del fornitore di rete.
- Condizioni meteo estreme.
- Interruzioni di corrente.
- Entrare in "zone morte" permanenti, ad esempio in edifici con muri che bloccano le connessioni di rete.
- Entrare in "zone morte" temporanee, ad esempio quando si viaggia su un treno e si attraversa un tunnel.
- Connessioni a internet a tempo, come quelle all'interno di aeroporti o hotel.
- Pratiche culturali che richiedono un accesso a internet limitato o assente in orari specifici o in giorni specifici.
Il tuo obiettivo in qualità di sviluppatore è offrire un'esperienza positiva che riduca l'impatto delle modifiche alla connettività.
Decidi cosa mostrare agli utenti in caso di problemi con la connessione di rete
La prima domanda che devi porti è quale aspetto di una connessione di rete riuscita e non riuscita per la tua app. Una connessione riuscita è la normale esperienza online della tua app. Gli errori di connessione riguardano sia il comportamento dell'app offline sia sulle reti in ritardo.
Per determinare come gestire gli errori di connessione, poniti queste importanti domande sull'UX:
- Quanto tempo aspetti per determinare l'esito positivo o negativo di una connessione?
- Cosa puoi fare mentre il successo o il fallimento viene determinato?
- Cosa devi fare se la connessione non va a buon fine?
- Come fai a comunicare all'utente cosa sta succedendo?
Informare gli utenti sul loro stato attuale e sul loro cambio di stato
Comunica all'utente sia lo stato dell'applicazione sia le azioni che può ancora eseguire in caso di errore di rete. Ad esempio, una notifica potrebbe riportare quanto segue:
La tua connessione di rete sembra essere scadente. Niente paura. I messaggi verranno inviati quando la rete verrà ripristinata.
Informare gli utenti quando la connessione di rete migliora o viene ripristinata
Il modo in cui comunichi all'utente che la sua connessione di rete è migliorata dipende dall'applicazione. Le app che danno la priorità alle informazioni correnti, come tracker del meteo o del mercato azionario, devono aggiornarsi automaticamente e informare l'utente il prima possibile.
Ti consigliamo di comunicare all'utente che la tua app web è stata aggiornata "in background" usando un segnale visivo come un elemento toast Material Design. Ciò comporta il rilevamento della presenza di un service worker e un aggiornamento dei suoi contenuti gestiti. Puoi vedere un esempio di codice di questa funzione in funzione qui.
Un esempio è lo stato della piattaforma Chrome, che pubblica una nota per l'utente quando l'app viene aggiornata.
Alcune app possono sempre mostrare la data dell'ultimo aggiornamento. Ad esempio, questo è particolarmente utile per le app di conversione di valute.
Le app di notizie possono mostrare una semplice notifica di aggiornamento con un tocco che informa l'utente della presenza di nuovi contenuti. Se aggiorni automaticamente un articolo, gli utenti potrebbero perdere il punto in cui avevi interrotto.
Aggiorna l'interfaccia utente in modo che rifletta lo stato contestuale attuale
Ogni elemento dell'interfaccia utente può avere un proprio contesto e comportamento che cambiano a seconda che sia necessaria una connessione riuscita. Un esempio potrebbe essere un sito di e-commerce che può essere sfogliato offline, ma che disattiva i prezzi e il pulsante Acquista fino a quando non viene ristabilita la connessione.
Altri tipi di stati contestuali possono includere i dati. Ad esempio, l'app finanziaria Robinhood utilizza colori e grafica per indicare all'utente quando è aperta la borsa. L'intera interfaccia diventa bianca e diventa in grigio quando chiude il mercato. Quando il valore di un'azione aumenta o diminuisce, ogni singolo widget delle azioni diventa verde o rosso a seconda del suo stato.
Spiega all'utente che cos'è il modello offline
La maggior parte degli utenti è abituata ad avere sempre una connessione di rete. Devi informarli dei cambiamenti nella tua app quando non hanno una connessione. Indica dove vengono salvati i dati di grandi dimensioni e fornisci le impostazioni per modificare il comportamento predefinito. Utilizza più componenti di design dell'interfaccia utente (come linguaggio informativo, icone, notifiche, colore e immagini) insieme per trasmettere queste idee, invece di affidarti a un'unica scelta di design, ad esempio un'icona da sola, per raccontare l'intera storia.
Fornisci un'esperienza offline per impostazione predefinita
Se l'app non richiede molti dati, questi dati vengono memorizzati nella cache per impostazione predefinita. Gli utenti possono sentirsi sempre più infastiditi se possono accedere ai dati solo con una connessione di rete.
Cerca di rendere l'esperienza il più stabile possibile. Una connessione instabile rende inaffidabile la tua app. Un'app che riduce l'impatto di un errore di rete soddisfa gli utenti.
I siti di notizie possono trarre vantaggio dal download automatico delle notizie più recenti e dal salvataggio automatico delle ultime notizie, che possono salvare i dati scaricando solo il testo. In questo modo l'utente può leggere le notizie del giorno senza connessione. Puoi adattare questo comportamento al comportamento dell'utente dando la priorità al download delle categorie di notizie che l'utente visualizza di più.
Informa l'utente quando l'app è pronta per essere utilizzata offline
Al primo caricamento di un'app web, deve indicare all'utente se è pronta per l'utilizzo offline. Puoi utilizzare un widget che fornisca un breve feedback su un'operazione tramite un messaggio nella parte inferiore dello schermo, ad esempio quando una sezione è stata sincronizzata o un file è stato scaricato.
Assicurati che il linguaggio che stai utilizzando sia adatto al tuo pubblico e usa la stessa frase in tutti i casi in cui è pertinente. I segmenti di pubblico che non hanno competenze tecniche spesso non capiscono la parola "offline", quindi usano un linguaggio basato sulle azioni in cui il pubblico può identificarsi.
Rendi evidente l'opzione "Salva per offline" nell'interfaccia
Se un'applicazione utilizza molti dati, assicurati che sia presente un'opzione o un segnaposto per aggiungere un elemento da utilizzare offline. Scarica automaticamente i file solo se l'utente ha richiesto questo comportamento specificamente tramite un menu delle impostazioni. Assicurati che la UI di blocco o di download sia chiara per l'utente e non nascosta da altri elementi dell'interfaccia.
Un esempio di ciò è un lettore musicale che richiede file di grandi dimensioni. L'utente è consapevole del costo dei dati associato, ma potrebbe anche voler utilizzare il player offline. Il download di musica da utilizzare in seguito richiede all'utente di pianificarlo in anticipo, quindi è probabile che tu voglia informare l'utente in merito durante l'onboarding.
Chiarisci che cosa è disponibile offline
Descrivi chiaramente le opzioni che offri. Potresti dover mostrare una scheda o un'impostazione per una "libreria offline" o un indice di contenuti in modo che l'utente possa vedere cosa ha memorizzato sul proprio dispositivo e cosa deve essere salvato. Assicurati che le impostazioni siano concise e indica chiaramente dove sono archiviati i dati e chi può accedervi.
Mostra il costo effettivo di un'azione
Molti utenti equivalgono alla funzionalità offline con il "download". Gli utenti nei paesi in cui le connessioni di rete non sono disponibili o non sono disponibili spesso condividono i contenuti con altri utenti o salvano i contenuti per l'utilizzo offline quando dispongono di connettività.
Gli utenti con piani dati a volte evitano di scaricare file di grandi dimensioni per timore dei costi, quindi potresti anche voler visualizzare un costo associato in modo che gli utenti possano effettuare un confronto attivo per un file o un'attività specifici. Ad esempio, la suddetta app di musica potrebbe rilevare se l'utente ha sottoscritto un piano dati e mostrare le dimensioni del file in modo che l'utente possa vedere il costo del file.
Contribuisci a prevenire le esperienze compromesse
Gli utenti spesso compromettono un'esperienza senza rendersi conto che la stanno facendo. Ad esempio, prima che esistessero le app web per la condivisione di file basate su cloud, era comune per gli utenti salvare file di grandi dimensioni e allegarli alle email per poter continuare a modificare i file da un altro dispositivo. Una buona interfaccia utente risolve il problema che gli utenti cercano di risolvere senza essere coinvolti. Ad esempio, puoi fornire un modo per condividere file di grandi dimensioni su più dispositivi, invece di semplificare l'aggiunta di file di grandi dimensioni alle email.
Rendere le esperienze trasferibili da un dispositivo a un altro
Se crei reti per reti instabili, prova a eseguire la sincronizzazione non appena la connessione migliora in modo che l'esperienza sia trasferibile. Immagina ad esempio che un'app di viaggi perda la connessione di rete durante una prenotazione. Quando la connessione viene ristabilita, l'app si sincronizza con l'account dell'utente, consentendogli di continuare la prenotazione sul computer e rendendo l'esperienza fluida.
Comunica all'utente lo stato dei suoi dati. Ad esempio, puoi mostrare se l'app è stata sincronizzata. Fornisci loro informazioni, ove possibile, ma cerca di non tempestarli di messaggi eccessivi.
Crea esperienze di design inclusive
Al momento di progettare la tua esperienza utente, cerca di essere inclusivo fornendo dispositivi dal design significativo, un linguaggio semplice, icone standard e immagini significative che guidano l'utente a completare l'azione o l'attività senza ostacolare il processo.
Utilizza un linguaggio semplice e chiaro
Una buona UX non consiste solo nella progettazione dell'interfaccia. Include il percorso che un utente esegue nell'app e tutto ciò che incontra lungo il percorso, compreso il linguaggio utilizzato dall'app per descriverlo. Quando spieghi i componenti dell'interfaccia utente o lo stato dell'app, evita il gergo tecnico. La parola "offline" spesso non è abbastanza chiara per far capire all'utente che cosa sta facendo la tua app.
Utilizza più dispositivi di progettazione per creare esperienze utente accessibili
Utilizza la lingua, il colore e i componenti visivi per mostrare uno stato o un cambiamento di stato. Utilizzare solo il colore per mostrare lo stato può essere difficile da notare per gli utenti, o addirittura completamente inaccessibili per gli utenti con disabilità visive. Inoltre, poiché il web design tende a utilizzare il grigio per gli elementi disattivati, l'utilizzo di un'interfaccia utente grigia per indicare che la tua app è offline può creare confusione su ciò che può fare la tua app offline, soprattutto se utilizzi solo il colore per mostrare lo stato.
Per evitare malintesi, comunica all'utente gli stati dell'app in diversi modi, ad esempio con colore, etichette e componenti dell'interfaccia utente.
Utilizza icone che comunicano il significato
Assicurati di utilizzare etichette di testo significative accanto alle icone. Le icone da sole possono essere confusi, soprattutto perché il concetto di "offline" sul web è relativamente nuovo. Altri casi in cui le icone possono creare confusione sono l'uso di un floppy disk per rappresentare il salvataggio, che può essere privo di significato per gli utenti più giovani che non hanno mai visto un floppy disk, e l'icona del menu "hamburger".
Quando introduci un'icona offline, rispetta le immagini standard del settore e fornisci un'etichetta di testo e una descrizione. Ad esempio, puoi utilizzare un'icona di download per indicare il salvataggio per offline, un'icona di sincronizzazione per un'azione che prevede la sincronizzazione. Fai attenzione quando utilizzi icone per dimostrare lo stato che potrebbero essere invece interpretate come un'azione di salvataggio o download.
Per ulteriore ispirazione, consulta l'insieme di icone di Material Design.
Utilizzare la disposizione degli scheletri e altri meccanismi di feedback
Mentre è in corso il caricamento dei contenuti nell'app, mostra all'utente che si sta caricando per evitare che si rompa. Un modo per farlo è utilizzare uno schema scheletro, ovvero una versione mesh della tua app che viene visualizzata durante il caricamento dei contenuti. Prendi in considerazione anche l'utilizzo di una UI preloader con un'etichetta di testo che indichi all'utente che l'app è in fase di caricamento o un'animazione che pulsante delicatamente per il Wireframe per dare l'impressione che sia attivo e in caricamento. Questo rassicura l'utente in merito a qualcosa e aiuta a evitare nuovi invii di contenuti o aggiornamenti non necessari.
Mostra lo stato di un'azione fornendo un feedback. Ad esempio, se un utente sta modificando un documento offline, valuta la possibilità di cambiare il design del feedback in modo che sia visibilmente diverso da quando è online, ma che indichi comunque che il file è stato "salvato" e che venga sincronizzato quando sarà disponibile una connessione di rete. Questo spiega all'utente come funziona la tua app e lo rassicura sul fatto che la sua attività o azione è stata archiviata, in modo da avere maggiore sicurezza nell'utilizzo della tua applicazione.
Non bloccare i contenuti
In alcune app, un utente potrebbe attivare un'azione come la creazione di un nuovo documento. Alcune app tentano di connettersi a un server per sincronizzare il nuovo documento e, a dimostrazione di ciò, visualizzano una finestra di dialogo modale di caricamento invasivo che copre l'intero schermo. Questo potrebbe funzionare se l'utente ha una connessione di rete stabile, ma se la rete è instabile, non potrà uscire da questa azione, pertanto l'interfaccia utente gli impedisce di fare qualsiasi altra operazione.
Evita richieste di rete che bloccano i contenuti. Consenti all'utente di continuare a sfogliare l'app e accoda le attività che verranno eseguite e sincronizzate quando la connessione migliora.
Progetta per il prossimo miliardo
In molte regioni i dispositivi di fascia bassa sono comuni, la connettività è inaffidabile e per molti utenti i dati sono estremamente costosi. Conquista la fiducia degli utenti adottando un approccio trasparente e parsimonioso. Cercate di aiutare gli utenti con connessioni deboli e semplificate l'interfaccia per velocizzare le attività. Prova sempre a chiedere agli utenti prima di scaricare contenuti con molti dati.
Offri opzioni di larghezza di banda bassa agli utenti con connessioni in ritardo. Fornisci asset più piccoli su connessioni di rete più lente oppure offri la possibilità di scegliere asset di alta o bassa qualità.
Conclusione
L'istruzione è fondamentale per l'UX offline perché gli utenti non la conoscono. Per aiutarli ad apprendere, prova a creare associazioni con concetti familiari, ad esempio spiegando che scaricare per un uso futuro equivale a eseguire l'offline dei dati.
Quando progetti per connessioni di rete instabili, tieni a mente queste linee guida:
- Progetta in modo da garantire il successo, i guasti e l'instabilità di una connessione di rete.
- I dati possono essere costosi, quindi presta attenzione nei confronti dell'utente.
- Per la maggior parte degli utenti a livello globale, l'ambiente tecnologico è quasi esclusivamente mobile.
- I dispositivi di fascia bassa sono all'ordine del giorno, con spazio di archiviazione, memoria e potenza di elaborazione limitati, display piccoli e touchscreen di qualità inferiore. Assicurati che il rendimento faccia parte del processo di progettazione.
- Consenti agli utenti di sfogliare la tua applicazione quando sono offline.
- Informare gli utenti del loro stato attuale e dei loro cambiamenti.
- Prova a fornire l'accesso offline per impostazione predefinita se la tua app non richiede molti dati.
- Se l'app contiene molti dati, spiega agli utenti come possono scaricarla per utilizzarla offline.
- Rendere le esperienze trasferibili tra dispositivi.
- Usa linguaggio, icone, immagini, tipografia e colori per esprimere le tue idee all'utente.
- Fornisci rassicurazione e feedback per aiutare l'utente.