it-swarm-eu.dev

Come rendere un dashboard noioso (ma molto funzionale) più interessante e accattivante senza ingombrarlo ingiustamente?

Ho una semplice dashboard per i project manager. Ha lo scopo di fornire informazioni di base e di fornire loro un "punto di partenza" per raggiungere tutte le cose più importanti su cui devono agire. Ecco uno screenshot in cui i dati sono stati ovviamente lavati, ma l'aspetto è esatto.

Ho avuto molte persone dire che funziona alla grande per loro, ma altri dicono che sono molte informazioni e un po '"lavano", cioè sono un po' sopraffatte e sarebbe utile visivamente se ci fossero elementi che potrebbero rompersi o in qualche modo migliorare visivamente lo schermo senza ingombrarlo di più.

enter image description here

Ho dimenticato di menzionare che quando un utente fa clic in una delle sezioni del dashboard o fa clic sui simboli +, quella sezione si espande per adattarsi a tutto il contenuto possibile senza scorrere e le altre sezioni si contraggono. Inoltre, questo è tutto progettato per adattarsi a una pagina, senza "scrolling di pagina", anche se c'è lo scorrimento per le griglie stesse quando ci sono più dati di quanti possano essere mostrati.

7
richard

La psicologia di una dashboard è quella di creare un'immediata sensazione di essere in controllo . Come dici tu, è un punto di partenza. Hai bisogno di meno informazioni tabulari sulla tua dashboard, più grafici.

Metti ciascuna delle tue tabelle importanti su una pagina a sé stante. Dai a ciascuno lo spazio di cui ha bisogno. Trasforma la dashboard in un punto di controllo centrale con informazioni di riepilogo. Usa la grafica per sostituire i numeri.

Su tabelle impilate:

Più tabelle di scorrimento a larghezza intera impilate una sull'altra in un'unica pagina Web non sono utili per l'interazione dell'utente. Ovunque li abbia visti, la pagina web ha riempito di informazioni e si è conclusa con più di uno schermo pieno sulla pagina. Anche gli utenti esperti della pagina perdono traccia della tabella in cui si trovano. Con le barre di scorrimento vicine al bordo destro mostrano anche una confusione momentanea attorno alla barra di scorrimento verticale (browser o tabella) da trascinare.

Una buona dashboard si adatta su uno schermo , evitando quel problema con la barra di scorrimento. Sto suggerendo che il sesso sia così:

Dashboard with more graphical elements

Punti chiave

  • Utilizza un grafico a barre per la prima tabella. Potrebbe utilizzare più barre o un display più simile a una timeline per ottenere maggiori informazioni. In ogni caso, il collegamento Altro ti porterà a una versione più completa. Potremmo voler chiamare quel link "Review" su sii più imponente.
  • La sezione Avvisi è centrata e ha più spazio attorno. Sono avvisi ! Gli avvisi devono distinguersi. Mostriamo qui informazioni minime sulle schede attività, solo un link.
  • Le informazioni sulla ricarica sono fornite come grafici a torta con chiave con codice colore a destra . Un grafico a torta dovrebbe essere mostrato selezionato e le ore riportate nella tabella sono per quello. In ogni torta è necessario un cuneo vuoto per ore non caricate per rendere logico l'utilizzo della visualizzazione percentuale. Fai clic su Altro o su un particolare link del periodo di tempo per una revisione completa delle ore addebitate per un periodo di tempo selezionato.
14
James Crook

Hai detto le cose giuste quando vuoi migliorare questa pagina e non ingombrarla, perché sicuramente non vuoi intralciare la sua funzionalità con coloro che la usano.

Ogni volta che vedo una pagina come questa, mi chiedo se esiste una sorta di visualizzazione dei dati che potrebbe migliorare l'interpretazione di tali utenti. È un po 'difficile da dire con i dati cancellati che hai incluso qui, ma ad esempio ci sono alcuni grafici che illustrano le 4 colonne di dati nella prima tabella (contratto approvato, previsione @ completamento, effettivo, a/r) che può aiutare l'utente seleziona i dati che richiedono la loro attenzione? lo stesso vale per le altre tabelle: si può fare qualcosa per mostrare che i dati sono più facili da decifrare delle celle di tabella?

Se quegli avvisi sono davvero avvisi che richiedono attenzione, mettili al centro e con un po 'di forza dietro di loro per spingere davvero le persone a prestare attenzione. Il numero del progetto è davvero un pezzo importante? Se questo è un punto di riferimento allora fantastico, ma se è solo una chiave per lo più ignorata dai tuoi utenti, forse non è necessario che sia la prima colonna, quella colonna potrebbe essere qualcosa di più leggibile come il titolo del progetto. Questi sono solo alcuni pensieri per far nascere idee, spero che sia d'aiuto.

2
Tyler Lee
  1. Aggiungi un po 'di "spazio bianco" - disordinare l'interfaccia
  2. Aggiungi una visualizzazione ai dati.
  3. Cerca ispirazione - Dai un'occhiata ad alcuni esempi di dashboard e ad esempio dati. esempi ( patterntap ecc., geckoboard, infosthetics.com, smashing mag )
2
Marc D

È possibile aggiungere schede e/o fisarmoniche per raggruppare e nascondere/mostrare diverse sezioni della pagina. Questo ti darà anche spazio per un'immagine al di sopra delle informazioni che desideri visualizzare.

Inoltre, aggiungi uno stile di riga alternativo per le tabelle. Dà un aspetto gradevole.

Spero che sia di aiuto.

1
Divi

Come ho già sottolineato nel mio commento, ci sono differenze tra utenti principianti e utenti normali. Il secondo gruppo potrebbe preferire più informazioni rispetto a un'interfaccia utente meno ingombra, perché hanno bisogno di densità di informazioni.

Penso che ci siano alcune cose che puoi fare per facilitare l'interfaccia utente senza nascondere (molte) informazioni.

  1. Penso che gli avvisi debbano decisamente spostarsi verso l'alto.

  2. personalizzazione del numero di elementi nelle tabelle. Inizia con un numero basso (ad esempio 5), ma consenti agli utenti di scegliere un numero più alto. (Questo è qualcosa che è emerso più e più volte. Più di 5 all'inizio di solito travolgono le persone, ma dopo pochi mesi sorgeranno domande per sollevarlo.)

  3. È possibile indicare elementi incompleti con una piccola icona o un accento di colore.

  4. la visualizzazione del collegamento: il blu è un colore duro e la sottolineatura lo rende ancora più affollato. A volte piccoli adattamenti (usando meno saturazione sui collegamenti e tralasciando la sottolineatura o impostando un bordo in una forma più leggera) fanno la differenza tra affollato e pacifico. E preferirei impostare gli effetti al passaggio del mouse su tutte le righe o su tutte le celle anziché solo i collegamenti di testo. (Tranne forse per gli indirizzi email.)

Gli ausili visivi e i grafici possono aiutare ma dovrebbero essere usati con cura. Come nell'esempio che fornisci, indica una sorta di strumento di gestione del progetto, vorrei certamente avere a portata di mano dettagli (il nome del progetto e del cliente e simili), non nascosti dietro clic e pulsanti.

1
Inca