Tabellen bieten eine gute Möglichkeit viele Daten mit einer hohen Genauigkeit darzustellen. Leider werden sie mit zunehmender Größe schwerer lesbar und verständlich. Eines der Hauptprobleme bildet dabei Zuordnung von Zeilen und Spalten, welche für den Anwender gerade interessant sind. Folgende Tabelle wurde aus der Wikipedia übernommen und zeigt die Einwohnerentwicklung deutscher Städte.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=1

Wir wollen diese Tabelle optimieren, um die Daten besser lesen zu können. Versucht ein Leser zu erkennen wie viele Einwohner Dresden nach dem Fall der Mauer verloren hat, muß er versuchen der Reihe für Dresden von links nach rechts zu folgen und dann in der richtigen Spalte stehen bleiben.

Ein erste Ansatz dieses Problem zu lösen besteht darin den Reihen alternierende verschiedene Farben zu geben. Ähnlich den Streifen eines Zebras. Diese Technik ist so einfach, wie sie auch umstritten ist. Wie man in einer Diskussion auf StackExchange erkennen kann.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=2

Aber wie effektiv ist die Maßnahme wirklich? Hilft sie dem Anwender in der Tabelle viel schneller Werte zu finden, oder verwirren die Streifen eher?

Existierende Anwendungen

Werden existierende Anwendungen, wie Microsoft Excel, Tabellen in der Wikipedia, oder der macOS Finder, verglichen ist das Bild der Umsetzung sehr uneinheitlich. Am direktesten fällt diese bei den macOS Programmen »Numbers« und »Pages« auf. Erstes als Tabellenkalkulation zeigt im Standard-Dokument keine Alternierung der Zeilen an. Erstellt man in Pages hingegen eine Tabelle, die von der Funktion einer Numbers Tabelle entspricht, hat diese schon im Default das typische Zebra-Muster. Aktivieren lässt sich das alternierende Hintergrundmuster aber in jedem Fall.

Links eine Tabelle in dem Program »Numbers«; Rechts in »Pages«. Eine nutzt das Zebra-Muster, die andere nicht, obwohl beide zur gleichen Programm-Suite gehören.

Aus den existierenden Anwendungen ergibt sich kein einheitliches Bild, welches als Standard angesehen werden kann. Es fällt jedoch auf, dass je größer die Tabelle ist, umso eher auf Zebra-Muster verzichtet wird.

Studien

Bisher gibt es nur zwei Studien, die sich mit diesem Thema auseinander setzen. Beide kommen von A list Apart [1] und bauen aufeinander auf.

[1] https://alistapart.com/article/zebrastripingdoesithelp

[2] https://alistapart.com/article/zebrastripingmoredataforthecase

In der ersten Studie wurde konnte dabei kein positiver Effekt für die Bearbeitung von Aufgaben in den Tabellen festgestellt werden. In einer zweiten Studie zeigte sich jedoch die Präferenz der Anwender für die gestreifte Tabelle. Das Muster bringt dem Anwender also ein besseres Nutzungserlebnis, unabhängig von der Wirksamkeit. Entsprechend ist es für eine bessere User Experience zu empfehlen.

Nachteile des Zebra Musters

Aber wir sollten mit diesem Feature behutsam umgehen. Jede Änderung der Optik kann unterbewusst als Änderung der Bedeutung angesehen werden. Dies wird besonders deutlich, wenn dem Hintergrund der Zellen bereits eine Semantik zugewiesen wird. Im folgenden Beispiel sehen wir die bekannte Tabelle mit eingefärbten Zellen in Abhängigkeit der Einwohnerzahlen.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=4

Wird darauf nun das Zebra-Muster angewendet, verschwimmt die Bedeutung der Zellen zusammen mit diesem Muster. Auch ist es unklar, ob sich das Muster auf die eingefärbten Zellen übertragen soll oder nicht, wie die beiden folgenden Beispiel zeigen.

Beispiele:
https://pixelsandplanets.com/samples/tables/?table=3
https://pixelsandplanets.com/samples/tables/?table=5

Diese Fragen erhalten eine erhöhte Relevanz, wenn man die Tabelle sehbeeinträchtigten Personen zur Verfügung stellen will. Der folgende Screenshot zeigt die letzte Tabelle, wie sie ein Farbfehlsichtiger sehen würde.

Alternativen

Bisher haben wir nur das einfache Zebra-Muster betrachtet. Es gibt aber noch andere Möglichkeiten die Zuordnung von Reihen und Spalten zu verbessern. Eine erste simple Variante besteht darin, den Rahmen nach jeder Dritten Reihe dicker erscheinen zu lassen.T

Beispiel: https://pixelsandplanets.com/samples/tables/?table=6

Bei dieser Variation geht auch die Bedeutung eine Einfärbung, wie wir sie weiter oben vorgenommen haben nicht verloren. Der gleiche Ansatz kann auch gewählt werden, um die Spalten besser unterscheidbar zu machen.T

Beispiel: https://pixelsandplanets.com/samples/tables/?table=8
Mit Einfärbung: https://pixelsandplanets.com/samples/tables/?table=7

Werden die Rahmen von Reihen und Spalten hervorgehoben, kann dies jedoch wieder dazu führen, dass diesem visuellen Element eine Bedeutung für die Daten zugemessen wird. Wie stark dieser Effekt auftritt müsste mal untersucht werden. Aktuell liegen hierzu noch leider keine Studien vor.

Eine andere Variante die Spalten und Reihen einer Tabelle hervorzuheben ist ein temporäres Highlighting, das während der Mauszeige über dem jeweiligen Element schwebt.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=9

Damit auch nach dem Scrollen die Zuordnung der Spalten ersichtlich ist, bietet es sich zusätzlich an, den Kopf der Tabelle immer sichtbar zu lassen.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=10
Erweitert: https://pixelsandplanets.com/samples/tables/?table=11

Auf einen wichtigen Punkt, den schon Edward Tufte in seinem Buch »The Visual Display of Quantitative Information« häufig angesprochen hat, soll hier noch verweisen werden: auch ohne Zwischenlinine und dem Zebra-Muster kann in einer großen Tabelle das Auge des Lesers so geführt werden, dass er die notwendige Information erkennt. In den folgenden Tabellen wurden die Abstände so angepasst, dass die Spalten und Reihen gut lesbar sind. In der zweiten Tabelle sind markante Zellenwerte wieder eingefärbt und der Header immer sichtbar. Es ist jedoch auch ersichtlich, dass diese Tabellen wesentlich mehr Platz benötigen als vorher.

Beispiel: https://pixelsandplanets.com/samples/tables/?table=12
Erweitert: https://pixelsandplanets.com/samples/tables/?table=13

Fazit

Laut den Studien von "A List Apart" sind Zebrastreifen in Tabellen bei den Lesern beliebt, können aber zur Fehlinterpretation führen. Im digitalen Bereich gibt es allerdings gute Alternativen wie beispielsweise den Hover-Effekt. Dieser ist eine passable Variante, um Tabellen lesbarer zu machen, ohne Ihre Semantik zu verfälschen. Welche der vorgeschlagenen Varianten die beste Performance beim Auffinden von Daten bietet, muß noch in einzelnen Studien untersucht werden.

Welches Variante bevorzugen Sie? Haben sie vielleicht eine besonders gelungene Tabelle online gefunden? Wir freuen uns über Links in den Kommentaren.