Principali esempi di visualizzazione dei dati e design di dashboard

Pubblicato: 2022-03-11

La visualizzazione dei dati e la progettazione di dashboard sono sia arte che scienza e non sono così facili da creare come potrebbe sembrare a prima vista. In che modo i migliori designer UX e visual designer illustrano informazioni complesse senza confondere gli utenti?

Tre modi: una migliore comprensione dei principi dell'esperienza utente alla base di una buona progettazione di dashboard, l'applicazione dell'eccellenza grafica e la pratica.

Il design del dashboard UX segue principi e best practice specifici. L'eccellenza grafica, invece, richiede un esame più approfondito.

Best practice per la visualizzazione dei dati e la progettazione di dashboard — Le best practice per la visualizzazione dei dati e la progettazione di dashboard offrono agli utenti un modo efficiente e interessante per visualizzare e comprendere meglio idee complesse. (Ramozione)

L'eccellenza grafica è definita come:

Una presentazione ben progettata ed efficiente di dati interessanti.
Idee complesse comunicate con efficienza, chiarezza e precisione.
Dare allo spettatore il maggior numero di idee che richiedono la minor quantità di tempo in un piccolo spazio e utilizzando la minor quantità di inchiostro.
Dire la verità sui dati.

Un'eccellente risorsa per una migliore comprensione dell'eccellenza grafica è il lavoro di Edward Tufte. È considerato "Il Leonardo da Vinci dei dati" e ha un gran numero di opere pubblicate, libri e conferenze. David McCandless, che ha fondato Information is beautiful, un sito Web che rappresenta il meglio in termini di visualizzazione dei dati ed eccellenza grafica, è un'altra risorsa eccellente.

I principi della progettazione UX esemplare e dell'eccellenza grafica si applicano sia alla progettazione di dashboard che alle visualizzazioni dei dati. Ecco alcuni dei principali esempi di visualizzazione dei dati e progettazione di dashboard.

Le migliori visualizzazioni dei dati

Il marzo 1812 di Napoleone

La visualizzazione di Minard della marcia di Napoleone del 1812 è considerata uno dei "migliori disegni statistici mai creati": creare una visualizzazione con tutte le informazioni che ha fatto Minard sarebbe stato impossibile se non fosse stato per l'applicazione dell'eccellenza grafica.

Questa singola visualizzazione mostra il numero delle truppe di Napoleone per posizione, la temperatura sperimentata dalle truppe e il percorso che le truppe hanno intrapreso da e verso Mosca.

Un esempio di best practice per la visualizzazione dei dati — La marcia di Napoleone del 1812 è una delle più grandi visualizzazioni di Charles Minard del 1861, che mostra migliaia di punti dati utilizzando un'eccellenza grafica superiore.

La mappa del colera di John Snow

Il grafico di John Snow del 1854 che mostra l'ubicazione dei 13 pozzi pubblici di Londra e 578 morti per colera utilizzando barre impilate perpendicolarmente alla loro posizione: è facile da capire, rivela la verità nei dati e fornisce all'utente tutte le informazioni di cui ha bisogno per tracciare una corretta Conclusione sui decessi per colera.

Visualizzazione visiva dei dati mediante barre sovrapposte e una semplice mappa — La visualizzazione dei dati di John Snow è uno dei migliori esempi di come raccontare una storia con più punti dati e mantenerla sia coinvolgente che comprensibile.

Storia della musica rock

Rappresentando solo una frazione dell'intera visualizzazione dei dati, il grafico seguente mostra una porzione di oltre 30 stili musicali di oltre 700 artisti nel periodo dal 1955 al 1978.

Non rappresenta semplicemente artisti e stili, ma mostra influenze, il volume delle vendite di dischi, le categorie stilistiche e dove queste sono finite o continuate. Raggiungere questo tipo di eccellenza grafica non è cosa da poco.

Un vantaggio della visualizzazione dei dati sta aiutando a visualizzare informazioni altamente complesse. — Uno dei vantaggi della visualizzazione dei dati è la visualizzazione di informazioni estremamente complesse in un modo comprensibile e vantaggioso.

Dove la popolazione europea cresce e diminuisce

Un'eccellente visualizzazione dei dati che mostra come gestire un'immensa quantità di dati in modo semplice, ben progettato e veritiero. Ci sono anche filtri inclusi nella versione interattiva che consentono un'esplorazione ancora maggiore dei dati, come i tassi di natalità.

Un esempio di visualizzazione dei dati principale che mostra migliaia di punti dati in un grafico non complesso — Visualizzazione dei dati che mostra l'eccellenza grafica con migliaia di punti dati complessi.

Routine quotidiane di personaggi famosi iconici

Non solo questa visualizzazione dei dati è interessante, è un classico esempio di eccellenza grafica. In un unico grafico, possiamo vedere una rappresentazione dettagliata delle abitudini quotidiane, dei rituali, delle attività e delle priorità di personaggi famosi iconici.

Utilizzando un semplice grafico codificato a colori, questa visualizzazione è facile da capire, semplice, efficace e, soprattutto, informativa.

Progettazione del dashboard di visualizzazione dei dati che mostra molti punti dati — Visualizzazione dei dati che mostra più punti dati senza sovraccaricare l'utente. (Podio)

Grafica delle lingue del mondo

Questa classica visualizzazione dei dati mostra il numero di lingue che esistono sul pianeta, dove vengono parlate e chi le parla in varie zone del mondo.

Senza un alto livello di eccellenza grafica, sarebbe difficile mostrare così tanti dati in un modo così elegante che sia anche informativo e di facile comprensione.

Una delle tecniche di visualizzazione dei dati consiste nell'utilizzare grafici che rappresentano i dati. — Un'iconica visualizzazione dei dati che mostra migliaia di punti dati in un modo elegante e facile da comprendere.

I migliori design di dashboard

Affinché una dashboard sia considerata superiore, deve soddisfare una serie di criteri UX specifici:

Convenzioni di denominazione chiare e coerenti
Il flusso e il layout dei dati con priorità
I margini sono appropriati per la leggibilità
I dati non sono né nascosti né sovraccaricati
Comprensibile e di facile lettura

Volevano designer UX freelance a tempo pieno con sede negli Stati Uniti

Dashboard KPI di marketing

L'esempio seguente è un eccellente esempio di come semplificare la comprensione di informazioni aziendali complesse. La combinazione di colori sobria è piacevole e l'uso di carte separate è morbido per gli occhi.

Uno dei motivi per cui questa dashboard è un design eccellente è il suo rapporto di inchiostro dati. I dati e lo spazio si completano a vicenda. Invece di riempire lo schermo con più grafici, vengono utilizzate schede separate con piccole schede. Questo è un modo ingegnoso per mantenere disponibili le informazioni critiche (cioè non nasconderle) offrendo all'utente un modo semplice e istruttivo di visualizzarle alle proprie condizioni.

Una procedura consigliata per la progettazione di dashboard consiste nell'utilizzare il colore per migliorare il significato delle informazioni. — I colori scarsi e la visualizzazione delle informazioni pertinenti all'utente sono principi di una buona progettazione del dashboard. (Artyom Sokolov)

Cruscotto a strisce

La dashboard di Stripe è un eccellente esempio di best practice per la progettazione di dashboard. È semplice, risponde alle domande più pertinenti degli utenti e ha margini quasi perfetti all'interno di ogni scheda.

Un dashboard utente che mostra un'ottima visualizzazione dei dati — Il dashboard di Stripe mostra un'ottima visualizzazione dei dati in un modo che è facile da vedere e capire per gli utenti in modo rapido e semplice. (Michele Villar)

Cruscotto di telemedicina

L'analisi della telemedicina è nota per fornire molti dati grezzi. Organizzare quei dati in un dashboard significativo e informativo può essere una sfida. Questo esempio utilizza le best practice per la progettazione di dashboard UX. I margini sono raddoppiati, le informazioni sono presentate con domande e risposte e i dati non sono nascosti alla vista.

Best practice per la progettazione di dashboard con silos di informazioni ben strutturati e un buon flusso di informazioni — Questo design del dashboard segue le migliori pratiche di visualizzazione dei dati audio: margini generosi, layout bilanciato e buon contrasto dei colori, che contribuiscono tutti alla capacità di interpretare i dati in modo efficiente.

Cruscotto di riserva

Le azioni possono essere difficili da concettualizzare su un unico dashboard a causa del numero di punti dati in competizione per lo spazio. Questo esempio di progettazione di dashboard è riuscito a ottenere un aspetto pulito e minimale con tutte le informazioni pertinenti in primo piano e al centro.

Un esempio di progettazione di dashboard di alto livello che mostra semplicemente informazioni complesse — Un dashboard di stock che mostra molti punti dati e informazioni complesse in modo semplificato ma informativo. (WhiteonWhite digitale)

Dashboard dell'audience Web

Google Analytics fa un ottimo lavoro con le loro dashboard; tuttavia, può essere necessaria molta personalizzazione per raggiungere un obiettivo specifico. Questa dashboard ha portato l'analisi a un nuovo livello offrendo una visualizzazione semplice, di facile comprensione, di facile lettura e utile, senza aumentare il carico cognitivo.

Dashboard design UX applicato per quanto riguarda la leggibilità e la comprensione dei dati — Un esempio di progettazione di dashboard che mostra l'analisi web in modo ponderato, in linea con ciò che gli utenti vogliono vedere di più.

Cruscotto di gestione della documentazione

Gestire i documenti è difficile, ma mantenerli organizzati e facili da navigare può essere ancora più difficile. Un'ottima soluzione è questa dashboard che mantiene le cose semplici, comprensibili e sorprendentemente sparse.

Anche con un approccio minimalista, questo eccellente esempio di progettazione di dashboard offre all'utente tutto ciò di cui ha bisogno per comprendere e navigare nel sistema documentale.

Un eccellente esempio di progettazione di dashboard per un sistema di gestione dei documenti — Un esempio di un ottimo design di dashboard con un approccio minimalista a un complesso sistema di documenti. (Jan Losert)

App meteo per la semina delle piante - Dashboard mobile

Questa dashboard mobile è informativa e facile da capire. I breadcrumb aiutano con la navigazione e le icone con descrizioni in lingua comune aiutano a creare un ottimo design UX.

Visualizzazione mobile dei dati — Un'app meteo per la semina delle piante che presenta una dashboard mobile che non è ingombra di "carta spazzatura". (Tomasz Zych)

Dashboard della carta di credito – Dashboard mobile

Proprio come le banche, i dashboard delle carte di credito sono noti per la cattiva UX, specialmente su un dispositivo mobile. Questo design del dashboard mobile prende una nuova direzione. Le informazioni non sono solo ben organizzate, ma comprensibili e ricche di funzionalità senza essere schiaccianti.

Best practice per la progettazione di dashboard mobili — I cruscotti bancari e delle carte di credito sono complessi a meno che non vengano applicati i principi dell'esperienza utente insieme alle migliori pratiche di visualizzazione dei dati. (Raj Lal)

La visualizzazione dei dati e la progettazione di dashboard di qualità superiore richiedono eccellenza grafica e la comprensione e l'applicazione dei principi di progettazione di dashboard. Applicati in modo coerente, gli utenti trarranno vantaggio da visualizzazioni dei dati che sono informative e dashboard che offrono un'esperienza utente di alta qualità.

• • •

Ulteriori letture sul blog di Toptal Design:

Progettazione dashboard: considerazioni e best practice
Visualizzazione dei dati: buone pratiche e fondamenti
Lasciati ispirare da queste visualizzazioni di dati
Aggiorna le tue analisi con queste ispirazioni per la progettazione di dashboard