Datentabellen auf mobilen Websites verständlich gestalten

Eine Tabelle eignet sich, wenn Besucher dieselben Merkmale über mehrere Einträge vergleichen sollen. Beispielsweise können unterschiedliche Gerätemodelle nach Abmessungen und Anschlussart geprüft werden. Stehen dagegen nur drei voneinander unabhängige Leistungsbeschreibungen nebeneinander, kann eine normale Liste oder eine Reihe von Abschnitten verständlicher sein.

Das GOV.UK Design System beschreibt Tabellen als Hilfe zum Vergleichen von Informationen in Zeilen und Spalten und rät davon ab, sie als allgemeines Seitenlayout zu verwenden. Die Unterscheidung ist auch für kleine Unternehmenswebsites nützlich: Das Raster folgt der Datenaussage, nicht nur einer gewünschten Optik.

Formulieren Sie eine konkrete Aufgabe, bevor Sie das mobile Layout wählen. „Welches Modell passt an den vorhandenen Anschluss?“ lässt sich anders beantworten als „Welche drei Eigenschaften hat Modell A?“. Im ersten Fall müssen Werte über mehrere Zeilen verglichen werden; im zweiten kann eine Einzelansicht reichen. Diese Fragen helfen, eine zu große Übersicht gezielt zu verkleinern.

Prüfen Sie außerdem, ob eine Tabelle überhaupt öffentlich gebraucht wird. Interne Verwaltungslisten mit vielen selten genutzten Spalten lassen sich nicht unverändert als hilfreiche Websiteinformation übernehmen. Wählen Sie die Daten für die Besucheraufgabe aus und halten Sie die vollständige interne Arbeitsansicht getrennt.

Die W3C-Anleitung zu Tabellen mit einer Kopfzeile oder Kopfspalte zeigt die Kennzeichnung von Überschriften mit dem HTML-Element th. Normale Datenzellen verwenden td. Das sichtbare Aussehen und die programmatisch erkennbare Aufgabe einer Zelle werden damit getrennt behandelt.

Gibt es sowohl Zeilen- als auch Spaltenköpfe, zeigt W3C für zwei Überschriftenrichtungen die Zuordnung über scope mit row oder col. So kann ein Wert dem Modell seiner Zeile und dem Merkmal seiner Spalte zugeordnet werden. Welche Struktur gebraucht wird, folgt dem Inhalt der konkreten Tabelle.

Bei verschachtelten Kopfbereichen, zusammengeführten Zellen und mehreren Ebenen wird die Zuordnung anspruchsvoller. Prüfen Sie zuerst, ob zwei einfachere Tabellen dieselbe Aufgabe verständlicher erfüllen. Falls die komplexe Struktur wirklich nötig ist, braucht sie eine entsprechend genaue Umsetzung und Prüfung. Eine pauschale Umstellung aller Zellen auf dieselbe Rolle ist keine Lösung.

Verwenden Sie die Tabelle als echte Tabelle, statt sie nur aus nebeneinander gesetzten Textblöcken nachzuahmen. Umgekehrt sollte ein Seitenraster nicht unnötig als Datentabelle ausgezeichnet werden. Diese Entscheidung beeinflusst, wie Menschen mit Hilfstechnik die Informationen erreichen und sich zwischen den Beziehungen bewegen können.

Eine kleine Tabelle kann durch saubere Umbrüche und kürzere präzise Überschriften bereits passen. Prüfen Sie danach, welche Spalten tatsächlich gleichzeitig gebraucht werden. Unnötige Inhalte können in eine Detailansicht wandern. Das darf wichtige Vergleichsmerkmale nicht verstecken, nur um ein schmales Bildschirmbild zu erzeugen.

Wenn die Aufgabe zwei Dimensionen benötigt, erlaubt das WCAG-Kriterium Reflow für entsprechend notwendige Inhaltsbereiche eine Ausnahme vom allgemeinen Umfließen. Eine Datentabelle kann darunter fallen. Das ist kein Freibrief für horizontalen Überlauf der gesamten Seite. Begrenzen Sie das Scrollen auf den nötigen Bereich und prüfen Sie den umgebenden Text weiterhin.

Ein horizontaler Bereich muss erkennbar und erreichbar sein. Prüfen Sie Fingerbedienung, Tastatur und sichtbaren Fokus sowie die Möglichkeit, den Bereich wieder zu verlassen. Bei Bedarf hilft ein kurzer Hinweis auf weitere Spalten. Vermeiden Sie einen Zustand, in dem nur die erste Spalte sichtbar ist und die weiteren Daten unbemerkt außerhalb liegen.

Karten können gut funktionieren, wenn Besucher einzelne Einträge nacheinander lesen. Soll jedoch eine Eigenschaft über mehrere Modelle verglichen werden, erhöht das wiederholte Hin- und Herlesen möglicherweise den Aufwand. Werden Daten umgeordnet, müssen Bezeichnungen und Semantik erhalten bleiben. Prüfen Sie die gewählte mobile Darstellung deshalb mit der ursprünglichen Vergleichsaufgabe.

Ruhrstack beschreibt auf der Design-Leistungsseite flexible Raster und die Prüfung mit passenden Inhalten und Anwendungen. Eine Datentabelle braucht genau diese Verbindung: reale Werte, verständliche Beschriftungen und eine Darstellung, die auch auf kleinen Bildschirmen die wichtige Entscheidung unterstützt. Die technische Umsetzung und ihre Prüfungen werden im Projektumfang abgestimmt.

Dabei muss nicht sofort ein komplexer Produktkonfigurator entstehen. Eine kleine gut gepflegte Tabelle kann die benötigte Aufgabe bereits erfüllen. Wenn häufig aktualisierte Daten, Filter oder mehrere Ansichten nötig werden, lässt sich deren Nutzen anhand derselben Vergleichsfrage beurteilen. So entsteht zusätzlicher Aufwand aus einem begründeten Bedarf.

Bringen Sie einige repräsentative Datensätze und die häufigste Besucherfrage mit. Besonders hilfreich sind lange Bezeichnungen und tatsächlich vorkommende fehlende Angaben. Vertrauliche Bestände müssen für die erste Klärung nicht vollständig geteilt werden; ein anonymisiertes Beispiel kann die Struktur zeigen.

Das gewünschte Ergebnis ist eine verständliche Datenansicht mit nachvollziehbarer Pflege und konkreter Prüfung. Eine schöne Tabelle auf einem breiten Bildschirm ist dafür ein Zwischenstand. Entscheidend bleibt, ob die Menschen die richtigen Beziehungen erkennen und ihre Frage mit den vorhandenen Angaben beantworten können.