Progetta Bellissime Dashboard in AI/BI

Introduzione

Ogni azienda ha un'identità di marca che riflette i suoi valori, plasmata dal suo logo, colori, caratteri e tono. I nostri clienti più riconoscibili, come Rivian e Wineshipping, applicano tale identità in modo coerente su ogni superficie: marketing, presentazioni, siti web e prodotti. Questa coerenza è ciò che genera fiducia nei loro clienti e partner.

Le dashboard sono un mezzo cruciale attraverso il quale i team aziendali condividono i dati con i decisori e i partner esterni. Gli autori delle dashboard creano questa esperienza per aiutare gli spettatori a comprendere i loro dati e a far emergere insight chiave. Affinché le dashboard appaiano affidabili e professionali, gli autori devono farle sentire coese e in linea con il brand. I temi delle dashboard consentono di aggiornare l'aspetto e la sensazione delle singole dashboard per allinearle alla propria visione.

I temi dello spazio di lavoro vanno oltre, applicando un tema coerente a tutte le dashboard nello spazio di lavoro, che lo ereditano automaticamente. Questo può naturalmente essere esteso e/o modificato localmente secondo necessità. In questo post, esploreremo alcune best practice di design e creeremo un tema personalizzato per riflettere il brand.

Useremo come esempio alcune linee guida di brand fittizie di Wanderbrick per creare una dashboard.

Vuoi seguire? Wanderbricks è un'azienda fittizia di viaggi e ospitalità con un set di dati di esempio disponibile in ogni spazio di lavoro Databricks. Puoi ricreare la dashboard da zero utilizzando i prompt di Genie Code in ogni sezione, oppure semplicemente leggere e applicare le idee alle tue. Inizia aprendo una nuova dashboard e inserendo questo prompt. Crea una vista metrica locale sopra lo samples.wanderbricks schema con le dimensioni e le misure che useremo in tutto il processo.

#1 — Crea un layout basato sulle esigenze dei tuoi utenti finali

Configurazione della griglia

Lo scopo della tua dashboard dovrebbe determinare il numero di colonne nel layout della griglia. AI/BI offre una griglia flessibile a 12 colonne che puoi suddividere in 3, 4 o 6 colonne a seconda delle tue esigenze. Le dashboard dense e tecniche con molti widget beneficiano di un layout a 6 colonne, che consente di visualizzare più widget. D'altra parte, una dashboard esecutiva potrebbe utilizzare un layout a 3 colonne per ridurre il carico cognitivo.

Creazione della gerarchia

Quando si visualizza una dashboard, l'occhio umano scansiona naturalmente per trovare le informazioni più importanti prima di leggere. A seconda del design della tua dashboard, l'occhio seguirà uno dei due percorsi attraverso la dashboard: un pattern a F o un pattern a Z.

Per le dashboard ricche di immagini e visualizzazioni, l'occhio segue naturalmente un pattern a Z attraverso i layout visivi, partendo dall'alto a sinistra con titoli e filtri, tagliando diagonalmente verso il basso e atterrando in basso a destra su visualizzazioni e tabelle dettagliate.

Per le dashboard più ricche di testo o tabelle, può emergere un pattern a F. L'occhio scansiona completamente la prima riga, quindi si sposta verso il basso a sinistra. In entrambi i pattern, il principio è lo stesso: metti ciò che conta di più dove l'occhio si posa per primo.

Ridimensiona per enfatizzare

Se tutto sulla tua dashboard ha la stessa dimensione, nulla risalta. Gli spettatori hanno bisogno di segnali visivi per sapere dove concentrarsi per primi. Stabilisci una gerarchia chiara rendendo più grandi le metriche più critiche e le visualizzazioni primarie, e lasciando che gli elementi secondari si ritirino sullo sfondo.

Prova ad applicare questo alla dashboard Wanderbricks. Il primo prompt crea una pagina di panoramica esecutiva seguendo la gerarchia che abbiamo appena trattato, e il secondo aggiunge una pagina tecnica più densa per mostrare come gli stessi principi si adattano a un pubblico diverso.

#2 — Seleziona il font per tono e leggibilità

La scelta di un font per una dashboard è una decisione tanto funzionale quanto estetica. L'identità del tuo brand e il tuo pubblico dovrebbero entrambi influenzare la scelta del font. Un pubblico più tecnico potrebbe apprezzare qualcosa di espressivo come Space Grotesk, mentre una dashboard esecutiva beneficia di qualcosa di più familiare e conservatore, come Arial. L'obiettivo non è solo lo stile, ma stabilire il tono.

Le dashboard tendono ad essere dense di informazioni, quindi la leggibilità viene prima di tutto. Raccomandiamo i font sans-serif poiché riducono l'affaticamento visivo. AI/BI supporta nativamente alcune opzioni sans-serif web-safe pronte all'uso, inclusi Arial, Tahoma e Verdana.

Se vuoi usare il tuo font, ora puoi aggiungere un font locale alla tua dashboard. Questo è particolarmente utile quando le dashboard vengono incorporate nei tuoi strumenti interni per coerenza. Per questa dashboard useremo un font locale e lo imposteremo su Space Grotesk.

Per garantire la leggibilità, scegli colori del font che mantengano un alto contrasto rispetto allo sfondo del widget. Usa uno strumento di accessibilità come Adobe color contrast checker per verificare. In modalità chiara, evita di usare il nero puro (#000000) poiché può risultare troppo duro su uno sfondo chiaro (#FFFFFF). In modalità chiara, un tono leggermente ammorbidito come #08141A su #EBEBEB crea spesso un'esperienza di lettura più confortevole. In modalità scura, puoi provare a usare #EBEBEB su #08141A per evitare un contrasto eccessivo.

AI/BI supporta un set di font web-safe e open source che puoi applicare con Genie Code. Per i font del brand, usa l'opzione font locale sotto Impostazioni > Font > Usa font locale. Prova questo prompt per iniziare con un'opzione open source e impostare i colori del tuo font.

#3 — Definisci i colori dell'interfaccia utente

La regola 60-30-10 è un principio fondamentale nella teoria dei colori per creare design equilibrati e visivamente armoniosi. I designer usano questa regola in molti contesti, dalla scelta dei colori per una stanza della tua casa alla definizione del branding per una nuova azienda. Questa regola di design ti aiuta a definire la tua palette di colori con tre categorie di colore e a dare alla tua palette il giusto equilibrio su quanto ciascuno dovrebbe essere utilizzato in un design olistico:

• Il 60% è il tuo colore dominante che definisce il tono generale della dashboard e sarà il colore di sfondo della tua tela, dei widget e dei bordi.
• Il 30% è il tuo colore secondario che supporta lo sfondo con contrasto. Nella tua dashboard, questo sarà il colore del tuo carattere e la palette di visualizzazione dei dati.
• Il 10% è il tuo colore d'accento, pensato per attirare l'attenzione dove serve. Usalo per evidenziare elementi interattivi come filtri, schede e pulsanti nella tua dashboard.

Di seguito discuteremo come applicare questo principio per scegliere colori accattivanti per la tua dashboard.

Colori di sfondo neutri

Mantenendo i colori di sfondo vicini al neutro, permettiamo ai colori delle visualizzazioni dei dati di comunicare accuratamente senza introdurre distorsioni involontarie. Per la modalità chiara, mantieni gli sfondi dei widget vicini al bianco (#FCFCFD) con un colore leggermente più scuro per lo sfondo della tela (#EBEBEB). Questo crea separazione senza distrazione. Quando il contrasto è sottile, la dashboard appare come un insieme coeso piuttosto che una griglia di elementi isolati. Impostare i colori dei bordi in modo che corrispondano allo sfondo del widget riduce il disordine visivo, specialmente in layout densi.

Personalizzazione per widget

Per enfatizzare determinati widget e farli risaltare, puoi sovrascrivere le proprietà del tema per un widget. Nelle impostazioni di stile del widget, aggiorna il colore di sfondo & del bordo a #1F354B. Inoltre, aggiorna il colore del carattere a #EBEBEB per garantire un contrasto elevato.

Colore di selezione audace

Il colore di selezione viene utilizzato per evidenziare elementi interattivi come filtri, schede e pulsanti. Scegli un colore facilmente distinguibile dal testo e dai colori di sfondo. Puoi facilmente ricavarli utilizzando i colori del tuo brand. Usando il colore #15AFDD del nostro brand come colore base in Adobe Color, possiamo provare a ricavare un colore di selezione impostando l'armonia dei colori su quadrato, ottenendo colori come #DE7914 & #3A7689. Scegliere un colore blu (come #2272B4) è solitamente una scelta sicura: è analogo al colore dei collegamenti ipertestuali associati ai link interattivi sul web.

Modalità scura

Ogni tema AI/BI supporta sia la modalità chiara che quella scura. Imposta entrambe le modalità attivando l'interruttore della modalità chiara/scura. Per impostare la modalità chiara, puoi usare il colore del brand #1E343F per lo sfondo della tela e #08141A per lo sfondo del widget. In modalità chiara, il colore più brillante per il widget è solitamente consigliato in quanto fornisce un contrasto elevato. Per il colore del carattere useremo #E8EFF1 per garantire un'elevata leggibilità.

Prova ad applicare il principio 60-30-10 alla dashboard Wanderbricks. Questo suggerimento imposta sfondi neutri per tela e widget, nasconde i bordi abbinandoli al colore del widget e aggiunge un blu complementare per gli elementi interattivi.

#4 — Costruisci una palette di visualizzazione tutta tua

Con i colori dell'interfaccia stabiliti per entrambe le modalità chiara e scura, il passo finale è la selezione della palette di visualizzazione.

Una palette di visualizzazione dei dati ben bilanciata lega insieme l'intera dashboard e la rende viva. La palette può includere i colori del brand, ma richiederà aggiustamenti poiché potrebbero non essere utilizzabili per le visualizzazioni. Si stima che il 4,5% della popolazione globale sperimenti una qualche forma di daltonismo, quindi è importante progettare una palette che sia adatta ai daltonici. Se vuoi provare alcune palette standard del settore, ti consigliamo di dare un'occhiata a colorbrewer. Alcuni aspetti chiave da considerare quando progetti la tua palette:

1. A seconda del caso d'uso, una palette dovrebbe avere 5-9 colori. In questa dashboard creeremo una palette di 5 colori utilizzando Adobe Color.
2. I colori dovrebbero essere distinguibili sia in modalità chiara che scura, quindi evita colori estremamente chiari o estremamente scuri.
3. Poiché il daltonismo rosso/verde è comune, evita di avere quei colori uno accanto all'altro nella palette.

Per la nostra palette di visualizzazione personalizzata Databricks, iniziamo con il colore del nostro brand (#15AFDD) in Adobe Color. Applichiamo l'armonia cromatica "quadrata" per derivare 4 colori aggiuntivi (#83DE14, #DE7914, #BE14DE, #3A7689) che sono equamente distanziati sulla ruota dei colori. Da lì in Adobe Color, puoi apportare alcune ulteriori modifiche:

• Sposta le tonalità cliccando sul singolo esadecimale del colore e muovendo gradualmente il cursore della tonalità.
• Regola la luminosità dei colori nella palette cliccando sull'esadecimale del colore e aggiornando il cursore della luminosità. L'obiettivo è mantenere i colori distinti, specialmente le coppie adiacenti.
• Prova i colori risultanti nello strumento di verifica del daltonismo di Adobe Color per simulare come appare la tua palette in condizioni comuni tra cui Deuteranopia, Protanopia e Tritanopia.
• Testa in AI/BI su dashboard reali sia in modalità chiara che scura.

La palette di colori finale che abbiamo è #15AFDD, #2375A8, #52A870, #C85070, #C89930.

Una volta che la tua palette supera i controlli di accessibilità, applicala per vedere i tuoi grafici prendere vita. Questa è la palette che abbiamo scelto dopo averla testata con il simulatore di daltonismo di Adobe Color e averla provata sia in modalità chiara che scura.

Conclusione

Le decisioni di design che sembrano piccole se isolate si sommano rapidamente. Un font coerente, una palette di colori intenzionale e un layout costruito per consentire agli spettatori di leggere facilmente. Insieme trasformano una dashboard in qualcosa di cui le persone si fidano. I temi dello spazio di lavoro aiutano a estendere questo concetto a tutta l'organizzazione, in modo che una buona pratica di design diventi il punto di partenza per ogni dashboard.

La dashboard che abbiamo esaminato è disponibile qui se vuoi esplorarla tu stesso. Se non stai ancora utilizzando le dashboard AI/BI, siamo integrati nativamente in Databricks.

Hai idee o feedback? Condividili con noi.

Scarica la dashboard per esplorarla in autonomia

(Questo post sul blog è stato tradotto utilizzando strumenti basati sull'intelligenza artificiale) Post originale