Ganz ehrlich: Tabellen sind nicht gerade meine liebsten UI-Elemente. Sie erinnern mich irgendwie immer ein bisschen an Excel (und das ist kein Kompliment).
Obwohl sie auf den ersten Blick einfach, ja fast schon banal wirken, sind sie gestalterisch ganz schön komplex. Gerade auf kleinen Screens oder in Sachen Barrierefreiheit entpuppen sie sich schnell als Büchse der Pandora: versteckte Scrollleisten, unlesbare Inhalte, Fokusfallen … alles dabei (außer die Hoffnung auf Besserung).
Was auf dem Desktop gut aussieht, wird auf dem Smartphone schnell zur Zumutung. Tabellen sind nicht gerade für ihre Flexibilität bekannt. Und horizontales Scrollen mag einfach niemand. Tabellen fühlen sich auf kleinen Bildschirmen selten gut an.
Eine kleine Case Study – Contract Management
(oder etwas langweiliger ausgedrückt auf Deutsch: Vertragsverwaltung)
Der Fall? Eine Anwaltskanzlei möchte alle ihre Verträge in einer Übersicht dargestellt haben. Klar, strukturiert und vergleichbar. Kein wildes Scrollen durch endlose Excel-Tabellen mehr, kein verzweifeltes Suchen nach dem letzten Änderungsstand. Alles soll zukünftig möglichst effizient und intuitiv bedienbar sein. Quasi ein intuitives Interface für maximale Effizienz. Ganz nach guter alter Kapitalismus-Manier.
Die Idee: Ein digitales Vertragsmanagement-Tool, das Klarheit schafft. Mein erster Gedanke: Eine Tabelle! Was sonst? (Dabei bin ich nicht einmal das größte Fangirl von den Dingern, wie oben bereits geteasert). Aber dennoch scheinen Sie für so einen Fall wie gemacht. Sie sind von ihrem Wesen her von Natur aus fein säuberlich strukturiert. Doch sei gewarnt! Tabellen können tricky sein. Darauf gehe ich gleich noch weiter ein.
Statt eine trockene Case Study mit Beispiel-Verträgen à la “Vertrag_Muster_2025_final_wirklichfinal.pdf” zu basteln, habe ich die Sache ein wenig gepimpt.
Willkommen auf dem Millennium Falken oder: in meiner Star-Wars-Case-Study
Ich präsentiere: ein galaktisches Beispiel für gutes Design.
Warum Tabellen tricky sein können
- Auf kleinen Bildschirmen wird es schnell eng.
- Zu viele Infos auf einmal = Überforderung
- In einer Zelle ist nur begrenzt viel Platz. Bei längeren Inhalten sieht das schnell kacki aus.
- Ohne korrektes semantisches HTML stoßen Screenreader an ihre Grenzen.
- Und Tastaturnavigation durch eine Tabelle? Schon mal gemacht? Oft ein Geduldsspiel.
Also: Wie gestalltet man eine Übersicht so, dass sie verständlich, zugänglich und auch mobil ohne Frust nutzbar ist? Wie bringt man responsives Design, digitale Barrierefreiheit und menschliche Geduld miteinander in Einklang? Und bitte so, dass es auch noch dazu richtig gut aussieht?
Mein Lösungsansatz
Zusätzlich zur Ansicht als Tabelle, habe ich eine alternative Ansicht entwickelt. In dieser wird jeder Eintrag als einzelne Kachel gedacht. So bleiben die Inhalte übersichtlich, auch auf kleinen Screens. Ein zusätzlicher Vorteil meines Kachel-Ansatzes: Aktionen wie Löschen, Bearbeiten oder Herunterladen sind direkt sicht- und klickbar. In der Tabellenansicht hingegen verstecken sie sich aufgrund von Platzmangel hinter einem Drei-Punkte-Menü ganz rechts. Nicht unbedingt ein Drama, aber eben ein Klick und ein kognitiver Schritt mehr. Und genau das macht im Alltag den Unterschied.
Nutzende können je nach Gerät, Vorlieben oder Zugangsbedürfnissen flexibel umschalten zwischen Tabellen- und Kachel-Ansicht. Das Interface passt sich den Nutzenden an und nicht umgekehrt. Jede, jeder und jedes kann so selbst entscheiden. Yay, digitale Selbstermächtigung! In diesem Sinne: möge die Macht mit dir sein!
