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 diversi fattori, tra cui:
- Scarsa copertura del network provider.
- Condizioni meteorologiche estreme.
- Interruzioni di corrente.
- Entrare in "zone morte" permanenti, ad esempio in edifici con pareti 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 con limiti di tempo, ad esempio quelle in aeroporti o hotel.
- Pratiche culturali che richiedono un accesso a internet limitato o nullo in determinati momenti o giorni.
Il tuo obiettivo come sviluppatore è offrire un'esperienza positiva che riduca l'impatto delle variazioni di connettività.
Decidere cosa mostrare agli utenti quando la connessione di rete è scarsa
La prima domanda da porsi è che aspetto hanno il successo e l'errore di una connessione di rete per la tua app. Una connessione riuscita è la normale esperienza online della tua app. Il fallimento della connessione include sia il comportamento dell'app offline sia su reti con problemi di latenza.
Per determinare come gestire l'errore di connessione, poniti queste importanti domande sull'esperienza utente:
- Quanto tempo aspetti per determinare il successo o l'errore di una connessione?
- Cosa puoi fare mentre viene determinato il successo o l'errore?
- Che cosa devi fare se la connessione non va a buon fine?
- Come fai a dire all'utente cosa sta succedendo?
Informare gli utenti del loro stato attuale e della relativa modifica
Comunica all'utente sia lo stato dell'applicazione sia le azioni che può ancora intraprendere in caso di guasto della rete. Ad esempio, una notifica potrebbe indicare quanto segue:
Sembra che tu abbia una connessione di rete debole. Niente paura. I messaggi verranno inviati quando la rete sarà ripristinata.
Informare gli utenti quando la connessione di rete migliora o viene ripristinata
Il modo in cui comunichi all'utente che la connessione di rete è migliorata dipende dalla tua applicazione. Le app che danno la priorità alle informazioni attuali, come i tracker meteo o finanziari, 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" utilizzando un indicatore visivo come un elemento di notifica Material Design. Ciò comporta il rilevamento sia della presenza di un servizio worker sia di un aggiornamento dei contenuti gestiti. Puoi vedere un esempio di codice di questa funzione in azione qui.
Un esempio è Stato della piattaforma Chrome, che pubblica una nota per l'utente quando l'app è stata aggiornata.
Alcune app possono sempre mostrare l'ultima volta che sono state aggiornate. Ad esempio, questo è particolarmente utile per le app di conversione di valute.
Le app di notizie possono mostrare una semplice notifica con un messaggio che richiede all'utente di toccare per aggiornare e che lo informa dei nuovi contenuti. L'aggiornamento automatico di un articolo potrebbe causare la perdita del punto in cui si trova l'utente.
Aggiornare l'interfaccia utente in base allo stato contestuale attuale
Ogni elemento dell'interfaccia utente può avere il proprio contesto e comportamento che cambia a seconda se è necessaria una connessione riuscita. Un esempio è un sito di e-commerce che può essere visualizzato offline, ma disattiva i prezzi e il pulsante Acquista fino a quando non viene stabilita nuovamente una connessione.
Altre forme di stati contestuali possono includere dati. Ad esempio, l'app finanziaria Robinhood utilizza colori e immagini per indicare all'utente quando è aperto il mercato azionario. L'intera interfaccia diventa bianca e poi diventa grigia quando il mercato chiude. Quando il valore di una azione aumenta o diminuisce, ogni singolo widget delle azioni diventa verde o rosso a seconda del suo stato.
Informa l'utente in modo che capisca che cos'è il modello offline
La maggior parte degli utenti è abituata ad avere sempre una connessione di rete. Devi informarli sulle modifiche che avvengono nella tua app quando non hanno una connessione. Comunica loro 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, colori e immagini) per trasmettere queste idee, anziché fare affidamento su una singola scelta di design, come un'icona da sola, per raccontare tutta la storia.
Fornire un'esperienza offline per impostazione predefinita
Se la tua app non richiede molti dati, memorizzali nella cache per impostazione predefinita. Gli utenti possono diventare sempre più frustrati se possono accedere ai propri dati solo con una connessione di rete.
Cerca di rendere l'esperienza il più stabile possibile. Una connessione instabile fa sembrare la tua app non attendibile. Un'app che riduce l'impatto di un guasto della rete soddisfa i suoi utenti.
I siti di notizie possono trarre vantaggio dal download e dal salvataggio automatico delle ultime notizie, magari salvando i dati scaricando solo il testo, in modo che un utente possa leggere le notizie del giorno senza una connessione. Puoi adattare questo comportamento al comportamento dell'utente dando la priorità al download delle categorie di notizie che l'utente visualizza più di frequente.
Comunica all'utente quando l'app è pronta per il consumo offline
Al primo caricamento, un'app web deve indicare all'utente se è pronta per l'uso offline. A tale scopo, puoi utilizzare un widget che fornisce 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 utilizzi sia adatto al tuo pubblico e utilizza la stessa formulazione in tutti i casi in cui sia applicabile. I segmenti di pubblico non tecnici spesso sbagliano a interpretare la parola "offline", quindi utilizza un linguaggio basato sulle azioni con cui il tuo pubblico può identificarsi.
Rendere evidente l'opzione "Salva per l'utilizzo offline" nell'interfaccia
Se un'applicazione utilizza molti dati, assicurati che sia presente un'opzione o un'opzione di blocco per aggiungere un elemento da utilizzare offline. Scaricare automaticamente i file solo se un utente lo ha richiesto esplicitamente tramite un menu delle impostazioni. Assicurati che l'UI di pinning o download sia chiara per l'utente e non sia nascosta da altri elementi dell'interfaccia utente.
Un esempio è un lettore musicale che richiede file di grandi dimensioni. L'utente è consapevole del costo dei dati associati, ma potrebbe anche voler utilizzare il player offline. Il download di musica per un uso successivo richiede che l'utente pianifichi in anticipo, quindi probabilmente vorrai fornirgli informazioni in merito durante l'onboarding.
Chiarire cosa è disponibile offline
Indica chiaramente le opzioni che offri. Potresti dover mostrare una scheda o un'impostazione per una "libreria offline" o un indice dei contenuti in modo che l'utente possa vedere cosa ha archiviato sul suo dispositivo e cosa deve essere salvato. Assicurati che le impostazioni siano concise e indica chiaramente dove vengono memorizzati i dati e chi ha accesso.
Mostra il costo effettivo di un'azione
Molti utenti associano la funzionalità offline al "download". Gli utenti dei paesi in cui le connessioni di rete non sono disponibili o si verificano regolarmente degli errori spesso condividono contenuti con altri utenti o li salvano per l'utilizzo offline quando sono connessi.
Gli utenti con piani dati a volte evitano di scaricare file di grandi dimensioni per paura dei costi, quindi potresti anche mostrare un costo associato in modo che gli utenti possano fare un confronto attivo per un file o un'attività specifici. Ad esempio, l'app di musica sopra menzionata potrebbe rilevare se l'utente ha un piano dati e mostrare le dimensioni del file in modo che possa vedere il costo di un file.
Contribuisci a evitare esperienze compromesse
Spesso gli utenti eseguono l'hacking di un'esperienza senza rendersi conto di farlo. Ad esempio, prima dell'esistenza di app web per la condivisione di file basate su cloud, era normale che gli utenti salvassero file di grandi dimensioni e li allegassero alle email per poter continuare a modificarli da un altro dispositivo. Un'interfaccia utente efficace risolve il problema che gli utenti stanno cercando di risolvere senza coinvolgerli nell'esperienza compromessa. Ad esempio, fornisci un modo per condividere file di grandi dimensioni tra dispositivi, anziché rendere più intuitivo l'allegato di file di grandi dimensioni alle email.
Trasferire le esperienze da un dispositivo all'altro
Quando crei contenuti per reti instabili, prova a sincronizzarli non appena la connessione migliora in modo che l'esperienza sia trasferibile. Ad esempio, immagina che un'app di viaggi perda la connessione di rete a metà di una prenotazione. Quando la connessione viene reimpostata, l'app si sincronizza con l'account dell'utente, che può continuare la prenotazione sul proprio computer e godere di un'esperienza fluida.
Comunica all'utente lo stato dei suoi dati. Ad esempio, puoi mostrare se l'app è stata sincronizzata. Fornisci informazioni, se possibile, ma cerca di non sommergerli con troppi messaggi.
Creare esperienze di design inclusive
Quando progetti l'esperienza utente, cerca di essere inclusivo fornendo elementi di design significativi, un linguaggio semplice, un'iconografia standard e immagini significative che guidino l'utente a completare l'azione o l'attività senza intralciarlo.
Usa un linguaggio semplice e chiaro
Una buona UX non si basa solo sulla progettazione dell'interfaccia. Include il percorso che un utente segue nella tua app e tutto ciò che incontra lungo il percorso, incluso il linguaggio utilizzato dall'app per descrivere il percorso. Quando spieghi i componenti dell'interfaccia utente o lo stato dell'app, evita il gergo tecnico. Spesso la parola "offline" non è sufficientemente chiara per indicare all'utente cosa sta facendo la tua app.
Utilizzare più dispositivi di progettazione per creare esperienze utente accessibili
Utilizza il linguaggio, il colore e i componenti visivi per mostrare uno stato o un cambiamento di stato. L'utilizzo del solo colore per mostrare lo stato può essere difficile da notare per gli utenti o addirittura completamente inaccessibile per gli utenti con disabilità visive. Inoltre, poiché il design web tende a utilizzare il grigio per gli elementi disattivati, l'utilizzo di un'interfaccia utente in grigio per indicare che l'app è offline può creare confusione su cosa può fare l'app quando è offline, soprattutto se utilizzi solo il colore per indicare lo stato.
Per evitare fraintendimenti, comunica all'utente gli stati dell'app in più modi, ad esempio con colori, etichette e componenti dell'interfaccia utente.
Utilizza icone che trasmettano un significato
Assicurati di utilizzare etichette di testo significative accanto alle icone. Le icone da sole possono essere confusive, soprattutto perché il concetto di "offline" sul web è relativamente nuovo. Altri casi di icone poco chiare includono l'utilizzo di un dischetto per rappresentare la funzionalità "Salva", che può non avere significato per gli utenti più giovani che non hanno mai visto un dischetto, nonché l'icona del menu a tre linee.
Quando inserisci un'icona offline, mantieni la coerenza con le immagini standard del settore, se esistenti, e fornisci un'etichetta e una descrizione di testo. Ad esempio, puoi usare un'icona di download per indicare il salvataggio per l'utilizzo offline e un'icona di sincronizzazione per un'azione che prevede la sincronizzazione. Fai attenzione quando utilizzi icone per indicare uno stato che potrebbe essere interpretato come un'azione di salvataggio o download.
Per ulteriori spunti, consulta l'insieme di icone di Material Design.
Utilizzare layout scheletro e altri meccanismi di feedback
Mentre l'app carica i contenuti, mostra all'utente che è in corso il caricamento in modo che non ritenga che sia inaccessibile. Un modo per farlo è utilizzare un layout scheletro, una versione in wireframe della tua app che viene visualizzata durante il caricamento dei contenuti. Valuta anche la possibilità di utilizzare un'interfaccia utente di preloader con un'etichetta di testo che comunica all'utente che l'app è in fase di caricamento o un'animazione leggermente pulsante per il wireframe in modo da dare l'impressione che sia attivo e in fase di caricamento. Ciò rassicura l'utente che qualcosa sta accadendo e aiuta a evitare invii ripetuti o aggiornamenti non necessari.
Mostra lo stato di un'azione fornendo un feedback. Ad esempio, se un utente sta modificando un documento offline, ti consigliamo di modificare il design del feedback in modo che sia visibilmente diverso da quando è online, ma che mostri comunque che il file è stato "salvato" e verrà sincronizzato quando avrà una connessione di rete. In questo modo, l'utente viene informato su come funziona la tua app e viene rassicurato sul fatto che la sua attività o azione è stata memorizzata, il che può aumentare la sua fiducia 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, per dimostrare ciò, mostrano una finestra di dialogo modale di caricamento intrusiva 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, quindi l'interfaccia utente gli impedirà di fare altro.
Evita le richieste di rete che bloccano i contenuti. Consenti all'utente di continuare a navigare nella tua app e mettere in coda le attività che verranno eseguite e sincronizzate quando la connessione sarà migliorata.
Progettare per il prossimo miliardo
In molte regioni, i dispositivi di fascia bassa sono comuni, la connettività non è affidabile e per molti utenti i dati sono estremamente costosi. Guadagna la fiducia degli utenti adottando un approccio trasparente e parsimonioso con i dati. Trova il modo di aiutare gli utenti con connessioni scadenti e semplifica l'interfaccia per velocizzare le attività. Prova sempre a chiedere agli utenti prima di scaricare contenuti che richiedono un volume elevato di dati.
Offri opzioni a bassa larghezza di banda per gli utenti con connessioni lente. Fornisci asset di dimensioni ridotte su connessioni di rete più lente o offri la possibilità di scegliere asset di alta o bassa qualità.
Conclusione
L'istruzione è fondamentale per l'esperienza utente offline perché gli utenti non la conoscono. Per aiutarli a imparare, prova a creare associazioni con concetti familiari, ad esempio spiegando che il download per un uso successivo è lo stesso che mettere i dati offline.
Quando progetti per connessioni di rete instabili, ricorda queste linee guida:
- Progettare per il successo, il fallimento e l'instabilità di una connessione di rete.
- I dati possono essere costosi, quindi considera le esigenze dell'utente.
- Per la maggior parte degli utenti a livello globale, l'ambiente tecnologico è quasi esclusivamente mobile.
- I dispositivi di fascia bassa sono molto comuni, con spazio di archiviazione, memoria e potenza di elaborazione limitati, display piccoli e qualità del touchscreen inferiore. Assicurati che il rendimento sia parte del processo di progettazione.
- Consenti agli utenti di sfogliare la tua applicazione quando sono offline.
- Informare gli utenti del loro stato attuale e delle modifiche degli stati.
- Prova a fornire i dati offline per impostazione predefinita se la tua app non richiede molti dati.
- Se l'app richiede un utilizzo intensivo dei dati, spiega agli utenti come scaricarla per l'uso offline.
- Trasferisci le esperienze tra dispositivi.
- Utilizza linguaggio, icone, immagini, tipografia e colori per esprimere le idee all'utente.
- Fornisci rassicurazioni e feedback per aiutare l'utente.