Una guida alla progettazione di esperienze web per reti lente e offline.
Questo articolo fornisce linee guida per la progettazione di come creare un'esperienza ottimale su reti lente e offline.
La qualità di una connessione di rete può essere influenzata da diversi fattori, tra cui:
- Scarsa copertura di un fornitore.
- Condizioni meteo estreme.
- Interruzioni di corrente.
- Entrare in "zone morte" permanenti come gli 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 o giorni specifici.
Il tuo obiettivo è offrire una buona esperienza 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 da porsi è: cosa significa successo e fallimento di una connessione di rete? Una connessione riuscita è la normale esperienza online della tua app. Tuttavia, l'errore di una connessione può riguardare sia lo stato offline dell'app sia il comportamento dell'app in caso di rete in ritardo.
Quando pensi al successo o al fallimento di una connessione di rete, devi porti queste importanti domande relative all'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 in caso di errore?
- Come fai a informare l'utente di quanto indicato sopra?
Informare gli utenti sul loro stato attuale e sul loro cambio di stato
Informare l'utente su entrambe le azioni che può comunque eseguire in caso di errore di rete e sullo stato attuale dell'applicazione. Ad esempio, una notifica potrebbe dire:
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 dalla tua applicazione. Le app come quelle del mercato azionario che danno la priorità alle informazioni correnti devono aggiornarsi automaticamente e inviare una notifica all'utente il prima possibile.
Ti consigliamo di comunicare all'utente che la tua app web è stata aggiornata "in background" utilizzando un segnale visivo come, ad esempio, un elemento toast di material design. Ciò comporta il rilevamento sia della presenza di un service worker e di un aggiornamento dei suoi contenuti gestiti. Puoi vedere un esempio di codice di questa funzione in attività qui.
Un esempio è lo stato della piattaforma Chrome, che pubblica una nota per l'utente quando l'app viene aggiornata.
Potresti anche mostrare sempre l'ultima volta che l'app è stata aggiornata in uno spazio in evidenza. Ciò è utile, ad esempio, per un'app per la conversione di valute.
Applicazioni come le app di notizie potrebbero mostrare una semplice notifica di aggiornamento con tocco per informare l'utente dei nuovi contenuti. Grazie all'aggiornamento automatico, gli utenti potrebbero perdere il punto in cui si trovano.
Aggiorna l'interfaccia utente in modo che rifletta lo stato contestuale attuale
Ogni bit dell'interfaccia utente può avere il proprio contesto e la propria funzionalità che cambiano a seconda che sia richiesta una connessione riuscita. Un esempio potrebbe essere un sito di e-commerce che può essere sfogliato offline. Il pulsante Acquista e i prezzi rimarranno disabilitati fino a quando la connessione non verrà ristabilita.
Altri tipi di stati contestuali potrebbero includere i dati. Ad esempio, l'applicazione finanziaria Robinhood consente agli utenti di acquistare azioni e utilizza colori e grafica per informare l'utente quando il mercato è aperto. L'intera interfaccia diventa bianca e diventa in grigio alla chiusura del mercato. Quando il valore delle azioni 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 modalità offline è un nuovo modello mentale per tutti. Devi informare gli utenti dei cambiamenti che si verificheranno in assenza di connessione. Informali su dove vengono salvati i dati di grandi dimensioni e fornisci le impostazioni per modificare il comportamento predefinito. Assicurati di utilizzare più componenti di progettazione dell'interfaccia utente come linguaggio informativo, icone, notifiche, colore e immagini per trasmettere queste idee collettivamente, anziché 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 propri dati solo con una connessione di rete. Cerca di rendere l'esperienza il più stabile possibile. Una connessione instabile renderà la tua app inaffidabile, mentre un'app che riduce l'impatto di un guasto di rete risulterà magica per l'utente.
I siti di notizie potrebbero trarre vantaggio dal download automatico delle notizie più recenti e dal salvataggio automatico delle ultime notizie, in modo che un utente possa leggere le notizie di oggi senza connessione, magari scaricando il testo senza le immagini degli articoli. Inoltre, adattati al comportamento dell'utente. Ad esempio, se la sezione sportiva è quella che solitamente visualizzano, impostalo come download prioritario.
Informa l'utente quando l'app è pronta per essere utilizzata offline
Al primo caricamento di un'app web, devi indicare all'utente se è pronta per l'utilizzo offline. Utilizza 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 è stato scaricato un file di dati.
Anche in questo caso pensa al linguaggio che utilizzi per assicurarti che sia adatto al tuo pubblico. Assicurati che il messaggio sia lo stesso in tutte le istanze in cui viene utilizzato. Il termine offline viene generalmente frainteso da un pubblico non tecnico, pertanto usa un linguaggio basato sulle azioni in cui il pubblico possa immedesimarsi.
Rendi "salva per offline" una parte ovvia dell'interfaccia per le app con uso intensivo di dati
Se un'applicazione utilizza grandi quantità di dati, assicurati che esista un'opzione o un segnaposto per aggiungere un elemento da utilizzare offline anziché per il download automatico, a meno che un utente non abbia richiesto specificamente questo comportamento tramite un menu delle impostazioni. Assicurati che l'interfaccia utente di blocco o di download non sia oscurata da altri elementi dell'interfaccia utente e che la funzionalità sia evidente per l'utente.
Un esempio potrebbe essere un lettore musicale che richiede file di dati di grandi dimensioni. L'utente è a conoscenza del costo dei dati associato, ma potrebbe anche voler utilizzare il player offline. Il download di musica da utilizzare in un secondo momento richiede all'utente di pianificarlo in anticipo, perciò è possibile che sia necessario approfondire l'argomento durante l'onboarding.
Chiarisci che cosa è disponibile offline
Descrivi chiaramente l'opzione che offri. Potrebbe essere necessario mostrare una scheda o un'impostazione che mostra una "libreria offline" o un indice di contenuti, in modo che l'utente possa vedere facilmente cosa ha memorizzato sul proprio smartphone e cosa deve essere salvato. Assicurati che le impostazioni siano concise e indichi chiaramente dove verranno 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 li salvano per l'utilizzo offline quando dispongono di connettività.
Gli utenti che utilizzano piani dati possono evitare di scaricare file di grandi dimensioni per paura dei costi, quindi ti consigliamo di visualizzare anche un costo associato in modo che gli utenti possano fare un confronto attivo per un file o un'attività specifici. Ad esempio, se l'app di musica riportata sopra potrebbe rilevare se l'utente utilizza un piano dati e mostrare le dimensioni del file in modo che gli utenti possano vedere il costo di un file.
Contribuisci a prevenire le esperienze compromesse
Spesso gli utenti compromettono un'esperienza senza rendersene conto. Ad esempio, prima delle app web per la condivisione di file basate su cloud, era comune per gli utenti salvare file di grandi dimensioni e allegarli alle email in modo da poter continuare a modificare i file da un altro dispositivo. È importante non farsi coinvolgere dall'esperienza di compromissione, ma piuttosto guardare a ciò che sta cercando di ottenere. In altre parole, invece di pensare a un modo per rendere più facile l'aggiunta di file di grandi dimensioni, risolvi il problema della condivisione di file di grandi dimensioni su più dispositivi.
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. Non essere in grado di trasferire le esperienze può essere incredibilmente scioccante per gli utenti.
Informare l'utente sullo stato attuale dei suoi dati. Ad esempio, puoi indicare se l'app è stata sincronizzata. Fornisci loro informazioni, ove possibile, ma cerca di non sovraccaricarli di messaggi.
Crea esperienze di design inclusive
La progettazione punta a essere inclusiva, fornendo dispositivi dal design significativo, linguaggio semplice, icone standard e immagini significative che aiutino l'utente a completare l'azione o l'attività, anziché ostacolare il suo avanzamento.
Utilizza un linguaggio semplice e conciso
Una buona esperienza utente non si limita a un'interfaccia ben progettata. Include il percorso seguito da un utente e le parole utilizzate nell'app. Evita il gergo tecnologico quando spieghi lo stato dell'app o i singoli componenti dell'interfaccia utente. Tieni presente che la frase "app offline" potrebbe non comunicare all'utente lo stato attuale dell'app.
Utilizza più dispositivi di progettazione per creare esperienze utente accessibili
Utilizza la lingua, il colore e i componenti visivi per dimostrare un cambiamento di stato o stato attuale. L'utilizzo esclusivo del colore per dimostrare lo stato potrebbe non essere notato dall'utente e potrebbe essere inaccessibile per gli utenti con disabilità visive. Inoltre, istintivamente per i progettisti possono usare un'interfaccia utente grigia per rappresentare offline, ma questo può avere un significato caricato sul web. Una UI in grigio, come gli elementi di input, in un modulo, indica che un elemento è disattivato. Questo può creare confusione se utilizzi solo il colore per raffigurare lo stato.
Per evitare malintesi, esprimi stati diversi all'utente in più modi, ad esempio con colore, etichette e componenti dell'interfaccia utente.
Utilizza icone che comunicano il significato
Assicurati che le informazioni vengano comunicate correttamente con etichette di testo e icone significative. Anche le icone possono presentare problemi, poiché il concetto di offline sul web è relativamente nuovo. Gli utenti potrebbero fraintendere le icone usate da soli. Ad esempio, l'uso di un floppy disc per salvare ha senso per una generazione più vecchia, ma i giovani utenti che non hanno mai visto un floppy disc potrebbero essere confusi dalla metafora. Allo stesso modo, è risaputo che l'icona del menu "hamburger" confonde gli utenti quando viene presentata senza un'etichetta.
Quando introduci un'icona offline, cerca di mantenere la coerenza con le immagini standard del settore (quando esistono) e fornisci un'etichetta di testo e una descrizione. Ad esempio, il salvataggio per offline potrebbe essere un'icona di download tipica o se l'azione prevede la sincronizzazione. Alcune azioni possono essere interpretate come un salvataggio per offline anziché come una dimostrazione dello stato di una rete. Pensa all'azione che stai cercando di trasmettere, anziché presentare all'utente un concetto astratto. Ad esempio, il salvataggio o il download dei dati si basa su azioni.
Il termine offline può indicare una serie di fattori a seconda del contesto, ad esempio download, esportazione, fissaggio e così via. Per maggiore ispirazione, dai un'occhiata al set di icone di Material Design.
Utilizzare la disposizione degli scheletri con altri meccanismi di feedback
Uno scheletro è essenzialmente una versione mesh della tua app che viene visualizzata durante il caricamento dei contenuti. Ciò consente di dimostrare all'utente che i contenuti stanno per essere caricati. Prendi in considerazione anche l'utilizzo di un'interfaccia utente di preloader, con un'etichetta di testo che informa l'utente che l'app è in fase di caricamento. Un esempio potrebbe essere la pulsante pulsando il contenuto frame, dando all'app la sensazione che sia attivo e caricato. Questo rassicura l'utente circa qualcosa e aiuta a evitare nuovi invii o aggiornamenti della tua app.
Non bloccare i contenuti
In alcune applicazioni, un utente potrebbe attivare un'azione come la creazione di un nuovo documento. Alcune app tenteranno di connettersi a un server per sincronizzare il nuovo documento e per dimostrare che ciò mostra una finestra di dialogo modale di caricamento intrusivo che copre l'intero schermo. Questo può funzionare bene se l'utente ha una connessione di rete stabile, ma se la rete è instabile non sarà in grado di uscire da questa azione e la UI gli impedirà di fare altro. Evitate le richieste di rete che bloccano i contenuti. Consenti all'utente di continuare a sfogliare l'app e mettere in coda le attività che verranno eseguite e sincronizzate una volta migliorata la connessione.
Dimostrare lo stato di un'azione fornendo un feedback agli utenti. Ad esempio, se un utente sta modificando un documento, può essere opportuno 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 dispone di una connessione di rete. In questo modo, l'utente verrà informato sui diversi stati disponibili e lo rassicurerà in merito all'archiviazione della sua attività o azione. Ciò offre il vantaggio aggiuntivo all'utente di acquisire una maggiore sicurezza nell'uso dell'applicazione.
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 inconvenienti. Per conquistare la fiducia degli utenti, è necessario essere trasparenti e parsimoniosi nei confronti dei dati. Pensa a come aiutare gli utenti con connessioni deboli e semplifica 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 ridotta per gli utenti con connessioni in ritardo. Quindi, se la connessione di rete è lenta, fornisci asset di piccole dimensioni. Offri la possibilità di scegliere asset di alta o bassa qualità.
Conclusione
L'istruzione è fondamentale per l'esperienza utente offline, in quanto gli utenti non hanno dimestichezza con questi concetti. Prova a creare associazioni con elementi che conosci.Ad esempio, scaricare per un utilizzo futuro equivale a eseguire l'offlining 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 comuni, 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 è ricca di dati, spiega agli utenti come possono scaricarla per l'utilizzo offline.
- Rendere le esperienze trasferibili tra dispositivi.
- Utilizza linguaggio, icone, immagini, tipografia e colori insieme per esprimere le tue idee all'utente.
- Fornisci rassicurazione e feedback per aiutare l'utente.