Haben Sie Angst, wenn Sie feststellen, dass Ihr nächstes Projekt darin besteht, eine komplexe und responsive Datentabelle zu entwerfen? 😨
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 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?
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.
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.
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.
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.
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.