La visualizzazione dei dati può migliorare l'esperienza del Web mobile?

Pubblicato: 2022-03-10
Riassunto rapido ↬ Poiché sempre più traffico web proviene da utenti mobili, i nostri siti web devono essere nella posizione migliore per servirli. La cosa più semplice da fare sarebbe rimuovere i contenuti non necessari dal sito. Tuttavia, potrebbe non essere sempre la soluzione migliore. In questo articolo, Suzanne Scacca propone alcuni modi per trasformare i contenuti essenziali in elementi grafici per risparmiare spazio, creare un'interfaccia utente più coinvolgente e preservare l'integrità generale dei tuoi contenuti sui dispositivi mobili.

Può essere difficile dare la priorità all'esperienza mobile quando spesso sembra un compromesso. Non includere tanto testo. Rimuovi alcune delle tue immagini. Stai lontano dalle funzionalità che intralciano il percorso del visitatore mobile. È un po' come un genitore che ti dice: "Esci e divertiti, ma non fare X, Y o Z!"

Non è necessariamente che un visitatore mobile abbia bisogno di una pagina più breve, meno testo o meno immagini per consumare più facilmente i contenuti su uno smartphone. Hanno solo bisogno del contenuto che gli dai per non sentirsi così tanto lavoro.

Se guardi più da vicino le tue pagine, potresti scoprire che parte del contenuto scritto può essere convertito in visualizzazioni di dati. Quindi, oggi esamineremo alcune cose che puoi fare per iniziare a convertire più contenuti in grafica e migliorare le esperienze dei visitatori mobili nel processo.

Strumenti per dati quantitativi

Molti designer di UX hanno un po' paura dei dati, ritenendo che richiedano una profonda conoscenza della statistica e della matematica. Sebbene ciò possa essere vero per la scienza dei dati avanzata, non è vero per l'analisi dei dati di ricerca di base richiesta dalla maggior parte dei designer di UX. Leggi un articolo correlato →

Altro dopo il salto! Continua a leggere sotto ↓

1. Vai oltre i tradizionali formati di visualizzazione dei dati

Quando pensi di visualizzare i dati in un formato grafico, cosa immagini? Probabilmente grafici e grafici come questo:

Infografica Visual.ly: statistiche sul lavoro di web designer e sviluppatore web
Un'istantanea di un'infografica di Visual.ly che mostra le statistiche sul lavoro di web designer e sviluppatore web. (Fonte immagine: Visual.ly) (Anteprima grande)

Questo screenshot proviene da un'infografica Visual.ly che confronta web designer e sviluppatori. Questo particolare pezzo tratta i dati statistici relativi ai lavori, quindi ha senso che vengano tradotti in formati di grafico a barre e grafico a linee.

Come scrittore, sono un grande fan di questo tipo di visualizzazione dei dati perché dover scrivere le statistiche può essere un grosso problema. Come so che c'è una differenza significativa tra i punti dati, ma posso usare solo caratteri in grassetto e punti elenco così tante volte prima che i lettori inizino a cercare la prossima nuova cosa interessante su cui concentrarsi.

Quando i set di dati forti sono progettati piuttosto che scritti, è meno probabile che i lettori saltino e perdano involontariamente informazioni critiche. Ma non sono solo i dati che possono essere visualizzati. Prendi questo altro segmento dall'infografica, ad esempio:

Infografica Visual.ly: web designer vs sviluppatore web destro vs cervello sinistro
Un'istantanea di un'infografica di Visual.ly che mostra il pensiero del web designer contro lo sviluppatore web destro e sinistro. (Fonte immagine: Visual.ly) (Anteprima grande)

Questo potrebbe essere stato scritto come un paragrafo (es. "_In generale, i web designer sono pensatori con il cervello giusto, sfruttando l'intuizione, la creatività, blah blah blah…_"). Potrebbe anche essere visualizzato come una tabella:

Web designer Sviluppatore web
Emisfero cerebrale Destra Sinistra
Guidata da Intuizione Logica
Approccio Creatività Pensiero lineare
Forza Immaginazione Tecnico

Anche se questo sarebbe stato forse più facile da leggere di un muro di testo, non è così interessante come il grafico sopra.

Per identificare diversi tipi di dati che vale la pena trasformare in grafici, i web designer dovranno pensare fuori dagli schemi. Ti consiglio di iniziare a familiarizzare con i diversi tipi di visualizzazioni di dati esistenti. Puoi usare la Biblioteca della Duke University per questo. Ha un'intera pagina che mostra come diversi tipi di informazioni possono essere tradotti in grafica, come questo esempio di grafico a dispersione:

Biblioteca della Duke University - esempio di visualizzazione del grafico a dispersione
La Biblioteca della Duke University fornisce un esempio di visualizzazione di un grafico a dispersione. (Fonte immagine: Biblioteca della Duke University) (Anteprima grande)

The Pudding ha preso questo concetto di base di tracciare punti dati nel tempo e lo ha trasformato in qualcosa di unico nel suo articolo "Colorism in High Fashion".

Questa è una grafica che rappresenta lo spettro dei toni della pelle che sono stati presentati sulla copertina di Vogue :

La grafica Pudding "Colorism in High Fashion" - tendenze nei toni della pelle
The Pudding descrive le tendenze nei toni della pelle dei modelli di copertina di Vogue nel suo articolo "Colorism in High Fashion". (Fonte immagine: The Pudding) (Anteprima grande)

Questo è un modo molto più efficace e accattivante per trasmettere queste informazioni piuttosto che chiedere a uno scrittore di dire: "Negli oltre 200 numeri della rivista, il 75% dei modelli di copertina di Vogue tende maggiormente a tonalità della pelle più chiare".

Detto questo, questo grafico da solo non è un grafico a dispersione in quanto rappresenta solo la quantità e le tendenze. Tuttavia, lo scorrimento alla fine lo trasforma in un grafico a dispersione:

La grafica "Colorism in High Fashion" di Pudding - grafica della trama a dispersione dei toni della pelle
The Pudding utilizza un grafico a dispersione per mostrare come le tonalità della pelle del modello di copertina di Vogue sono cambiate nel tempo. (Fonte immagine: The Pudding) (Anteprima grande)

Nota come ciascuna delle sfere è stata estratta su una linea temporale, che rappresenta i volti dei modelli sulle copertine delle riviste. Questo non è il modo tradizionale di utilizzare un grafico a dispersione, ma, in questo caso, funziona davvero bene. E, ancora una volta, fa un lavoro molto più efficace nel trasmettere il punto sul dispositivo mobile rispetto a un muro di testo.

Mentre cerchi modi per farlo nel tuo lavoro, concentrati sui seguenti elementi:

  • Dati statistici,
  • Brevi elenchi puntati,
  • Argomenti altamente complessi,
  • Spiegazioni passo dopo passo,
  • Riepiloghi di pagine o argomenti.

Questi presentano le migliori opportunità per trasformare dati o argomenti essenziali in visualizzazioni.

2. Progetta le tue visualizzazioni dei dati in modo che siano filtrabili

Certo, non vuoi esagerare. Nella tua missione di preservare il messaggio del tuo sito web sui dispositivi mobili, non vuoi creare così tanti elementi grafici da compromettere la velocità della pagina o da farli sentire opprimente.

Una soluzione al sovraccarico della visualizzazione dei dati consiste nel creare un unico elemento grafico, ma utilizzare i filtri per controllare quali set di dati vengono visualizzati. Questo non solo ti consente di fornire una tonnellata di informazioni visive in una minore quantità di spazio, ma può anche diventare un vantaggio competitivo. Lascia che ti mostri un esempio.

Il motivo per cui un CDN è utile è perché avvicina geograficamente il tuo sito Web al tuo pubblico di destinazione. Se la CDN non ha la portata per farlo, allora non ne vale la pena. Ecco perché, tra tutte le considerazioni che le persone devono fare quando trovano un fornitore, devono guardare dove si trovano effettivamente i loro punti di presenza.

Ecco come Google Cloud visualizza queste informazioni per la sua rete di distribuzione dei contenuti:

PoP PoP di Google Cloud CDN
Google Cloud utilizza una mappa statica per mostrare le sue posizioni PoP CDN a potenziali utenti. (Fonte immagine: Google Cloud) (Anteprima grande)

Questo è un ottimo grafico in quanto mostra dove sono le posizioni della cache e quanto è ampia l'area coperta dalla rete. Tuttavia, questa è un'immagine statica, quindi quello che vedi è quello che ottieni. Google deve utilizzare il resto della pagina per elencare tutte le principali città in cui ha una presenza CDN:

Memorizzazione nella cache di Google Cloud CDN - elenco di città
Google Cloud pubblica un elenco di tutte le posizioni della cache CDN nel mondo. (Fonte immagine: Google Cloud) (Anteprima grande)

Ma questo è ciò di cui sto parlando. Questo elenco dovrebbe far parte della visualizzazione.

Akamai, un concorrente di Google Cloud CDN, ha progettato la sua mappa della rete multimediale in questo modo:

Mappa della rete di distribuzione dei media Akamai: posizioni di archiviazione e media
La mappa della rete di distribuzione dei media di Akamai mostra tutti i suoi punti di presenza multimediali e di archiviazione. (Fonte immagine: Akamai) (Anteprima grande)

Su questa mappa puoi vedere la rete di distribuzione dei contenuti multimediali di Akamai (in arancione) e le relative posizioni di archiviazione e multimediali (in rosa).

I potenziali utenti interessati ad approfondire i dati possono utilizzare i filtri nella parte superiore della pagina. Ad esempio, ecco come appare la mappa quando qualcuno effettua una ricerca nella regione asiatica:

Mappa della rete di distribuzione dei media Akamai - regione asiatica
Mappa della rete di distribuzione dei media di Akamai con particolare attenzione alla regione asiatica. (Fonte immagine: Akamai) (Anteprima grande)

E questo è ciò che vedono quando scelgono di confrontare la rete di storage di Akamai con i suoi concorrenti:

Mappa della rete di distribuzione dei media Akamai - Storage in Asia rispetto alla concorrenza
La mappa della rete di distribuzione dei media di Akamai è impostata per visualizzare la rete di archiviazione asiatica di Akamai rispetto ai suoi concorrenti. (Fonte immagine: Akamai) (Anteprima grande)

Questo design di visualizzazione dei dati non solo consente ai visitatori di esaminare da vicino i dati per loro più rilevanti, ma aiuta anche nel loro processo decisionale.

Questo approccio è davvero utile se vuoi trasformare un intero gruppo di dati in una visualizzazione dei dati senza dover sovraccaricare la pagina con esso. E con questo particolare modello di filtraggio, puoi risparmiare ai tuoi visitatori il problema di dover pizzicare per ingrandire e rimpicciolire la grafica. Possono personalizzare la visualizzazione da soli e accedere facilmente ai bit più rilevanti.

3. Rendi le tue visualizzazioni dei dati interattive

Un'altra cosa che puoi fare per racchiudere un sacco di informazioni in un unico grafico è rendere le visualizzazioni dei dati interattive. Questo non solo ridimensionerà la tua interfaccia utente mobile, ma farà sì che i tuoi visitatori si mettano in pausa e si prendano davvero del tempo per comprendere le informazioni che vengono mostrate.

Questo è un post recente di Emojipedia. L'articolo condivide i risultati di uno studio condotto sull'uso delle emoji durante il coronavirus. È una lettura fantastica ed è piena zeppa di visualizzazioni di dati come questa:

Articolo Emojipedia - tendenze emoji del coronavirus
Un articolo di Emojipedia sull'utilizzo delle emoji del coronavirus include visualizzazioni di dati in tutto. (Fonte immagine: Emojipedia) (Anteprima grande)

Il design è sicuramente accattivante, ma non è facile vedere tutti i dettagli all'interno della grafica su mobile. È qui che l'interattività potrebbe tornare utile.

Rendendo selezionabile ciascuna delle barre nel grafico, le persone potrebbero ottenere maggiori informazioni sull'emoji, vedere chiaramente gli aumenti percentuali e così via.

Qualcosa che non ti ho mostrato nell'ultimo punto è che la mappa CDN di Akamai è interattiva:

Mappa interattiva della rete di distribuzione dei media Akamai - sedi di Osaka, in Giappone
La mappa della rete di distribuzione dei media di Akamai è interattiva. (Fonte immagine: Akamai) (Anteprima grande)

Questo è l'approccio esatto che suggerirei per il grafico a barre di Emojipedia. Trasformando ogni punto dati in un elemento cliccabile, gli utenti non devono lottare per ottenere tutte le informazioni di cui hanno bisogno né sovraccaricarli con troppi dati all'interno di un singolo grafico.

La cosa bella dell'interattività è che puoi applicarla anche a un'ampia gamma di visualizzazioni di dati.

Ecco un esempio di grafico a bolle di Information Is Beautiful:

Information Is Beautiful - Grafico a bolle delle più gravi violazioni dei dati globali
Un grafico di Information Is Beautiful che raffigura le violazioni dei dati più gravi in ​​tutto il mondo in formato grafico a bolle. (Fonte immagine: Information Is Beautiful) (Anteprima grande)

Quando i visitatori fanno clic su una delle bolle, vengono rivelate ulteriori informazioni sulla violazione della sicurezza:

Le informazioni sono belle: violazione della sicurezza dello zoom e informazioni sulla perdita di dati
Un grafico di Information Is Beautiful con informazioni su una grave violazione della sicurezza di Zoom e perdita di dati. (Fonte immagine: Information Is Beautiful) (Anteprima grande)

Uno degli aspetti migliori dell'assegnazione delle priorità all'esperienza mobile è che ci consente di trovare soluzioni creative alla progettazione minima. E le interazioni sono davvero un ottimo modo per farlo poiché l'interfaccia utente rimane chiara e facile da navigare, ma al suo interno ci sono piccole pepite succose che aspettano di essere scoperte.

La visualizzazione dei dati è la chiave per una migliore esperienza mobile?

Ci sono molte cose che possiamo fare per migliorare l'esperienza dell'utente mobile. Se non hai considerato la visualizzazione dei dati parte di quella strategia, ora sarebbe un buon momento per in quanto ti consente di:

  • Condensare la quantità di spazio e tempo necessari per ottenere il tuo punto di vista,
  • Progetta le tue pagine in modo che siano visivamente più accattivanti,
  • Conserva la piena integrità della tua copia per i visitatori mobili e desktop.

Ciò, ovviamente, non significa che dovresti smettere di cercare modi per ridurre i contenuti sui dispositivi mobili. Se non è necessario o non aggiunge valore, dovrebbe andare. Ciò che resta può quindi essere valutato per un restyling della visualizzazione dei dati.