Densità delle informazioni in SaaS B2B: progettazione di dashboard per utenti esperti e principianti
Come progettare dashboard e tabelle B2B dense che gli esperti possano scansionare rapidamente senza sopraffare i nuovi utenti: modalità di densità, gerarchia, divulgazione progressiva.
Punto chiave
Le interfacce dense non sono il problema; quelli disorganizzati lo sono. Gli esperti desiderano più informazioni per schermata, quindi forniscile con una solida gerarchia, un allineamento coerente e grafici che utilizzino posizione e lunghezza. Proteggi i principianti con impostazioni predefinite sensate e divulgazione progressiva e lascia che le persone scelgano un livello di densità, come fanno sistemi di progettazione come Carbon per i tavoli.
La densità è una caratteristica per esperti
Le persone che utilizzano uno strumento B2B tutto il giorno, come analisti, agenti di supporto e operatori, spesso preferiscono vedere più contenuti contemporaneamente, perché scorrere e cambiare scheda costa loro tempo. Rendere tutto spazioso per avere uno screenshot pulito può rallentare il loro lavoro. L'obiettivo è informazioni dense ma facili da scansionare.
Lascia che le persone scelgano la densità
I sistemi di progettazione ora incorporano la densità nei componenti. La tabella dati Carbon di IBM, ad esempio, offre cinque altezze di riga, da extra piccola (24 px) per layout ad alta densità a extra grande (64 px) per una scansione più semplice, con media (40 px) come impostazione predefinita.
- Offri due o tre impostazioni di densità, ricordate per utente.
- Modifica la spaziatura e l'altezza della riga, non la dimensione del carattere o il contrasto.
- Mantieni i target tattili sufficientemente grandi sui dispositivi touch indipendentemente dalla densità.
La gerarchia rende leggibile la densità
Nielsen Norman Group definisce i dashboard come visualizzazioni che forniscono informazioni a colpo d'occhio su cui le persone possono agire rapidamente e consiglia di codificare le quantità con lunghezza e posizione 2D, che le persone leggono più velocemente. In pratica: metti i pochi numeri che guidano le decisioni in alto, allinea tutto su una griglia, usa il colore solo per il significato (stato, avvisi) e allinea i numeri a destra in modo che possano essere confrontati.
Proteggi i principianti senza rallentare gli esperti
La divulgazione progressiva mantiene le opzioni avanzate disponibili ma fuori mano. Avvia i nuovi utenti con una visualizzazione predefinita focalizzata, consenti loro di aggiungere colonne, filtri e widget quando ne hanno bisogno e salva le visualizzazioni in modo che gli esperti possano tornare immediatamente alla loro fitta configurazione.
Moto nelle interfacce dense
Nelle schermate ricche di dati, il movimento dovrebbe spiegare il cambiamento, non decorare: evidenziare un valore appena aggiornato, animare una riga nella sua nuova posizione ordinata o mostrare una transizione del grafico in modo che le persone possano seguire ciò che si è spostato. Sii breve ed evita animazioni continue che competono con i dati.
Principi chiave da ricordare
- Gli esperti beneficiano di schermi densi; la disorganizzazione è il vero problema
- Offri impostazioni di densità modificando la spaziatura, non la dimensione del testo o il contrasto
- Usa lunghezza e posizione per i numeri; colore solo per significato
- La divulgazione progressiva protegge i principianti
- Usa il movimento per spiegare i cambiamenti nei dati, non per decorare
Domande frequenti
Fonti
- Data table usage — Sistema di progettazione del carbonio (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group