Linee guida per la progettazione dell'esperienza utente offline

Una guida alla progettazione di esperienze web per reti lente e offline.

Mustafa Kurtuldu
Mustafa Kurtuldu
Thomas Steiner
Thomas Steiner

Questo articolo fornisce linee guida di progettazione su come creare un'esperienza ottimale sia su reti lente che offline.

La qualità di una connessione di rete può essere influenzata da una serie di fattori, ad esempio:

  • Scarsa copertura di un fornitore.
  • Condizioni meteo estreme.
  • Interruzioni di corrente.
  • Ingresso in "zone morte" permanenti come 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 determinato come quelle negli aeroporti o negli hotel.
  • Pratiche culturali che richiedono un accesso a internet limitato o nullo 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 quando hanno problemi con la connessione di rete

La prima domanda da porsi è: qual è il successo e l'insuccesso di una connessione di rete? Una connessione riuscita è la normale esperienza online dell'app. Tuttavia, l'errore di una connessione può essere sia lo stato offline dell'app sia il comportamento dell'app in caso di ritardo di rete.

Quando pensi al successo o al fallimento di una connessione di rete, devi porti queste importanti domande sull'esperienza utente:

  • Quanto tempo devi attendere per determinare il successo o il fallimento di una connessione?
  • Che cosa puoi fare mentre si determina il successo o il fallimento?
  • Cosa devi fare in caso di errore?
  • Come fai a informare l'utente di quanto sopra?

Informare gli utenti sul loro stato attuale e sul loro cambio di stato

Informa l'utente delle azioni che può comunque eseguire in caso di errore di rete e dello stato attuale dell'applicazione. Ad esempio, una notifica potrebbe dire:

Sembra che la tua connessione di rete sia scarsa. Niente paura. I messaggi verranno inviati quando la rete verrà ripristinata.

L'app di messaggistica con emoji Emojoy informa l'utente quando si verifica un cambiamento di stato.
Informa chiaramente l'utente il prima possibile quando si verifica un cambiamento di stato.
L'app I/O 2016 che informa l'utente quando si verifica un cambio di stato.
L'app Google I/O ha utilizzato un "toast" per comunicare all'utente quando era offline.

Informa 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 funzione qui.

Un esempio è lo Stato della piattaforma Chrome, che pubblica una nota per l'utente quando l'app viene aggiornata.

Un'app meteo di esempio.
Alcune app, come l'app meteo, devono essere aggiornate automaticamente perché i dati precedenti non sono utili.
Lo stato di Chrome utilizza un avviso popup
App come Stato di Chrome consentono all'utente di sapere quando i contenuti sono stati aggiornati tramite un avviso popup.

Puoi anche mostrare sempre l'ultima volta che l'app è stata aggiornata in uno spazio in evidenza. Questo è utile, ad esempio, per un'app per la conversione di valute.

L'app Material Money non è aggiornata.
Material Money memorizza le tariffe...
Il denaro materiale è stato aggiornato
...e invia una notifica all'utente quando l'app è stata aggiornata.

Applicazioni come le app di notizie potrebbero mostrare una semplice notifica di aggiornamento con tocco che informa l'utente della presenza di nuovi contenuti. L'aggiornamento automatico farebbe perdere il punto di accesso degli utenti.

Un'app di notizie di esempio, Tailpole nello stato normale
Tailped, un giornale online, scaricherà automaticamente le ultime notizie...
Esempio di app di notizie, Pezzo di corda quando è pronta per essere aggiornata
...ma consenti agli utenti di aggiornare manualmente i contenuti in modo da non perdere il punto in un articolo.

Aggiornare 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 cambieranno a seconda che richieda una connessione riuscita. Un esempio potrebbe essere un sito di e-commerce in cui è possibile navigare offline. Il pulsante Acquista e i prezzi verranno disattivati fino a quando non verrà ristabilita la connessione.

Potrebbero essere inclusi i dati anche in altre forme di stati contestuali. 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 per poi diventare grigia alla chiusura del mercato. Quando il valore delle azioni aumenta o diminuisce, ogni singolo widget azionario 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 di quali cambiamenti avverranno quando non hanno una connessione. Indica dove vengono salvati i dati di grandi dimensioni e imposta le impostazioni per modificare il comportamento predefinito. Assicurati di utilizzare più componenti di progettazione dell'interfaccia utente, come linguaggio informativo, icone, notifiche, colori e immagini, per trasmettere queste idee collettivamente anziché fare affidamento su una sola scelta di design, ad esempio un'icona da sola, per raccontare l'intera storia.

Offrire un'esperienza offline per impostazione predefinita

Se la tua app non richiede molti dati, memorizzali nella cache per impostazione predefinita. Gli utenti possono sentirsi sempre più infastiditi se possono accedere ai propri dati solo tramite una connessione di rete. Cerca di rendere l'esperienza il più stabile possibile. Una connessione instabile rende la tua app inaffidabile, pertanto un'app che riduce l'impatto di un errore di rete risulterà magica per l'utente.

I siti di notizie potrebbero trarre vantaggio dal download automatico e dal salvataggio automatico delle ultime notizie in modo che un utente possa leggere le notizie del giorno 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 gli utenti di solito visualizzano, impostala come download prioritario.

Il codino informa l'utente che è offline con vari widget di design.
Se il dispositivo è offline, Tailped avviserà l'utente con un messaggio di stato...
Il cordino ha un indicatore visivo che mostra quali sezioni sono pronte per l'uso offline.
informando l'utente che può continuare a usare l'app almeno parzialmente.

Informa l'utente quando l'app è pronta per l'utilizzo offline

Quando un'app web viene caricata per la prima volta, devi indicare all'utente se è pronta per l'utilizzo offline. A tale scopo, 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.

Pensa sempre al linguaggio che stai utilizzando 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 esperto, quindi usa un linguaggio basato sull'azione che possa coinvolgere il pubblico.

App I/O offline.
L'app Google I/O 2016 avvisa l'utente quando è pronta per l'utilizzo offline...
Il sito sullo stato di Chrome è offline.
...e lo stesso fa il sito Chrome Platform Status, che include informazioni sullo spazio di archiviazione occupato.

Rendi l'opzione "Salva per offline" una parte ovvia dell'interfaccia per le applicazioni con molti dati

Se un'applicazione utilizza grandi quantità di dati, assicurati che sia disponibile un'opzione o un blocco per aggiungere un elemento per l'utilizzo offline anziché per il download automatico, a meno che un utente non abbia specificatamente richiesto questo comportamento tramite un menu delle impostazioni. Assicurati che la UI di blocco o di download non sia nascosta 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 voler utilizzare il player offline. Per scaricare musica da utilizzare in un secondo momento, l'utente deve pianificare in anticipo, quindi potrebbe essere necessario approfondire questo aspetto durante l'onboarding.

Chiarisci cosa è disponibile offline

Indica chiaramente l'opzione offerta. Potresti dover mostrare una scheda o un'impostazione che mostra una "raccolta offline" o un indice di contenuti, in modo che l'utente possa facilmente vedere cosa ha archiviato sul proprio telefono e cosa deve essere salvato. Assicurati che le impostazioni siano concise e che indichino chiaramente dove verranno archiviati i dati e chi vi ha accesso.

Mostrare il costo effettivo di un'azione

Molti utenti paragonano la funzionalità offline al "download". Gli utenti di paesi in cui si verificano regolarmente problemi di connessione di rete o non sono disponibili spesso condividono contenuti con altri utenti o salvano i contenuti per l'utilizzo offline quando sono in contatto.

Gli utenti dei piani dati possono evitare di scaricare file di grandi dimensioni per paura di incorrere in 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, l'app di musica riportata sopra potrebbe rilevare se l'utente ha sottoscritto un piano dati e mostrare le dimensioni del file in modo che gli utenti possano vederne il costo.

Contribuisci a prevenire le esperienze compromesse

Spesso gli utenti hanno compromesso 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 la modifica da un dispositivo diverso. È importante non essere coinvolti nell'esperienza compromessa, ma piuttosto guardare a ciò che stanno cercando di ottenere. In altre parole, invece di pensare a come rendere più facile l'allegare un 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 instabili, prova a eseguire la sincronizzazione non appena la connessione migliora, in modo che l'esperienza sia trasferibile. Ad esempio, supponiamo 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, consentendo all'utente di continuare la prenotazione sul computer. Non essere in grado di trasferire le esperienze può essere molto fastidioso per gli utenti.

Informa l'utente dello stato attuale dei suoi dati. Ad esempio, puoi indicare se l'app è stata sincronizzata. Istruiscili, ove possibile, ma cerca di non sovraccaricare gli spettatori con i messaggi.

Crea esperienze di progettazione inclusive

La progettazione cerca di essere inclusiva fornendo dispositivi di design significativi, linguaggio semplice, iconografia standard e immagini significative che aiutino l'utente a completare l'azione o l'attività anziché ostacolare il suo progresso.

Utilizza un linguaggio semplice e conciso

Una buona esperienza utente non si basa solo su un'interfaccia ben progettata. Include il percorso seguito da un utente e le parole utilizzate nell'app. Evita il gergo tecnico quando spieghi lo stato dell'app o i singoli componenti dell'interfaccia utente. Tieni presente che l'espressione "app offline" potrebbe non comunicare all'utente lo stato attuale dell'app.

Cosa non fare
L'icona di un service worker non è un buon esempio.
Evita termini che non siano comprensibili per gli utenti non tecnici.
Cosa fare
Un'icona di download è un buon esempio.
Utilizza il linguaggio e le immagini che descrivono l'azione.

Utilizzare 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 agli utenti con disabilità visive. Inoltre, per i designer viene istinto a utilizzare l'interfaccia utente in grigio per la rappresentazione offline, ma può avere un significato caricato sul Web. Anche l'UI grigia, come gli elementi di input di un modulo, indica che un elemento è disattivato. Questo può causare 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.

Cosa non fare
Un cattivo esempio che utilizza solo il colore.
Evita di utilizzare il colore come unico strumento per descrivere ciò che sta succedendo.
Cosa fare
Un buon esempio di utilizzo di colore e testo per mostrare un errore.
Utilizza una combinazione di elementi di design per comunicare il significato.

Utilizzare icone che comunicano il significato

Assicurati che le informazioni siano comunicate correttamente con etichette di testo e icone significative. Le icone da sole possono presentare dei problemi, dal momento che il concetto di offline sul Web è relativamente nuovo. Gli utenti potrebbero fraintendere le icone utilizzate da sole. Ad esempio, l'utilizzo di un floppy disc per salvare è sensato per le generazioni più anziane, ma i giovani utenti che non hanno mai visto un floppy disc potrebbero essere confusi dalla metafora. Analogamente, è noto 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 di settore (quando esistono), oltre a fornire un'etichetta di testo e una descrizione. Ad esempio, il salvataggio per offline potrebbe essere una tipica icona di download oppure, se l'azione prevede la sincronizzazione, potrebbe trattarsi di un'icona di sincronizzazione. Alcune azioni possono essere interpretate come salvataggio per offline anziché come dimostrazione dello stato di una rete. Pensa all'azione che vuoi trasmettere anziché presentare all'utente un concetto astratto. Ad esempio, il salvataggio o il download dei dati si basa sulle azioni.

Vari esempi di icone che trasmettono le immagini offline

L'attività offline può essere associata a diversi fattori, a seconda del contesto, ad esempio download, esportazione, visualizzazione in primo piano e così via. Per ulteriori ispirazioni, consulta il set di icone Material Design.

Utilizzare la disposizione degli scheletri con altri meccanismi di feedback

Uno schema di layout è essenzialmente una versione wireframe della tua app che viene visualizzata durante il caricamento dei contenuti. In questo modo puoi dimostrare all'utente che i contenuti stanno per essere caricati. Potresti anche utilizzare anche un'interfaccia utente di preloader, con un'etichetta di testo che indichi all'utente che l'app è in fase di caricamento. Ad esempio, potresti far pulsare i contenuti wireframe dando all'app la sensazione che sia attiva e carica. In questo modo rassicura l'utente che qualcosa sta accadendo e aiuta a evitare reinvii o aggiornamenti della tua app.

Esempio di layout schema.
Durante il download dell'articolo viene mostrato uno schema di layout segnaposto...
Esempio di un articolo caricato.
...che viene sostituito con i contenuti reali al termine del download.

Non bloccare contenuti

In alcune applicazioni, un utente potrebbe attivare un'azione, ad esempio la creazione di un nuovo documento. Alcune app tenteranno di connettersi a un server per sincronizzare il nuovo documento e, a dimostrazione di ciò, visualizzano una finestra di dialogo modale di caricamento invasiva che copre l'intero schermo. Questo può andare 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 impedisce di fare altro. Le richieste di rete che bloccano i contenuti dovrebbero essere evitate. Consenti all'utente di continuare a sfogliare la tua app e accodare 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, è consigliabile modificare il design del feedback in modo che sia visibilmente diverso da quando si trova online, ma che mostri comunque che il suo file è stato "salvato" e che venga sincronizzato quando ha una connessione di rete. In questo modo l'utente verrà informato sui diversi stati disponibili e lo rassicurerà sul fatto che la sua attività o azione è stata archiviata. Questo offre il vantaggio aggiuntivo all'utente di acquisire una maggiore sicurezza nell'utilizzo dell'applicazione.

Progetta per il prossimo miliardo

In molte regioni i dispositivi di fascia bassa sono all'ordine del giorno, la connettività è inaffidabile e, per molti utenti, i dati sono inconvenienti. Devi conquistare la fiducia degli utenti usando i dati in modo trasparente e parsimonioso. Pensa a modi per aiutare gli utenti con connessioni di scarsa qualità 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, poiché gli utenti non hanno familiarità con questi concetti. Prova a creare associazioni con elementi che ti sono familiari.Ad esempio, scaricare per un utilizzo successivo equivale a eseguire l'offline.

Quando progetti connessioni di rete instabili, ricorda queste linee guida:

  • Progetta tenendo a mente il successo, gli errori e l'instabilità di una connessione di rete.
  • I dati possono essere costosi, quindi presta attenzione all'utente.
  • Per la maggior parte degli utenti a livello globale, l'ambiente tecnologico è quasi esclusivamente mobile.
  • Sono ormai comuni dispositivi di fascia bassa, con spazio di archiviazione, memoria e potenza di elaborazione limitati, nonché display di piccole dimensioni e una qualità del touchscreen inferiore. Assicurati che le prestazioni facciano 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 cambiamenti di stato.
  • Prova a fornire la modalità offline per impostazione predefinita se la tua app non richiede molti dati.
  • Se l'app utilizza molti dati, spiega agli utenti come possono scaricare l'app per utilizzarla offline.
  • Rendere le esperienze trasferibili tra dispositivi.
  • Usa lingua, icone, immagini, elementi tipografici e colori per esprimere le tue idee all'utente.
  • Fornisci rassicurazioni e feedback per aiutare l'utente.