Freigeben über

Stilrichtlinien für die Datenvisualisierung für Office-Add-Ins

Durch eine gute Datenvisualisierung erhalten Benutzer einen besseren Einblicke in ihre Daten. Anhand dieser Einblicke können die Benutzer informative und überzeugende Geschichten ableiten. Dieser Artikel bietet Richtlinien, die Ihnen bei der Entwicklung effektiver Datenvisualisierungen in Ihren Add-Ins für Excel- und andere Office-Apps helfen.

Es wird empfohlen, die Fluent-Benutzeroberfläche zu verwenden, um das Chrom für Ihre Datenvisualisierungen zu erstellen. Die Fluent-Benutzeroberfläche enthält Stile und Komponenten, die sich nahtlos in das Aussehen und Verhalten von Office integrieren lassen.

Elemente für die Datenvisualisierung

Datenvisualisierungen verwenden ein allgemeines Framework und gemeinsame visuelle und interaktive Elemente, einschließlich Titeln, Bezeichnungen und Datenplots, wie in der folgenden Abbildung dargestellt.

Liniendiagramm mit beschrifteten Titeln, Achsen, Legende und Zeichnungsfläche.

Diagrammtitel

Befolgen Sie diese Richtlinien für Diagrammtitel.

  • Gestalten Sie Ihre Diagrammtitel gut lesbar. Positionieren Sie sie so, dass eine klare visuelle Hierarchie bezüglich des restlichen Diagramms entsteht.

  • Verwenden Sie im Allgemeinen die Groß-/Kleinschreibung des Satzes (das erste Wort groß schreiben). Um Kontraste zu erzeugen oder Hierarchien zu verstärken, können Sie alle Feststelltaste verwenden, aber alle Feststelltaste sollten sparsam verwendet werden.

  • Integrieren Sie die Fluent-Ui-Typrampe, um Ihre Diagramme mit der Office-Benutzeroberfläche konsistent zu gestalten, die Segoe verwendet. Sie können auch eine andere Schriftart verwenden, um Diagramminhalte von der Benutzeroberfläche abzuheben.

  • Verwenden Sie serifenlose Schriftarten in großen Satzgrößen.

Achsenbeschriftungen

Gestalten Sie Ihre Achsenbeschriftungen ausreichend dunkel und mit einem ausreichenden Kontrastverhältnis zwischen Text- und Hintergrundfarbe. Stellen Sie sicher, die Achsenbeschriftungen nicht zu dunkel sind.

Leichte Graustufen sind für Achsenbeschriftungen am effektivsten. Erkunden Sie die folgenden neutralen Farbpaletten der Fluent-Benutzeroberfläche.

Informationen, die Daten enthalten

Die Pixel, die die tatsächlichen Daten in einem Diagramm darstellen, werden als Informationen, die Daten enthalten, bezeichnet. Dies sollte das Hauptaugenmerk der Visualisierung sein. Vermeiden Sie die Verwendung von Schlagschatten, langen Gliederungen oder nicht benötigter Designelemente, die Daten verzerren oder zu Verwirrungen führen. Verwenden Sie nur dann Farbverläufe, wenn Datenwerte mit Farbwerten verknüpft sind. Verwenden Sie keine dreidimensionalen Diagramme, es sei denn, ein messbarer Wert ist mit der dritten Dimension verknüpft.

Farbe

Wählen Sie Farben, die Designs des Betriebssystems oder von Anwendungen entsprechen, anstelle von hartcodierten Farben. Stellen Sie gleichzeitig sicher, dass die von Ihnen angewendeten Farben die Daten nicht verfälschen. Eine fälschliche Verwendung von Farben in Datenvisualisierungen kann zu einer Verzerrung von Daten und einer falschen Informationsaufnahme führen.

Bewährte Methoden zur Verwendung von Farben in Datenvisualisierungen finden Sie hier:

Gitternetzlinien

Gitternetzlinien sind häufig für das genaue Lesen eines Diagramms erforderlich, sollten aber als sekundäres visuelles Element dargestellt werden, das die Freihandeingabe der Daten verbessert und nicht mit ihr konkurriert. Machen Sie statische Gitternetzlinien dünn und leicht, es sei denn, sie sind speziell für hohen Kontrast konzipiert. Sie können die Interaktion auch verwenden, um dynamische Just-in-Time-Gitternetzlinien zu erstellen, die im Kontext angezeigt werden, wenn ein Benutzer mit einem Diagramm interagiert.

Leichte Graustufen sind für Gitternetzlinien am effektivsten. Erkunden Sie die folgenden neutralen Farbpaletten der Fluent-Benutzeroberfläche.

In der folgenden Abbildung ist eine Datenvisualisierung mit Gitternetzlinien dargestellt.

Datenvisualisierung eines Liniendiagramms mit Gitternetzlinien.

Legenden

Das Hinzufügen von Legenden bietet sich in folgenden Fällen an:

  • Zwischen Reihen unterscheiden.
  • Präsentieren von Skalierungs- oder Wertänderungen.

Stellen Sie sicher, dass Ihre Legenden die Datenfarbe verbessern und nicht mit ihr konkurrieren. Platzieren Sie Legenden folgendermaßen:

  • Standardmäßig linksbündig oberhalb der Zeichnungsfläche, wenn alle Legendenelemente über das Diagramm passen.
  • Wenn alle Legendenelemente nicht über das Diagramm passen, oben rechts auf der Zeichnungsfläche, und machen Sie es ggf. scrollbar.

Um die Lesbarkeit und Barrierefreiheit zu optimieren, ordnen Sie Legendenmarker der relevanten Diagrammform zu. Verwenden Sie z. B. Kreislegendenmarker für Punktdiagramm- und Blasendiagrammlegenden. Verwenden Sie Legendenmarkierungen für Liniensegmente für Liniendiagramme.

Datenbeschriftungen und QuickInfos

Stellen Sie sicher, dass Datenbeschriftungen und QuickInfos über ausreichende Leerräume und Typvariationen verfügen. Verwenden Sie Algorithmen, um Verdeckung und Kollision zu minimieren. Beispielsweise kann eine QuickInfo standardmäßig rechts neben einem Datenpunkt angezeigt werden, aber nach links, wenn rechte Ränder erkannt werden.

Entwurfsgrundsätze

Das Office-Entwicklungsteam hat die folgenden Entwurfsgrundsätze erstellt, die wir beim Entwickeln neuer Datenvisualisierungen für die Office-Produktfamilie verwenden.

Visuelle Entwurfsgrundsätze

  • In Visualisierungen sollten Daten optimal dargestellt werden, damit sie besser verstanden werden. Heben Sie die Daten hervor, und fügen Sie dabei unterstützende Elemente nur dann hinzu, wenn diese für mehr Kontext erforderlich sind. Vermeiden Sie unnötige Verzierungen, z. B. Schlagschatten und Konturen, Diagrammschrott oder Datenverzerrungen.
  • Visualisierungen sollten zur weiteren Erkundung anregen, indem sie ein vielfältiges visuelles Feedback liefern. Verwenden Sie bewährte, Steuerelemente für die Benutzeroberfläche und klares Systemfeedback.
  • Setzen Sie bewährte Entwurfsgrundsätze ein. Verwenden Sie bewährte typografische und visuelle Kommunikationsentwurfgrundsätze, um die Form, Lesbarkeit und Bedeutung zu verbessern.

Entwurfsgrundsätze für Interaktion

  • Gestalten Sie Ihre Entwicklungen so, dass sie zur weiteren Erkundung anregen.
  • Ermöglichen Sie eine direkte Interaktionen mit Objekten, die neue Einblicke liefern (z. B. eine Sortieren durch Ziehen).
  • Verwenden Sie einfache, direkte und vertraute Interaktionsmodelle.

Weitere Informationen zur Entwicklung von benutzerfreundlichen interaktiven Datenvisualisierungen finden Sie unter Grundsätze und Fallen bei der Entwicklung von Benutzeroberflächen).

Entwurfsgrundsätze für Bewegung

Bewegung folgt auf Impuls. Visuelle Elemente sollten sich in der gleichen Richtung und mit der gleichen Geschwindigkeit bewegen. Dies gilt für:

  • Das Erstellen von Diagrammen
  • Den Übergang von einem Diagrammtyp zu einem anderen Diagrammtyp
  • Das Filtern
  • Die Sortierung
  • Das Addieren oder Subtrahieren von Daten
  • Das Aufteilen von Daten
  • Ändern der Größe eines Diagramms

Das Erstellen einer Wahrnehmung von Kausalität. Beim Staging von Animationen gilt Folgendes:

  • Stellen Sie immer nur eine Sache bereit.
  • Stellen Sie Änderungen an Achsen vor Änderungen an Informationen bereit
  • Stellen Sie Objekte als Gruppe bereit und animieren diese, wenn sie sich mit der gleichen Geschwindigkeit in der gleichen Richtung bewegen.
  • Stellen Sie Datenelemente in Gruppen von maximal 4 bis 5 Objekten bereit. Für Benutzer ist es schwierig, mehr als 4 bis 5 Objekte unabhängig zu verfolgen.

Animation fördert die Bedeutung.

  • Animationen steigern das Verständnis von Benutzern im Zusammenhang mit Änderungen an Daten, liefern Kontext und dienen als nicht verbale Anmerkungsebene.
  • Animationen sollten in einem aussagekräftigen, koordinierten Raum der Visualisierung verwendet werden.
  • Passen Sie die Animation an die Visualisierung an.
  • Vermeiden Sie überflüssige Animationen.

Bewegung folgt auf Daten.

  • Behalten Sie Datenzuordnungen bei. Wenn ein Bereich mit einer Kennzahl verknüpft ist, sollte dieser Bereich im Übergang bleiben.
  • Verwenden Sie eine konsistente Animationsentwurfsprache. Ordnen Sie, soweit möglich, Datenvisualisierungsanimationen einer vorhandenen Office-Bewegungsentwurfssprache zu. Verwenden Sie ähnliche Animationen für ähnliche Diagrammtypen.

Eingabehilfen in Datenvisualisierungen

  • Verwenden Sie farbe nicht als einzige Möglichkeit, Informationen zu kommunizieren. Personen, die farbenblind sind, können die Ergebnisse nicht interpretieren. Verwenden Sie, wenn möglich, neben Farben zusätzlich Form, Größe und Textur, um Informationen zu vermitteln.
  • Sorgen Sie dafür, dass auf alle interaktiven Elemente, z. B. Schaltflächen oder Auswahllisten, über die Tastatur zugegriffen werden kann.
  • Senden von Eingabehilfeereignisse an Bildschirmsprachausgaben, um Fokusänderungen, QuickInfos usw. anzukündigen.

Siehe auch