Wie man komplexe (und responsive!) Tabellen entwirft und nicht den Verstand verliert

Haben Sie Angst, wenn Sie feststellen, dass Ihr nächstes Projekt darin besteht, eine komplexe und responsive Datentabelle zu entwerfen? 😨

Rachel Anderson

Follow

May 7, 2018 – 5 min read

Du bist nicht allein, ich habe einige große Designer gesehen, die bei dem Gedanken, dieses Problem zu lösen, in ihren Stiefeln zitterten. Aber es gibt keinen Grund zur Sorge! Vor kurzem habe ich mich dieser Herausforderung gestellt und möchte Ihnen einige Tipps geben, die mir geholfen haben, ein Design zu entwickeln, das unsere Nutzer lieben.

Es gibt viele verschiedene Möglichkeiten, wie du deine Tabelle responsive gestalten kannst.

Es gibt viele verschiedene Möglichkeiten, wie du Tabellen gestalten kannst, geschweige denn, wie du sie responsive machen kannst. Spalten und Zeilen können sich neu positionieren, in der Größe verändern, zusammenklappen, verkleinern oder sogar verschwinden, wenn sich das Browserfenster verengt.

Wie bei allen Designlösungen hängt das beste Design davon ab, wie Ihre Leser die Daten verwenden werden. Wir haben zu Beginn dieses Projekts eine Nutzerforschung durchgeführt, um eine gewisse Orientierung zu geben, und festgestellt, dass für unser Projekt:

  • Diese tabellarischen Informationen würden auf einer Mischung aus Desktop-, Tablet- und Mobilgeräten gleichermaßen genutzt werden.
  • Diese Tabellen könnten viele Spalten mit freiem Text sowie Zahlen enthalten.
  • Bestimmte wichtige Informationen sollten jederzeit sichtbar bleiben.

Auf der Grundlage dieser Erkenntnisse unserer Nutzer habe ich mich bei der Entwicklung eines Designsystems für textlastige Datentabellen mit den wichtigsten Aspekten befasst.

Erst einmal muss festgestellt werden, um welche Art von Tabelle es sich handelt. Handelt es sich um eine Vergleichstabelle, bei der der Leser Daten über mehrere Spalten hinweg vergleicht, oder um eine Inhaltstabelle, bei der die Datensätze unabhängig voneinander sind?

Eine Vergleichstabelle, bei der der Leser über mehrere Spalten hinweg vergleicht.

Eine Inhaltstabelle, bei der die Datensätze unabhängig voneinander sind.

Meine Tabelle ist eher eine Inhaltstabelle als eine Vergleichstabelle. Dies frühzeitig zu erkennen, half mir zu verstehen, welche Informationen in der schmalen Bildschirmgröße in unmittelbarer Nähe bleiben müssen.

Mobile first

Die erste Version, die ich entworfen habe, war die schmale Bildschirmversion. Ich habe sie absichtlich vor der Version mit breitem Bildschirm betrachtet, da die Anzeige der Tabellen auf dem Handy für unsere Nutzer wichtig ist. Daher musste ich einen Weg finden, komplexe und nicht lineare Informationen in ein vertikales Format zu bringen.

Ich wusste, dass es viel einfacher sein würde, das Design zu skalieren, wenn es viel horizontalen Platz gibt, als eine schöne Tabelle für den Desktop zu entwerfen und dann damit zu kämpfen, dass sie auf dem Handy lesbar bleibt. Das bedeutete auch, dass ich von Anfang an die Touch-Zielgrößen im Hinterkopf hatte und mich nicht auf Aktionen wie Hover verließ, um Informationen anzuzeigen.

Ich beschloss, den Inhalt in schmalen Ansichten eher wie eine Liste zu behandeln, damit die wichtigen Informationen gut sichtbar und erfassbar blieben.

Konsistentes Styling

Die Zeilen müssen neu positioniert werden, wenn sich die Bildschirmgröße ändert, also verwendete ich Styling, um die Verbindung zwischen ihnen beizubehalten. Wenn zum Beispiel die Spaltenüberschriften fett gedruckt sind und einen grauen Hintergrund haben, sollten Sie diesen Stil auch in der schmalen Ansicht verwenden. Das wird den Lesern helfen, die neue Verteilung der Zellen zu erkennen.

Behalten Sie die gleiche visuelle Gestaltung bei, wenn sich Ihre Zellen neu positionieren.

Typografie ist dein Freund

Es ist leicht, seine typografischen Prinzipien zu vergessen, wenn man viele Einschränkungen hat, aber eine bewusste Entscheidung zur Optimierung der Lesbarkeit wird deinen Lesern eine große Hilfe sein, besonders bei einem Projekt wie meinem, bei dem die Tabellen viel Text enthalten.

Typografie existiert, um den Inhalt zu ehren. ~ Robert Bringhurst

Scannen

Erleichtern Sie das schnelle Scannen, indem Sie den Lesefluss einfach und klar halten. Ich habe mich dafür entschieden, den Text in jeder Spalte an derselben Kante hängen zu lassen, damit der Leser den Text linear überfliegen kann.

Halten Sie den Lesefluss einfach, indem Sie den gesamten Text an der gleichen Kante ausrichten.

Zeilenlänge

Versuchen Sie, die Zeilenlänge des Textes nicht zu beeinträchtigen, indem Sie viele Spalten in einen schmalen Raum quetschen, denn das verlangsamt die Lesegeschwindigkeit. Ich habe eine Mindestbreite für Spalten mit Fließtext festgelegt.

Versuchen Sie, die Zeilenlänge nicht zu beeinträchtigen, indem Sie viele Spalten in einen engen Raum quetschen.

Etiketten

Denken Sie darüber nach, wo die Etiketten platziert werden sollen, damit sie nicht übermäßig viel Platz beanspruchen, aber dennoch einen gewissen Kontext zu den Informationen bieten.

Denken Sie darüber nach, wo Sie Ihre Beschriftungen platzieren.

Ich habe die Beschriftungen in meiner Liste oberhalb der einzelnen Zellinhalte platziert, wo sie weniger Platz beanspruchen, und nicht an der Seite. Außerdem waren die Informationen so leichter zu scannen. Ich habe die Beschriftungen anders gestaltet, damit der Unterschied zwischen einer festen Beschriftung und einem variablen Inhalt leicht zu erkennen ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.