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. In diesem Blogpost wollen wir die Usability von Tabellen anhand eines Beispiels optimieren, um Daten besser lesen zu können. Folgende Tabelle wurde aus der Wikipedia übernommen und zeigt die Einwohnerentwicklung deutscher Städte.

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

Versucht der Leser zum Beispiel zu erkennen, wie viele Einwohner Dresden nach dem Mauerfall verloren hat, muss er seinen Blick in der Dresden-Reihe von links nach rechts halten und dann in der richtigen Spalte stoppen. Vorausgesetzt, sein Blick verrutscht nicht in der Zeile.

Ein erster Ansatz dieses Problem zu lösen besteht darin den Reihen alternierend 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, Wikipedia Tabellen, und der macOS Finder verglichen ist das Bild der Umsetzung nicht einheitlich. Das fällt sofort bei den macOS Programmen »Numbers« und »Pages« auf. Erstes als Tabellenkalkulation zeigt im Standard-Dokument keine Alternierung der Zeilen an. Erstellt man hingegen in »Pages« eine ähnliche Tabelle 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

Dennoch sollte man mit dem Alternieren behutsam umgehen. Jede visuelle Hervorhebung kann von Nutzern bewusst oder unbewusst als Gewichtung der Bedeutung angesehen werden. Besonders kritisch wird es, wenn der Zellen-Hintergrund eingefärbt wird, um diesem eine semantische Bedeutung zuzuweisen. Die folgenden Beispiele zeigen unsere 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« nicht genug angesprochen hat, soll hier noch verweisen werden. Auch ohne Zwischenlinine und dem Zebra-Muster kann mittels Abständen in einer großen Tabelle das Auge des Lesers so geführt werden, dass er die notwendige Information erkennt. 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.