Tabellen und Graphen

Tabellen helfen dabei, größere Mengen an Daten strukturiert darzustellen.

Eine typische Tabelle besteht aus Spalten bzw. Reihen, einer Überschrift, auch Label genannt und den eigentlichen Daten.

Anders als ein Fließtext sind Tabellen nicht dazu konzipiert, ganz gelesen zu werden, sondern werden nur gescannt bzw. gefiltert. Deswegen liefert eine gute Tabelle nicht nur strukturierte Daten, sondern sie erlaubt es dem User auch mit ihr zu interagieren, um den Prozess der Informationssuche zu beschleunigen.

Die Sortiertrichtung wird häufig mit einem kleinen Dreieck angezeigt. Zeigt das Dreieck nach oben, werden die Daten aufsteigend sortiert, zeigt das Dreieck nach unten werden die Daten absteigend sortiert.

Es können auch speziellere Filter in eine Tabelle integriert werden, um die Daten noch spezifischer zu ordnen.

Scrollen

Falls eine Tabelle besonders viele Informationen enthält, passen diese nicht auf den vorhandenen Bildschirm und muss deswegen scrollen, um alle Daten lesen zu können.

Um Verwirrung vorzubeugen, sollte das Label oben fixiert werden, sodass es beim Scrollen mitscrollt.

Durch die Fixierung des Labels muss nicht ständig nach oben gescrollen werden und weiß dadurch sofort, in welcher Spalte bzw. Reihe sich die Information befindet.

Ausrichtung

Bei der Ausrichtung der Informationen sollten die Text-Daten immer links und die Zahlen rechts angeordnet werden.

Dies hängt mit der natürlichen Leserichtung des Menschen zusammen, wenn sie eine Tabelle (oder einen Text) überfliegen. Sie wird auch als F-Muster (F-Pattern) bezeichnet. Normalerweise wird als Erstes die Überschrift gelesen, danach folgt eine vertikale Bewegung nach unten, dann eine horizontale nach rechts und scannen so nach und nach die Tabelle.

Weißraum

Bei Weißraum gilt wie bei allem nicht zu viel und nicht zu wenig. Es sollte beachten werden, dass an den Seiten rechts und links sowie innerhalb der Zelle genug Platz vorhanden ist, damit der Text atmen kann und die Daten leichter lesbar sind. Denn je dichter ein Text, desto schlechter ist er lesbar.

Ein guter Orientierungspunkt ist hierbei die Schriftgröße, die verwendet wurde. Es sollte oberhalb und unterhalb sowie seitlich einmal die Schriftgröße in Form von Weißraum frei gelassen werden. So wird sichergestellt, dass auf jeden Fall genug Weißraum vorhanden ist.

Datentrennung

Es gibt drei Wege, Daten innerhalb einer Tabelle voneinander zu trennen. Mit Weißraum, einer Trennlinie oder einem farbigen Hintergrund.

Wenn nur wenige Informationen vorhanden sind, reicht es, die Daten mit genügend Weißraum zu trennen.

Wenn allerdings sehr viele Zeilen und Spalten vorhanden sind, sollte man auf Trennlinien oder einen farbigen Hintergrund zurückgreifen, da es bei vielen Informationen schwerer ist, den Wert der richtigen Spalte zuzuordnen.

Bei den Trennlinien muss darauf achten werden, dass keine zu dicke Linie verwendet wird und die Farbe der Linie nicht zu auffällig oder kontrastreich ist. Das gleiche gilt auch für den farbigen Hintergrund, welche abwechselnd die einzelnen Felder farblich hervorhebt und daher auch Zebrastreifen genannt werden. Wenn ein farbiger Hintergrund verwenden wird, dann auf Graustufen oder helle Abstufungen der Primärfarbe zurückgreifen.

Dabei darf nicht vergessen werden, dass der Fokus immer auf den eigentlichen Daten liegen sollte und nicht auf dem Design der Tabelle!

Fotos und Icons

Fotos werden in einer Tabelle eher selten verwendet. Falls Fotos eingebaut werden möchten, muss darauf geachtet werden, dass um das Foto noch ein extra Weißraum angelegt und ein kleines Thumbnail integriert wird. Klickt man auf das Thumbnail erscheint, das Bild vergrößert in einem kleinen Pop-up.

Auf Icons kann in den meisten Fällen verzichtet werden, da der Inhalt der Spalte durch das Label klar sein sollte und es nur von den Daten ablenkt. Manchmal kann es aber auch sinnvoll sein, Icons zu verwenden, um die Daten kategorisch voneinander zu unterscheiden.

Farben

Farben sollten immer sparsam verwendet werden. Zuerst sollte man die Tabelle in Graustufen anlegen. Wenn die Informationen dabei gut voneinander unterschieden werden können, werden Farbakzente gesetzt. Bei der Farbauswahl bei weichen Pastellfarben bleiben, damit der Fokus nicht von den Daten weggelenkt wird.

Tabellen-Breite

Eine Tabelle sollte niemals so breit sein wie der ganze Bildschirm. Ist die Tabelle zu breit, liegen die Informationen zu weit voneinander entfernt und werden dann aufgrund von dem Gesetz der Nähe nicht mehr miteinander in Verbindung gebracht. Dadurch könnte interpretiert werden, dass es sich bei der Spalte daneben schon um eine ganz andere Spalte handelt und sorgt damit für Verwirrung und Unübersichtlichkeit.

Webseite vs. Smartphone

Tabellen müssen auf einem Smartphone anders dargestellt werden als auf einer Webseite am PC, da das Smartphone einen kleineren Bildschirm hat und die Daten somit in einer großen Tabelle schwerer lesbar sowie unübersichtlicher sind und nicht alle Daten auf den kleinen Bildschirm passen.

Dafür gibt es verschiedene Lösungen, wie beispielsweise das side-scrolling. Hierbei wird in einer größeren Tabelle seitlich gescrollt. Hierbei muss wieder beachten werden, das Label zu fixieren, damit klar ist, in welcher Spalte man sich gerade befindet.

Eine andere Alternative ist es, eine größere Tabelle in mehrere kleine Tabellen zu unterteilen. Hier besteht dann nicht mehr das Problem, dass gescrollt werden muss, sondern hat einen klaren Überblick. Der Nachteil an dieser Lösung ist, dass einzelne Daten untereinander nicht mehr so leicht miteinander verglichen werden können.

---

Graphen

Graphen helfen ebenfalls dabei, größere Mengen an Daten strukturiert darzustellen.

Sie werden bei größeren Datenmengen verwendet, um sie zu visualisieren. Sie können problemlos für Smartphones und Webseiten verwendet werden.

Kuchendiagramm (pie chart/ donut chart)

Zunächst gibt es das Kuchendiagramm, welches auch pie chart genannt wird. Hat es ein Loch in der Mitte, wird es auch donut chart genannt.

Beim Erstellen von solchen Diagrammen sollte beachtet werden, dass die Prozentzahl am Ende auch tatsächlich 100% ergibt, da es sonst zu Verwirrung kommen kann. Die Farben innerhalb des Kreises sollten einen hohen Kontrast zueinander aufweisen, damit die Werte gut voneinander unterschieden werden können und die Bereiche sollten im besten Fall nach ihrer Größe geordnet werden, um das Scannen der Daten zu erleichtern.

Balkendiagramm (bar chart)

Beim Balkendiagramm, welches auch bar chart genannt wird, kann zwischen drei verschiedenen Arten unterschieden werden.

Zum einen gibt es das single bar chart, welches jeweils nur einen Balken zum Vergleich verwendet. Beim clustered bar chart werden mehrere Balken miteinander verglichen und zum Schluss gibt es noch das stacked bar chart, wobei mehrere Balken aufeinandergestapelt werden.

Bei allen drei Balkendiagrammen sollte beachten werden, kontrastreiche Farben für die einzelnen Balken zu verwenden, um die Daten gut voneinander unterscheiden zu können. Bei der Beschriftung der y-Achse sollte beachtet werden, dass diese in realistischen und nicht zu großen Zahlenabständen beschriftet wird, damit noch genaue Werte ablesen werden können.

Sollte die Beschriftung für die einzelnen Balken zu lang sein, kann das Balkendiagramm horizontal angelegt werden. Dadurch ist die Beschriftung nicht mehr gequetscht und die Übersichtlichkeit wird gewährleistet.

Liniendiagramm (line chart)

Beim Liniendiagramm ist es wichtig, dass nicht zu viele Informationen miteinander verglichen werden, da es sonst unübersichtlich wird. Die einzelnen Linien sollten sich farblich gut voneinander unterscheiden.

Oftmals ist es so, dass ein Kompromiss zwischen der Genauigkeit der Zahlen und einem schönen Kurvenverlauf gefunden werden muss. Das rote Diagramm ist beispielsweise sehr zackig und im Interface nicht wirklich schön anzuschauen. Um ein ästhetischeres Diagramm zu erhalten, ist es sinnvoll, ein Tool-Tip, also ein kleines Pop-up Fenster zu verwenden. Klickt man darauf oder hovert über eine Stelle liefert es einen genauen Wert. So wird das Diagrammlesen erleichtert und hat gleichzeitig einen schöneren Kurvenverlauf, wodurch das Interface ansprechender wirkt.

Flächendiagramm (area chart)

Zum Schluss gibt es noch das Flächendiagramm, welches auch area chart genannt wird. Hier kann wieder zwischen drei Arten unterschieden werden.

Es gibt einmal das single area chart, wobei nur eine einzige Fläche verwendet wird, um Daten aufzuzeigen.

Beim overlapping area chart überlappen sich die einzelnen Flächen. Hierbei sollten die einzelnen Flächen mit einer leichten Transparenz angelegt werden, damit die einzelnen Flächen zu erkennen sind.

Anschließend gibt es das stacked area chart, wobei man die einzelnen Flächen aufeinanderstapelt.

Bei allen drei Arten ist es wieder wichtig, kontrastreiche Farben zu verwenden.

Zuerst Graustufen --> dann Farbe

Um sicherzustellen, dass die Diagramme auch für Menschen mit Sehbeeinträchtigungen gut lesbar sind, sollten die Graphen zuerst in Graustufen anlegt und anschließend mit unterschiedlichen Mustern schraffieren werden. Wenn dann die einzelnen Bereiche der Graphen gut voneinander unterschieden werden können, wird Farbe eingesetzt.

Quellen

• https://www.uxpin.com/studio/blog/table-ux/ (zuletzt aufgerufen am 28.04)

• The Ultimate Guide to Designing Data Tables | by Molly Hellmuth | Design with Figma | Medium (zuletzt aufgerufen am 28.04)

• How to design perfect charts | UX Planet (zuletzt aufgerufen am 28.04)

• https://www.usabilityblog.de/daten-diagramme-dashboards-gute-ux/ (zuletzt aufgerufen am 28.04)

• Lektüre Kapitel ,,TablesCharts"