Moderne Dashboards haben viel von Auto-Dashboards übernommen. Interessante Elemente sind auch in den Flugkontrollzentren der NASA der 1960er Jahre und zu Beginn des Zeitalters der Automatisierung zu sehen. Heutzutage erscheint jede ziemlich komplizierte Situation, sei es ein Raketenstart oder ein Kampf mit Außerirdischen im Helm von Tony Stark, unweigerlich in Form eines Armaturenbretts.

Wir sind jedoch nicht für eine Geschichtsstunde hier, sondern um zu lernen, wie man ein gutes Dashboard erstellt. Unsere Aufgabe wird es sein, die Arten von Dashboards und Anzeigediagrammen zu untersuchen, die zur Überwachung moderner Systeme verwendet werden. Viele Lektionen sind jedoch in anderen Kontexten anwendbar.

Dieses Thema enthält so viele Informationen, dass es schwierig ist, herauszufinden, wo Sie anfangen sollen! Aber ich werde dir helfen. Während wir das Design von Dashboards untersuchen, werden wir die folgenden Punkte durchgehen:

1. Struktur und Schema.
2. Präsentation und Zugänglichkeit.
3. Auswahl der verwendeten Grafiken.
4. Den Kontext verbessern.

Teil 1. Struktur und Schema

Lassen Sie uns zuerst anhalten und uns zwei Fragen stellen: Wer ist unsere Zielgruppe und was sind ihre Ziele?

Die Kenntnis Ihrer Zielgruppe und ihrer Aufgaben ist für den Rest der Arbeit von entscheidender Bedeutung. Wenn Ihre Zielgruppe Entwicklungsmanager sind, die umfassende Informationen über die Funktionsweise des Systems benötigen, unterscheiden sich die benötigten Daten stark von den Anforderungen des eingehenden Ingenieurs.

Bevor Sie mit dem Erstellen eines Dashboards beginnen, nehmen Sie ein Blatt Papier und notieren Sie die Fragen, die Ihr Zielbenutzer stellen wird, sortieren Sie sie nach Priorität und bestimmen Sie die optimalen Daten, die angezeigt werden müssen, um die Frage zu beantworten.


Notizen, die ich geschrieben habe, als ich ein Interview mit mir für diesen Beitrag geführt habe.

Denken Sie an die Form

Jedes dem Dashboard hinzugefügte Element sollte eindeutig den Aufgaben der Zielgruppe dienen, und der Standort des Widgets sollte durch seine Bedeutung bestimmt werden. Diese Informationen sollten ohne Scrollen auf einem Bildschirm angezeigt werden. Unsere menschlichen Benutzer können nur drei oder vier Elemente visueller Informationen in ihrem Arbeitsspeicher speichern. Sie müssen daher alle wichtigen Informationen an einem Ort speichern (wenige, 79). Um dem Benutzer zu helfen, können Sie sicherstellen, dass er alle Informationen anzeigen kann, indem Sie einen Blick darauf werfen ¹ , und er muss sich an nichts erinnern.

Wenn Sie zusätzliche Informationen visualisieren müssen, sollten Sie separate Dashboards erstellen, die die Aufgabe des Benutzers erfüllen, z. B. um Probleme mit der Speicherbereinigung zu untersuchen oder nachgelagerte Abhängigkeiten zum Absturz zu bringen. Im optimalen Fall sollten solche Studienverfahren in verschiedenen Systemen wiederverwendet werden können.

Es ist am besten, ein modulares Layout zu verwenden . Die Menschen sind besonders gut in den kleinen Bereichen orientiert, die in den Gruppierungsprinzipien beschrieben sind . Dies ist praktisch, da fast alle modernen Dashboard-Systeme auf ähnliche Weise funktionieren.

Durch Schreiben einer Prioritätenliste und Erstellen von Modulen können wir Dashboard-Elemente hinzufügen. Sie haben wahrscheinlich bereits eine intuitive Vorstellung davon, dass das wichtigste Element in der oberen linken Ecke platziert werden muss und dass Sie es von links nach rechts, von oben nach unten platzieren müssen.


Höchstwahrscheinlich benötigen Sie diese Abbildung nicht.

Dies ist ein Standardmuster für Menschen, die es gewohnt sind, in westlichen Sprachen zu lesen: Ihre Augen achten normalerweise zuerst auf die obere linke Ecke (Few, 107-108) ² . Es ist jedoch wichtig, dass Sie Ihre Zielgruppe nicht vergessen: In einigen Sprachen ist es vertrauter, von rechts nach links oder von oben nach unten zu arbeiten ³ .

Nehmen Sie sich Zeit für die Implementierung!

Ich weiß, dass Sie nicht warten können, aber bevor Sie beginnen, erstellen Sie eine Skizze:


Dies ist eine Skizze.

Schau ihn an. Besprechen Sie es mit dem Benutzer. Am Kühlschrank hängen und beim Kaffeetrinken genießen. Teile es mit dem Team. Es ist nützlich, Ideen zu skizzieren und zu experimentieren. Nach dem Erstellen der Skizze habe ich beispielsweise entschieden, dass die Reihenfolge geändert werden muss, bevor Sie fortfahren. Mein Benutzer (ich) entschied, dass die Kenntnis der Dauer wichtiger ist als Fehler.

Nun, fangen wir an!

Nachdem Entwickler ein modulares Schema erstellt haben, beginnen sie normalerweise damit, Grafiken und andere Widgets derselben Größe im Raster zu platzieren, und wechseln zur nächsten Zeile, wenn der Platz leer ist. Sie können sich nicht an dieselbe Größe halten, sondern die Breite der Elemente anpassen, um die Wichtigkeit hervorzuheben oder die Klarheit zu erhöhen. Breitere Grafiken fallen nicht nur stärker auf, sondern haben auch andere nützliche Eigenschaften. Tufty sagt, dass die breiteren Graphen dem Horizont ähneln und „das menschliche Auge sich natürlich angepasst hat, um Abweichungen in der Horizontlinie zu verfolgen“ (186) ⁴ . Darüber hinaus muss in breiten Diagrammen weniger Text übertragen werden, was den Kausalzusammenhang vieler Diagramme betont. Dies gilt insbesondere für Liniendiagramme, die in vielen Dashboards verwendet werden. Der gemessene Effekt - zum Beispiel belegter Speicher oder Verzögerung - wird auf der Y-Achse und die Zeit auf der X-Achse angezeigt. Der durch Erhöhen der Breite der Diagramme erhaltene Raum ermöglicht „eine detailliertere Angabe des Primärwerts“ (187) ⁴ .


Wir haben den Zeitplan erweitert, um die Bedeutung der Erfolgsquote hervorzuheben.

Beachten Sie, dass selbst „normale“ Grafiken in diesem Dashboard breiter als hoch sind. Dies ist aus den oben genannten Gründen gut, und außerdem ist es aufgrund des Prinzips des Goldenen Schnitts schön anzusehen.

Zusammenfassend

Glückwunsch! Sie haben begonnen, ein Dashboard unter Anleitung der besten Köpfe bei der Entwicklung von Dashboards zu erstellen. Dies ist eine hervorragende Grundlage für die Entwicklung Ihres Dashboards.


Toller Start.

Kurze Wiederholung

Wiederholen wir, was wir hier gelernt haben:

• Handeln Sie bewusst, studieren Sie Ihren Benutzer und die Fragen, die er stellt
• Behalten Sie die Einfachheit bei, zwingen Sie Benutzer nicht zum Scrollen und Erinnern
• Erstellen Sie nach Bedarf weitere zugehörige Dashboards
• Veröffentlichen Sie wichtige Informationen an wichtigen Stellen für das Bewusstsein
• Verwenden Sie ein modulares Layout und bevorzugen Sie breite statt schmale Diagramme.

Quellen und Notizen

1. Menschen haben normalerweise nur ein Paar Augen.
2. Stephen Few (wenige, Stephen). Information Dashboard Design . Analytics Press, 2013.
3. Wenn Ihr Dashboard für Außerirdische oder Roboter vorgesehen ist, lesen Sie die entsprechenden Konstruktionsanleitungen.
4. Edward R. Tufte (Tufte, Edward R). Die visuelle Anzeige quantitativer Informationen . Graphics Press, 1998.

Teil 2. Präsentation und Zugänglichkeit

Wir haben also ein schönes Raster und das erforderliche visuelle Gewicht wird für jedes Element dieses Rasters ausgewählt. Jetzt müssen wir darüber nachdenken, dem Benutzer Daten anzuzeigen. Und hier kann alles schief gehen, daher müssen Sie Klarheit und Beständigkeit des Designs beibehalten.

Das Leitprinzip sollten die Aufgaben des Benutzers und die Integrität der angezeigten Daten sein. Da diese Parameter sehr unterschiedlich sein können - die Anzahl der Benutzer, die für die Speicherbereinigung aufgewendete Zeit und die unvorhersehbare Anzahl von Fehlern - müssen wir eine Art Framework erstellen, mit dem Lösungen ausgewählt werden können.

Lassen Sie uns dazu untersuchen, woraus die qualitativ hochwertige Visualisierung von Systemmetriken besteht.

Datenauswahl

Sie erwarten wahrscheinlich, dass ich in diesem Abschnitt sagen werde, welche spezifischen Daten im Dashboard platziert werden sollen. Tatsächlich liegt es hauptsächlich an Ihnen, Leser! Denken Sie an Benutzer und ihre Ziele. Verwenden Sie Ihre Liste und entscheiden Sie, was für die vier Stufen der Informationsüberwachung am besten geeignet ist (32) ¹ :

1. Situationsdaten auf hohem Niveau aktualisieren.
2. Identifizierung spezifischer Elemente, die Aufmerksamkeit erfordern, und Konzentration auf diese.
   
   1. Aktualisieren von Informationen zu diesem Artikel mit mehr Details
   2. Ermittlung des Handlungsbedarfs
3. Wenn eine Aktion erforderlich ist, muss auf zusätzliche Informationen zugegriffen werden, um die erforderlichen Informationen zu ermitteln.
4. Die Antwort.

Im Allgemeinen wird die beste Signalisierung für den Betrieb und die Erkennung von Systemen auf hoher Ebene durch die RED- Methode und / oder die USE- Methode bereitgestellt. Im optimalen Fall sollte das Dashboard nur Key Performance Indicators (KPIs) enthalten, die erforderlich sind, um sich mit der Situation vertraut zu machen, und nicht, um die Daten zu untersuchen (Few, 30-31) ¹ . Es gibt jedoch viele Fälle, in denen zusätzlich zu Standard-KPIs spezifischere Informationen erforderlich sind. Wenn Sie sich nicht sicher sind, welches, schauen Sie sich die Ziele des Benutzers an. Ist jedes der betrachteten Elemente für die Ausführung von Benutzeraufgaben erforderlich?

Es sei auch daran erinnert, dass solche Dashboards häufig Verfolgungssysteme sind, deren Messwerte sich häufig ändern. Sie müssen separate Einheitendiagramme oder Zeit-Widgets hinzufügen, um neue und interessante KPIs oder nur Daten zu verfolgen, die für aktuelle Aufgaben wichtig sind. Wenn Ihre Organisation wächst, muss Ihre Organisation Dashboards kritisch prüfen und alle Artefakte entsorgen, die nicht mehr nützlich sind. Schauen Sie sich die Tabelle an, die Sie hinzugefügt haben, als ein Problem mit dem Dateideskriptorleck aufgetreten ist, und fragen Sie sich: Brauchen Sie es heute? Sie wissen, an welchen Tisch ich denke.

Visualisierungsleistung

In der Widget-Palette für Ihr Dashboard stehen höchstwahrscheinlich viele Optionen zur Auswahl. Und zieht, um das Schönste zu nutzen! Aber nicht alle sind gleich - Menschen nehmen unterschiedliche Arten visueller Informationen unterschiedlich wahr. Der Benutzer möchte schnell navigieren, daher ist es unsere Aufgabe, die Daten so effizient wie möglich darzustellen.


Wahrnehmungsaufgaben in der Reihenfolge ihrer Genauigkeit.

Oben sind numerische Indikatoren für die Wahrnehmungsaufgaben von Menschen aufgeführt (Mackinley, 125) ² , die es leicht machen zu verstehen, wie einfach die Visualisierung für das Gehirn des Benutzers sein wird. Tatsächlich werden einige visuelle Komponenten unbewusst verarbeitet, wobei die Wahrnehmung auf der Ebene der Aufmerksamkeit unterhalb der Schwelle verwendet wird . Die richtige Verwendung von Farbe, Form, Position und Bewegung kann die Wahrnehmung wichtiger Informationen auf einem Dashboard erheblich erleichtern und beschleunigen (Few, 80) ¹ .


Beispiele für Attribute auf der Unterschwellen-Aufmerksamkeitsebene. Sie können sie bemerken, ohne an sie zu denken!

Maßstab und Einheiten

Nachdem Cleveland und McGill (830) ³ etwas tiefer in das Studium der Form eingetreten waren, stuften sie die Aufgaben nach Genauigkeit ein und stellten fest, dass die Position auf der allgemeinen Skala genauer ist als auf verschiedenen Skalen. Nur wenige (40-41) ergänzten dies, indem sie die Verwendung von Maßeinheiten und die erforderlichen Details anwiesen, damit der Benutzer keine unnötigen Berechnungen durchführen musste. Daher sollten nach Möglichkeit die gleichen Maßstäbe, Achsen und Maßeinheiten verwendet werden.


Drei Diagramme derselben Daten: ohne Einheiten, mit Einheiten und mit einer vergrößerten. 250 warum ?! Das linke und das mittlere Diagramm sind leichter zu vergleichen und das mittlere ist leichter zu verstehen. Ausrichtung und Einheiten sind wichtig!

Dank dieser Informationen können Sie Visualisierungsoptionen effektiver auswählen und diejenigen auswählen, mit denen der Leser die Daten schnell wahrnehmen kann.

Zeit

Wir verwenden aktiv Diagramme von Zeitsequenzen , daher müssen wir die Anzeige der Zeit sorgfältig prüfen. Diagramme sollten dasselbe Zeitfenster verwenden. Wenn das erste Diagramm eine Schicht in einer Stunde zeigt und an den aktuellen Moment gebunden ist, sollte dies auch in allen anderen Diagrammen der Fall sein. Dies gilt insbesondere dann, wenn ein Zeitwähler oder eine andere „globale“ Steuerung verwendet wird.

Viele Dashboards haben einen nützlichen „Cursor“: Wenn Sie mit der Maus über ein Diagramm fahren, zeigen andere Diagramme denselben Zeitpunkt an. Dies hilft dem Benutzer, die Zeit zu verstehen, und macht auch alle Abweichungen im Verhältnis von Zeit und Raum deutlich, wie im folgenden Beispiel zu sehen ist, in dem ein Diagramm breiter als das andere ist:


Das untere Diagramm ist breiter als die beiden oberen, aber der vertikale Balken des „Cursors“ ermöglicht es Ihnen, sie auszurichten.

Die gleichen Prinzipien gelten für das horizontale Layout. Widgets oder Grafiken, die nicht die gleiche Beziehung zwischen Zeit und Raum beibehalten, sollten dies entweder mit visuellen Unterschieden (z. B. einem Widget mit einem „Einzelwert“) oder einer eindeutigen Angabe klar vermitteln.

Versteckte Aggregation

Beachten Sie, dass wir uns in vielen Visualisierungen mit der Datenaggregation befassen müssen, die automatisch durchgeführt wird .

Damit Systeme funktionieren, müssen Dashboards Zeitfenster unterstützen, die über einen weiten Wertebereich variieren. Standardmäßig verwenden die Dashboards der meisten Systeme die Ansicht "Aktuell" und zeigen Werte im Intervall von einer Stunde bis zu den letzten fünfzehn Minuten an. Angenommen, die Daten werden in Abständen von zehn Sekunden erfasst, sollte jede Stunde 360 ​​Datenpunkte enthalten! Da jedes einzelne Diagramm nur sehr wenige informative Pixel enthält, müssen die Dashboard-Tools entscheiden, wie alle diese Punkte in kleine Felder eingefügt werden sollen.


Das obere Diagramm zeigt Daten für 15 Minuten und das untere Diagramm zeigt eine Woche. Beachten Sie, dass wir aufgrund der Standardaggregation gemittelter Daten vollständig Informationen über den periodischen Anstieg der Latenz verlieren. Die Widget-Auflösung wird rechts neben dem Diagrammtitel angezeigt.

Normalerweise wird dies mithilfe der Datenaggregation implementiert: Die Grafiken zeigen den Durchschnitt, die Menge oder ähnliches. Die Standardauswahl kann die Anzeige stark beeinflussen. Schauen wir uns das vorherige Diagramm an, nur anstelle des Durchschnitts werden die Maximalwerte aggregiert:


Wenn die maximalen Datenwerte für eine Woche aggregiert werden, wird die Verzögerung um etwa 30% höher.

Wie dies funktioniert, erfahren Sie in der Dokumentation Ihres Dashboard-Erstellungstools. Wir werden dieses Thema betrachten, wenn wir über verschiedene Arten von Diagrammen sprechen.

Zugabe: Verhältnisse und Mengen

Nach meiner Erfahrung ist dies eines der häufigsten Probleme in System-Dashboards. Indem wir den Zähler als Verhältnis oder als Summe anzeigen, können wir das Verständnis der Daten durch den Benutzer stark beeinflussen. Wenn wir die Anzahl der Fehler als Verhältnis anzeigen, ist jeder Punkt in der Grafik die Summe der Fehler geteilt durch die verstrichene Zeit. Wenn wir die Summe anzeigen, sehen wir natürlich die Summe. Dies bedeutet, dass das Datenformular identisch ist, nur der Maßstab unterscheidet sich.

Es wird empfohlen, dass Sie im Diagrammtitel die Art der angezeigten Daten deutlich angeben: Verhältnis oder Menge. Besprechen Sie dieses Problem bei der Auswahl zwischen den beiden Optionen mit dem Benutzer und wählen Sie das Formular aus, das Ihren Anforderungen am besten entspricht. Was erwartet er auf der Karte?

Hinweis : Wenn Sie mit Aggregation arbeiten, sollten Sie Verhältnisse und Summen verwenden!

Warnung: keine Daten

Wenn während der Messungen Probleme auftreten, fehlen möglicherweise einige Datenpunkte. Wenn der Benutzer eine regelmäßige Anzeige von Datenpunkten erwartet, kann dies ein Problem sein. In diesem Fall sollten Sie die Interpolation in Betracht ziehen. In der Regel verwenden System-Dashboards eine lineare Interpolation, um fehlende Daten zu verbinden. Manchmal wissen sie gar nicht, dass die Daten fehlen. Manchmal ändert sich die Auflösung der Daten.


Die blaue Linie füllt die fehlenden Daten mit Nullen. Die rote Linie verwendet eine lineare Interpolation.

In einem Anfall von Pedanterie kontaktierte ich Stephen Few selbst und stellte eine Frage zu diesem Problem. Ich habe mich schon lange für diese Aufgabe interessiert und war neugierig, wie er vorschlägt, mit Daten zu arbeiten, die in unregelmäßigen, wechselnden Intervallen verschwinden:

Wenn Sie Werte auf einer Zeitachse anzeigen, sind die Intervalle auf dieser Zeitachse normalerweise konstant. Das heißt, sie sind gleich weit voneinander entfernt. Wenn sich das Intervall ändert, sollte sich auch der Abstand zwischen den Intervallen entsprechend ändern, um diese Änderung visuell anzuzeigen, und sollte konstant bleiben, es sei denn, die Größe des Intervalls ändert sich erneut. Danach muss sich auch der Abstand ändern. Werte, die aufeinanderfolgenden Zeitintervallen zugeordnet sind, müssen durch eine Linie verbunden sein. Wenn jedoch aus irgendeinem Grund keine Werte in den Intervallen vorhanden sind, sollte die Linie in diesen Intervallen nicht fortgesetzt werden. Wenn Werte nur von Zeit zu Zeit gelesen werden (z. B. wenn einige Ereignisse auftreten) und nicht in gleichen Intervallen, sollten sie nicht durch eine Leitung verbunden werden. In solchen Fällen müssen Sie einen separaten Datenpunkt oder eine separate Spalte verwenden, um Werte zu codieren. Viel Glück bei der Suche nach einem Tool, das dies implementiert.

Wie interessant! Ich war mir nicht sicher, wie dies programmgesteuert implementiert werden könnte. Um das Problem zu lösen, skizzierte ich eine Skizze.


Der Mittelteil besteht aus schnelleren Intervallen. Es gibt keine Daten auf beiden Seiten. Fehlende Daten sind nicht verbunden. Die rosa Hervorhebung dient zu Informationszwecken und wird in der Grafik, die der Benutzer sieht, nicht angezeigt.

Sie fragen sich vielleicht: Warum implementiert kein einziges Dashboard-Erstellungspaket solche Funktionen? Meistens, weil Entwickler nicht wissen, ob Daten verloren gehen oder nicht. Normalerweise greifen wir in das Intervall ein, in dem Metriken eintreffen, und in der modernen Welt der abstrakten Container können diese Metriken in Sekundenbruchteilen erscheinen und verschwinden. Ja, dies ist ein komplexes Problem, das Sie dazu inspiriert, eine Lösung zu finden.

Allgemeine Empfehlungen

Einige weitere nützliche Tipps:

• . , . .
• . , . .
• , , 3D-, .

Der Benutzer kann Schwierigkeiten haben, Dashboards zu interpretieren, wenn er das Prinzip der Barrierefreiheit für Menschen mit Behinderungen nicht erfüllt. Befolgen Sie zur Vereinfachung der Benutzerfreundlichkeit die W3C-Richtlinien zur Barrierefreiheit . Einige sind möglicherweise einfacher zu implementieren als andere (dies hängt vom jeweiligen Tool ab), aber es lohnt sich trotzdem, darüber nachzudenken.

• Farbenblindheit ist sehr häufig: 1/12 der Männer und 1/200 der Frauen auf der Welt haben die Ununterscheidbarkeit von Rot und Grün . Dies ist besonders wichtig für Dashboards, da grüne und rote Farben häufig auf „gute“ und „schlechte“ Zustände hinweisen. Verwenden Sie verschiedene Techniken für Signale (siehe Abschnitt "Effizienz"): Größe, Farbe, Text und Symbole.
• : W3C 4.5:1 . . Consumer Finance Protection Bureau .
• , (). . , CSV , .
• Verwenden Sie die verfügbaren Navigations- und Data Mining-Funktionen, um die Browser-Hilfsfunktionen mit Tools wie WAI-ARIA zu nutzen .
• Was wird der Benutzer anzeigen? Das Armaturenbrett für einen großen Fernseher sollte sich höchstwahrscheinlich von dem unterscheiden, das auf dem 13-Zoll-Display des Laptops eines Gastingenieurs verwendet wird. Beachten Sie dies, wenn Sie ein Dashboard für Ihr Gerät entwerfen.

Zusammenfassend

Benutzer der Datenzuordnung müssen sorgfältig überlegen. Viele Aspekte sollten berücksichtigt werden, und in diesem Teil des Artikels habe ich ausführlich erklärt, was Designer und Entwickler, die Systemüberwachungstools erstellen, berücksichtigen sollten.

Kurze Wiederholung

• Verwenden Sie KPIs wie RED und USE. Zusätzliche Metriken werden basierend auf den Aufgaben des Benutzers bestimmt.
• , , CASE , !
• , , , . , !
• .
• , . .
• , . .
• . , .

1. (Few, Stephen). Information Dashboard Design . Analytics Press, 2013.
2. . (Mackinlay, Jock D.) Automating the Design of Graphical Presentations of Relational Information. ACM Transactions on Graphics, Vol. 5, 1986
3. . , (Cleveland, William S., McGill, Robert). Graphical Perception and Graphical Methods for Analyzing Scientific Data. American Association for the Advancement of Science, 1985.

3. ?

Warten Sie, aber sind Tabellen wirklich Visualisierungen? Ja und noch mehr! Nur wenige ¹ erinnern uns daran, dass es keinen Grund gibt, (114) ^1- Diagramme zu verwenden, wenn wir Einheitswerte anzeigen . Wenn es nur wenige Werte gibt, ist es sehr effektiv, die Tabelle zu verwenden.


Guter alter Tisch.

Tabellen sind gebräuchliche und gut verstandene Visualisierungen, um Bedeutung zu finden. Die obige Tabelle macht es sehr einfach, den Wert und die zugehörigen Parameter zu finden. Diese Version ist möglicherweise zu überlastet für das System-Dashboard, aber wir können sie in einen „Einzelwert“ wie folgt konvertieren:


Die Tabelle wird auf ein für das Widget geeignetes Volume komprimiert.

Wenn der Benutzer einen Wert kennen muss, z. B. den Summen-, Durchschnitts- oder Sofortwert, ist die Verwendung einzelner Zahlen oder Tabellen ideal.

Liniendiagramme

Liniendiagramme eignen sich gut für die meisten angezeigten Daten. Ein Liniendiagramm besteht aus Punkten, die durch gerade Liniensegmente verbunden sind. Es ist auch erwähnenswert, dass diese Dateninterpolation im Zeitsequenzdiagramm dem Benutzer ein Gefühl für die Verbindung von Form und Zeit vermittelt . Sie werden oft von Leuten hören, die sich die Aktualisierung des Diagramms ansehen, dass die Metrik nach oben oder unten geht.


Das Formular ist visuell. Es passiert etwas mit Verzögerungen!

Liniendiagramme sind beliebte Visualisierungen, da sie viele Attribute auf der Aufmerksamkeitsstufe unterhalb des Schwellenwerts mit einer minimalen Anzahl von Pixeln enthalten. Die Linien haben eine Neigung und einen Winkel, eine Position und eine Farbe, so dass Sie ohne zu zögern viele Informationen extrahieren können. Sie können die Anzeige etwas komplizieren und die Dicke und Helligkeit der Linien verwenden, um Aufmerksamkeit zu erregen:


Offensichtlich ist hier die braune Linie am wichtigsten.

Nicht alles ist auf Liniendiagramme beschränkt.

Bevor Sie die Registerkarte mit dem Artikel schließen und alle Widgets in Liniendiagramme umwandeln, werde ich auf einige Aspekte eingehen, mit denen Sie vorsichtig sein müssen. Zu viele Linien in einem Diagramm können seine Form verbergen, die Farbe verwischen, die Wahrnehmungsverzögerung erhöhen und unbrauchbar machen (in einem solchen Diagramm können Sie nur Ausreißer analysieren). In diesem Fall helfen uns Heatmaps (siehe unten).


Die Linien liegen so nahe beieinander, dass sie schwer zu unterscheiden sind.

Liniendiagramme interpolieren Daten zwischen zwei Punkten mithilfe einer Linie. In den meisten Fällen ist dies wünschenswert, da die durch die Linien erzeugte Form die Wahrnehmung unterstützt. Leider kann die Interpolation auch fehlende Informationen verbergen oder sogar verletzen: Lassen Sie uns glauben, dass wir Daten haben, die wir eigentlich nicht haben. Nehmen Sie zum Beispiel das obige Liniendiagramm und fügen Sie Punkte für jede Messung hinzu:


Die Punkte sagen uns, dass wir für jede Verzögerungsänderung nur einen Messwert erhalten.

Die Länge der Linie kann irreführend sein, dass es mehr Messungen gibt als es tatsächlich gibt, zum Beispiel Änderungen wie in der obigen Grafik.

Flächendiagramme

Erstens verwenden nicht das Diagramm mit den Bereichen, die überlappen einander nicht . Das Überlappen eines Diagramms mit einem anderen verbirgt nur die Daten und ist verwirrend.


Worum geht es hier? Neben Grün ist nichts sichtbar.

Flächendiagramme werden am besten verwendet, wenn alle Summen wichtig sind . Sie haben viel mit Liniendiagrammen gemeinsam, da sie Form zeigen. Leider ist diese Form auch ihr Nachteil: Wenn sich eine der unteren Regionen ändert, passiert dasselbe mit allen Regionen darüber. Der Benutzer versteht möglicherweise nicht, was die Änderungen verursacht hat. In einer solchen Situation kann es schwierig sein, echte Veränderungen zu finden.


Die Verzögerung variiert um 4 Sekunden, aber wir können nicht feststellen, was die Änderungen beeinflusst. Ändern sich die Werte aller Zeilen?

Anstelle eines Regionsdiagramms schlägt Few vor, ein Liniendiagramm mit einer Summe und einem zusätzlichen Diagramm zu verwenden, das den Beitrag einzelner Werte zeigt (Few, 146) ¹ . Dies erleichtert das Verfolgen von Änderungen erheblich.


Hier werden die gleichen Daten wie im obigen Flächendiagramm dargestellt. Das linke Diagramm zeigt die Summe der Verzögerungen, und das rechte Diagramm zeigt jedes Element, das die Verzögerung beeinflusst. Die Werte, die die Verzögerung beeinflussen, sind gut verstanden und gleichzeitig können wir die Summe sehen!

Balkendiagramme

Liniendiagramme zeigen Formen, Balkendiagramme zeigen „genaue“ Werte. Die meisten Systemmetriken sind mit einem Liniendiagramm besser geeignet. Eine Ausnahme kann ein Diagramm sein, das mehrere Metriken vergleicht:


Wir können diese beiden Zeitsequenzen leicht mit Spalten vergleichen. Wenn es mehr Werte gibt, wird es schwieriger.

Das Balkendiagramm hilft beim Vergleichen der Werte in jedem Intervall aufgrund der klaren Beziehung zwischen den Intervallen und der einfachen Vergleichbarkeit der Längen. Wenn Sie ein Balkendiagramm auswählen, bedeutet dies, dass es für Ihren Benutzer am wichtigsten ist, eine kleine Anzahl von Werten zu vergleichen.

Seien Sie vorsichtig und vermeiden Sie Moiré . Dies kann auftreten, wenn die Spalten klein und gleichmäßig verteilt sind. Fügen Sie einen kleinen Abstand zwischen den Spalten ein, um sie visuell zu trennen, wie in der obigen Abbildung dargestellt.

Überlagerungsspalten

Sehen Sie alles, was über überlappende Diagramme mit Bereichen geschrieben wurde. Überlagerungsspalten werden normalerweise selten verwendet. Sie werden nur benötigt, wenn der Wert als Ganzes wichtig ist. Benutzer haben Schwierigkeiten, gestapelte Spalten zu vergleichen.

Heatmaps

Verwenden Sie Heatmaps, wenn Sie ein Liniendiagramm mit zu vielen Linien haben. Heatmaps verwenden eine Änderung der Farbhelligkeit, sodass eine sehr große Datenmenge auf kleinem Raum gepackt werden kann. Wo in Liniendiagrammen die Überlappung von Linien die Wahrnehmung stört, verbessern Wärmekarten bei Überlappung die Farbe. Dies hat einen guten Nebeneffekt: Heatmaps zeigen Streifen an Überlagerungen, die beim Erkennen von Mustern und Ausreißern helfen.


Liniendiagramme sind in allem außer Ausreißererkennung schrecklich. Heatmaps zeigen, wo das Hauptdatenarray gruppiert ist.

Diese Möglichkeit, mehr Daten und Muster zu erkennen, hat ihren Preis. In Heatmaps nimmt die Genauigkeit ab, da Menschen nicht leicht zwischen vielen Farbhelligkeiten unterscheiden können. Nur wenige sagen, dass die Unterscheidbarkeitsgrenze bei 5 Helligkeitsstufen liegt (wenige, 86) ¹ . Dies bedeutet, dass Heatmaps am besten in Situationen verwendet werden, in denen Genauigkeit weniger wichtig ist als die allgemeine Form der Visualisierung.

Skalen, Marker, Intervalle usw.

Verwenden Sie Einschränkungen in Visualisierungen nur, wenn die Daten tatsächlich diese Einschränkungen aufweisen. Zum Beispiel ist es verwirrend, die Anzahl der Anforderungen pro Sekunde in Form einer Skala anzuzeigen, da dieser Indikator kein Maximum hat!

Wenn Sie ein Limit anzeigen müssen, z. B. einen Prozentsatz oder eine Warteschlange mit maximaler Tiefe, kann die Verwendung solcher Visualisierungen unglaublich nützlich sein. Sie ermöglichen es uns, über den Wert des Grenzwerts zu berichten und zu verdeutlichen, wie nahe der Wert an diesem Grenzwert liegt. Verwenden Sie diese Art der Visualisierung, wenn die Metrik eine Vergleichsbasis hat!


Dies ist ein akzeptables Beispiel für die Verwendung eines Intervalls, da es Grenzen hat und dem Benutzer beim Navigieren hilft.

Wenn Sie dieser Visualisierung Farbe hinzufügen, können der Benutzer den aktuellen Wert, die oberen und unteren Grenzen sowie die Dringlichkeit des aktuellen Werts schnell verstehen.

Leider kenne ich keine Tools, mit denen Sie die Diagrammskala vollständig nutzen können. Im besten Fall verwenden Dashboard-Tools nur eine Markierung.

Andere Grafiken

Andere Grafiken, die keinen ganzen Abschnitt verdienen.

• Kreisdiagramme: Verwenden Sie sie nicht. Normalerweise können Benutzer den Sektorbereich eines Diagramms nicht schätzen. Verwenden Sie stattdessen Spalten.
• Donut-Diagramme: Dies ist normalerweise eine schöne Möglichkeit, eine einzelne Bedeutung zu zeigen. Oder einfach ein Kreisdiagramm mit einem Loch im Inneren.
• Überlagerte Liniendiagramme: Ähnlich wie Diagramme mit Regionen, jedoch schlechter als diese, da sie aufgrund der fehlenden Füllung der Regionen unerwartet sind. Vermeiden Sie sie.
• Flammendiagramme: ideal für einige Anwendungsfälle, aber normalerweise nicht für System-Dashboards, sondern eher für Profiler.
• Sparklines: Ideal für die Anzeige einzelner Werte, aber ohne die bekannten Liniendiagrammelemente fehlt ihnen häufig der Kontext. Nur wenige Grafikvorschläge, die er Sparkstrip nannte, fügten Farb- oder Schattierungsstreifen hinzu, um dem Benutzer die Navigation zu erleichtern . Leider kenne ich keine Tools mit diesen Grafiken.
• Blockdiagramme: selten in unseren Werkzeugen
• Streudiagramme: Verwenden Sie stattdessen Balkendiagramme. Vielleicht können sie nützlich sein, wenn seltene Daten über einen längeren Zeitraum eintreffen?
• Streudiagramme: ideal zum Auffinden von Korrelationen, aber dies ist eine spezielle Anwendung, daher werden sie hier nicht betrachtet.
• Datenträger und Skalen: Wenn Ihre Daten nicht wirklich Unter- und Obergrenzen haben, ist es verwirrend, sie in Form von Datenträgeranzeigen anzuzeigen. Außerdem nehmen sie vergeblich viel Platz ein.

Zusammenfassend

Bevor Sie mich dafür kritisieren, dass ich einige der seltenen Visualisierungen Ihres Tools nicht erwähnt habe, möchte ich Sie daran erinnern, dass ein Benutzer , der ein Dashboard, eine Grafik oder eine Visualisierung versteht, gut ist . Wenn Sie Ihre Verwendungsszenarien und Ihre Benutzerbasis erweitern, sollten Sie zum Auswahlhandbuch für die Visualisierung in Teil 2 zurückkehren.


Höchstwahrscheinlich ist die Leitung genau das, was Sie brauchen. Vielleicht ist etwas anderes nützlich. Hummer ist keine Zeitleiste.

Verwenden Sie Liniendiagramme, sie sind großartig! Einzelwerte oder tabellarische Diagramme eignen sich hervorragend zur Anzeige von Sofort- / Einzelwerten. Spalten eignen sich gut zum Vergleichen einer kleinen Anzahl von Datensätzen, und Heatmaps haben auch einen eigenen Anwendungsbereich.

Quellen

1. Stephen Few (wenige, Stephen). Information Dashboard Design . Analytics Press, 2013.

Teil 4. Den Kontext verbessern.

Grundlagen: Text

Die Leute lesen ziemlich gut. Dashboard-Entwickler neigen normalerweise zur Kürze. In Teil 2 haben wir uns Maßstab und Einheiten angesehen. Indem wir Daten markieren und die Form dieser Etiketten durchdenken, können wir die Wahrnehmung von Daten verbessern.

Aber gehen Sie nicht tiefer: Verbessern Sie einfach die Signatur in den Diagrammen. Ändern Sie nicht die Buchstaben! Stellen Sie sich vor, Sie sind ein neuer Bediener und haben zuerst ein Dashboard gesehen. Was müssen Sie wissen?


Die Ersteller des linken Diagramms haben sich nicht viel Mühe gegeben. Auf der rechten Seite befinden sich logische Signaturen, die dem Benutzer helfen, den Kontext der Visualisierung zu verstehen.

Grundlagen: Nächste Schritte

Wenn der Benutzer mehr über eine bestimmte Visualisierung erfahren möchte, wie kann er dies dann tun? Normalerweise reicht es aus, auf den Titel zu klicken. Danach wird eine Vollbildversion geöffnet, mit der Sie die Visualisierung genauer untersuchen können. Dies ist ein bequemer Ort, um Datentabellen und andere nützliche Informationen zu platzieren:


Wenn Sie das Diagramm im Vollbildmodus öffnen, werden neue Tools angezeigt, da der Benutzer Interesse an einer tieferen Studie gezeigt hat.

Wenn der Benutzer schlechte Messwerte in der Tabelle sieht, muss er möglicherweise ein anderes Tool verwenden oder Kollegen benachrichtigen. Warum nicht diese Funktionen in das Diagrammmenü einbetten?


Das Menü kann uns dazu führen, Ausnahmen zu verfolgen, Informationen an Slack zu übertragen oder den Prozess der Protokollierung eines Vorfalls einzuleiten.

Menschliches Handeln, Managementdaten

Im Abschnitt „Lineare Diagramme“ von Teil 3 haben wir über die Bedeutung der Tatsache gesprochen, dass die Zeit in den Laufdiagrammen auf der X-Achse angezeigt wird. Dies ist für Benutzer unglaublich nützlich, da es Zeitänderungen anzeigt, aber der Zeitablauf kein kausaler Faktor für unsere Daten ist. Dafür brauchen wir mehr Kontext.


Viele Gründe können zu Änderungen führen.

Tufty schlug vor, die Anzeige durch „Einfügen zusätzlicher Variablen in das Grafikdesign“ (38) zu verbessern, um die Verständlichkeit der Ursache-Wirkungs-Beziehungen zu verbessern ² . Dies funktioniert gut für System-Dashboards, da Änderungen, die von Personen oder automatisierten Systemen vorgenommen werden, häufig zu Systemeffekten führen. Das Verfolgen und Visualisieren solcher Ereignisse liefert dem Benutzer wichtige Informationen zu Ereignissen, die mit dem Systemverhalten korrelieren können.


Die blaue Raute zeigt an, dass das Bereitstellungsmoment stark mit einer Verringerung der Latenz korreliert. Großartig!

Diese Steuerpegeldaten haben eine viel niedrigere Frequenz als die in unseren Systemen gemessenen Signale. Es ist erforderlich, eine hohe Priorität einzuräumen, damit solche Änderungen aufgezeichnet und an einer Stelle mit Dashboards angezeigt werden. Dies verbessert die Geschwindigkeit von Benutzeraufgaben erheblich.

Implementierung: Markieren von Ereignissen

Leider unterstützen die meisten Tools zum Erstellen von System-Dashboards diese Daten teilweise, was häufig als "Anmerkungen" bezeichnet wird. Ereignisse sind normalerweise schwer wiederzuverwenden, sie werden nicht getippt und oft als augenblicklich angesehen . Einige Pakete unterstützen Ereignisse mit Zeitstempeln am Anfang und am Ende, um Bereitstellungen und andere "Schritt" -Änderungen durchzuführen.

Um Anmerkungen auf Dashboards zu übertragen, müssen Sie häufig Dutzende von Split-Systemen manuell konfigurieren. Dann müssen Sie nach Möglichkeiten suchen, um alle relevanten Ereignisse mit Dashboards zu verbinden. Sehr unangenehm!

Hier einige Tipps zur korrekten Implementierung dieses Verhaltens:

• Verwenden Sie allgemeine Ausgaben wie CloudTrail Events und CI / CD-Systeme.
• Versuchen Sie, Ereignisse wiederzuverwenden, damit Benutzer keine eigenen erstellen müssen und nur an ihren Dashboards arbeiten.
• Vermeiden Sie Chaos: Zu viele Ereignisse sind so schlimm wie ihre Abwesenheit!
• Stellen Sie sicher, dass das Ereignis einen Link enthält, damit der Benutzer darauf klicken und weitere Informationen erhalten kann. Dies bietet dem Benutzer einen Kontext, ermöglicht jedoch, dass das Dashboard nicht zu einer Verwaltungsoberfläche wird. Es ist besser, wenn Benutzer einfach auf Links klicken können.

Standards, Aufgaben und Vereinbarungen

Einige KPIs haben akzeptable Bereiche, interne Ziele oder sogar vertragliche Verpflichtungen. Das Hinzufügen dieser Informationen zu den entsprechenden Diagrammen kann Teil der Visualisierung sein (siehe Abschnitt „Skalen, Markierungen, Intervalle usw.“ in Teil 3) oder ein Kontext innerhalb des Widgets sein. In diesem Kontext können Benutzer die Anforderungen vermeiden, wie das Diagramm aussehen soll oder wie sich der aktuelle Wert auf die Stakeholder auswirken kann.

Viele Tools unterstützen eine ähnliche Wasserlinienfunktion. Durch das Hinzufügen erhalten die Benutzer einen zusätzlichen Kontext, in dem die Zeitfolge kein beliebiger Wert ist, sondern ein Vergleich mit unseren Erwartungen.


Der SLO unseres Dienstes wird in Form einer "Wasserlinie" zur Tabelle hinzugefügt.

Wir können diese Funktionalität erweitern, indem wir Zeitverschiebungen, Mittelwertbildung oder verschiedene Arten der Anomalieerkennung hinzufügen, um die erwarteten Werte zu demonstrieren:


So sehen normale Messwerte aus. Dieses Schleifenmuster sieht richtig aus!

Da wir diese Grenzwerte und erwarteten Werte kennen, können wir einen weiteren Schritt nach vorne machen und Informationen für den Benutzer im Voraus verarbeiten. Wenn die Norm oder Erwartung verletzt wird, können wir proaktiv auf diesen Verstoß hinweisen. Dann wird der Benutzer auf die wichtigsten Informationen achten (wenige, 54) ¹ .


Sieht so aus, als würden wir SLO in diesem aktuellen Chart brechen!

Wir haben die anonyme Linie in der Tabelle für eine Situation mit viel Kontext und einer klaren Anzeige des Systemzustands belassen. Wir sehen deutlich den Überschuss an SLO!

Anzeichen von Gefahr oder anderen Krankheiten

In der Regel werden System-Dashboards zur Diagnose von Abstürzen verwendet, insbesondere als Reaktion auf Gefahrensignale. Der oben gezeigte Kontext der Regelgeschwindigkeit kann durch Daten aus Gefahrensignalen ergänzt werden. Wann und wie sollen sie arbeiten?


Zeitleistenbeschriftungen für Gefahrensignale, hervorgehobene Verstöße und Farbwerte, die Schwellenwerte überschreiten.

Mithilfe dieser Informationen kann der Benutzer verstehen, was den Alarm verursacht hat, und das Problem leichter lösen. Andere Grafiken bieten möglicherweise zusätzlichen Kontext, oder die von uns hinzugefügten Menüs helfen bei weiteren Aktionen.

Projektionen und andere synthetische Daten

Das Hauptvolumen der angezeigten Daten sind direkte Messungen der Messwerte der Systeme. Daher müssen Sie bei der Anzeige projizierter, vorhergesagter oder anderweitig synthetisierter Daten vorsichtig sein, damit der Benutzer versteht, worauf er vertrauen sollte. Das Consumer Financial Protection Bureau hat Anleitungen zum Herunterspielen dieser Daten .

Ein Beispiel für ein solches Problem wäre eine temporäre Fan-Tabelle .


Der geschätzte Wert und der Bereich möglicher zukünftiger Werte ermöglichen es dem Benutzer zu sehen, was passieren könnte.

Kurze Wiederholung

• Denken Sie sorgfältig über die Signaturen in den Diagrammen nach und fügen Sie Überschriften, Unterüberschriften und alle anderen erforderlichen Informationen hinzu.
• Unsere Arbeit endet nicht mit einer zeitlichen Abfolge. Benutzer benötigen einen Kontext, um zu verstehen, was sonst noch vor sich geht. Dieser Kontext sollte verschiedenen Abteilungen der Organisation / des Unternehmens entnommen werden.
• Das Anzeigen von Ereignisdaten in Zeitsequenzen hilft Benutzern zu verstehen, was sich möglicherweise geändert hat. Solche Ereignisse sind Beobachtungsdaten und haben höhere Signal-Rausch-Verhältnisse.
• Die Daten in den Diagrammen können verbessert werden, indem normale, erwartete oder Zielwerte hinzugefügt werden, sodass der Benutzer besser navigieren kann.
• Das Hinzufügen von Gefahreninformationen beschleunigt die Reaktionszeiten von Vorfällen.
• Die Verwendung jeder Art von Projektion erfordert eine sorgfältig durchdachte Visualisierung.

Zusammenfassend

Dank der Hilfe meiner Benutzer habe ich viel darüber gelernt, wie man gute Dashboards erstellt. Viele der Lektionen widersprechen meinen früheren Ansichten und Ratschlägen. Viele dieser Empfehlungen zeigen, wie sehr wir unsere Tools verbessern müssen, insbesondere im Hinblick auf den Kontext.

Das alles ist sehr wichtig . Viele Unternehmen verwenden diese Dashboards als primäre Informationsquelle über den Status, die Leistung und die Verfügbarkeit geschäftskritischer Dienste. Sie sind auch Quellen des Informationsaustauschs für Designorganisationen. In vielen Fällen sind Dashboards geschäftlich, da das Unternehmen die Personengruppe, die die Website nutzt, nicht sehen kann. Unsere einzige Beobachtungsmethode sind die Daten, die wir sammeln und anzeigen.

Dashboards und Grafiken sind Ressourcen, die die Rendite der Entwickler erheblich steigern können. Ein paar Tage durchdachter Designentwicklung werden mit Tausenden von Stunden belohnt, die von Ingenieuren, Managern und / oder Benutzern eingespart werden. In vielen Fällen können sie zu einer schnelleren Reaktion auf Probleme führen.

Es ist deine Zeit wert, oder?

Ich hoffe, Sie haben diesen Artikel auch gerne gelesen, da ich die Informationen studiere und schreibe. Ich empfehle Ihnen, die am Ende jedes Teils angegebenen Quellen zu studieren, um dieses Thema genauer zu untersuchen.

Quellen

1. Stephen Few (wenige, Stephen). Information Dashboard Design . Analytics Press, 2013.
2. Edward R. Tufte (Tufte, Edward R.). Die visuelle Anzeige quantitativer Informationen. Graphics Press, 1998.