Die Verwendung von Tabellen und Rastern ist beim Entwerfen digitaler Produkte und Dashboards üblich. Datentabellen helfen bei der Organisation einer Vielzahl von Informationen.

Sie präsentieren Daten besser lesbar und verständlich. Sie helfen auch dabei, wichtige Daten hervorzuheben und die Datenvisualisierung zu verbessern.

Tabellen werden oft als UI-Komponente verwendet, aber viele machen immer noch Fehler beim Entwerfen von Datentabellen. Einige Tabellendesigns sind voller visueller Störungen oder zu komplex, was zu einer schlechten Benutzererfahrung führt.

Das richtige UI-Design für Tabellen schafft bessere Datenvisualisierungen und Vergleiche. Die richtige Gestaltung von Tabellen macht sie attraktiv und verbessert die Lesbarkeit.

Dieser Leitfaden zeigt, wie Sie das Design von Datentabellen optimieren und die Tabellenfunktionalität verbessern.

Datentabellen richtig gestalten

Bei der Planung eines Tischdesigns gilt es, an zwei Dingen zu arbeiten: dem Tischstil und der Tischfunktionalität.

Tabellenstil

Tabellendaten ausrichten

Bildquelle

Um Text von numerischen Daten zu unterscheiden, richten Sie den Text links und Zahlen rechts aus. Eine solche Ausrichtung macht es einfacher, zwei verschiedene Daten zu vergleichen.

Tabellenüberschriften sollten für ein strukturiertes Tabellendesign auch an ihren Spaltendaten ausgerichtet sein.

Einige Tabellenzellen können mehrere Textzeilen enthalten, z. B. Beschreibungen. Die vertikale Ausrichtung für solche Inhalte sollte oben sein .

Andernfalls werden die Spaltendaten nicht aneinander ausgerichtet.

Vorgestellter Abschnitt hinzugefügt

Preistabelle, die Sie mit wpDataTables erstellen können

Ein hervorgehobener Abschnitt ist eine Tabellenspalte , -zeile oder -zelle, die der Autor hervorheben möchte. Es wird normalerweise auf Preistabellen oder beim Vergleich von Abonnementplänen angewendet.

Verwenden Sie einen hervorgehobenen Abschnitt, um wichtige Informationen in der Tabelle hervorzuheben. Dies könnte zum Beispiel der günstigste Plan oder ein beliebtes Element in einer Liste sein.

Um einen vorgestellten Abschnitt zu erstellen, ändern Sie die Formatierung der Zellen. Ändern Sie beispielsweise die Füllfarbe der Zelle oder die Schriftgröße des Textes, um ihn hervorzuheben.

Farben anwenden

Eine Datentabelle sollte nicht zu viele Farben haben. Verwenden Sie sie nur für Tabellenüberschriften, negative und positive Trends und hervorgehobene Abschnitte.

Das Hinzufügen zu vieler Farben erzeugt visuelles Rauschen. Dies macht es schwierig, Elemente zu unterscheiden, die hervorgehoben werden müssen.

Verwenden Sie anstelle der normalen schwarzen Farbe dunklere Grautöne für die Schriftfarbe und hellere Grautöne für die Randfarbe. Die Verwendung weicherer Schwarztöne macht es weniger intensiv und verringert die Belastung der Augen.

Verwenden Sie unterschiedliche Farben, wenn Sie Kategorien unterscheiden oder höchste und niedrigste Werte hervorheben. Um bestimmte Abschnitte in der Tabelle hervorzuheben, verwenden Sie hellere oder kräftigere Füllfarben, um sie hervorzuheben.

Abwechselnde Zeilenfarben

Tabelle mit verbundenen Zellen, die Sie mit wpDataTables erstellen können

Abwechselnde Zeilenfarben verbessern die Lesbarkeit. Es setzt visuelle Hinweise und hilft Menschen, einer Liste von Informationen zu folgen und Daten zu verbinden.

Dies ist besonders nützlich, wenn Sie eine große Datenbank erstellen. Es funktioniert auch gut für kleine Datentabellen.

Erstellen Sie einen „Zebrastreifen”-Effekt, indem Sie die weiße Füllfarbe mit einer dunkleren Farbe wie Hellgrau abwechseln. Wenn Sie andere Farben verwenden, verwenden Sie eine helle Füllfarbe und wechseln Sie sie mit einem etwas dunkleren Farbton ab.

Verwenden von Monospaced-Schriftarten

Verwenden Sie für ein strukturierteres Tabellendesign einen einheitlichen Schriftstil für numerische Daten.

Tabellarische oder nichtproportionale Schriftarten haben eine feste Breite und einen festen Abstand für jedes Zeichen. Dies verbessert Typografie und Lesbarkeit.

Beispiele für nichtproportionale Schriftarten sind Courier, Courier New, Lucida Console und Monaco.

Um die Symmetrie weiter zu verbessern, achten Sie darauf, Ziffern in der gleichen Länge zu formatieren, wie beispielsweise Datumsangaben. Statt 15.3.2019 zu schreiben, formatieren Sie das Datum als 15.03.2019.

Tabellendaten visualisieren

Verwandeln Sie Spaltendaten in horizontale Balkendiagramme. Dies hilft, Daten zu visualisieren und einen Überblick zu generieren.

Horizontale Balkendiagramme ermöglichen es Benutzern, Datensätze zu vergleichen und sie einfach zu interpretieren. Jeder Balken befindet sich in einer Spalte neben den Daten, die er darstellt, vertikal ausgerichtet und in Zeilen unterteilt.

Durch das Einfügen eines Balkendiagramms wird die Spalte oft zu stark erweitert. Ziehen Sie daher in Betracht, Balken nur zur Visualisierung wichtiger Werte anzuzeigen.

Eine weitere Methode zur Visualisierung von Tabellendaten ist die Verwendung von Heatmaps.

Heatmaps passen den Farbton des Zellenhintergrunds oder die Füllfarbe basierend auf dem numerischen Wert in der Zelle an, wodurch ein einfarbiger Farbverlauf entsteht. Je höher der Zahlenwert, desto dunkler wird die Füllfarbe.

Tabellenfunktion

Machen Sie es reaktionsschnell

Eine effektive Datentabelle funktioniert gut auf verschiedenen Geräten. Es muss Daten lesbar darstellen, wenn es auf Smartphones, Tablets und Laptops geöffnet wird.

Das Anzeigen von Tabellen auf kleineren Bildschirmen erfordert viele Änderungen im Tabellendesign. Ein auf großen Desktops erstelltes Tabellendesign funktioniert möglicherweise nicht auf kleineren Geräten.

Testen Sie die Tabelle auf Mobilgeräten. Stellen Sie sicher, dass Benutzer Informationen durchsuchen können, ohne endlos scrollen zu müssen.

Hüten Sie sich vor geschrumpften Spalten und versteckten Texten, da diese zu einer schlechten Benutzererfahrung führen.

Denken Sie daran, dass auf kleineren Bildschirmen schmale Spalten besser sind. Es gibt verschiedene Möglichkeiten, die Spalten dünner zu machen.

Dazu gehören die Verwendung von Symbolen, Abkürzungen, kürzeren Zahlenformaten und gerundeten Zahlenangaben. Also 2,5m statt 2.500.000 und 0,3 statt 0,3241.

Aktivieren Sie die Neuordnung von Spalten

Große Datentabellen sind aufgrund ihrer Größe und der Menge an Informationen, die sie enthalten, manchmal schwer zu lesen. Wenn Benutzer Spalten neu anordnen können, können sie sich auf die Spalten konzentrieren, die sie lesen müssen.

Das bedeutet auch, dass sie dies tun können, ohne hin und her zu scrollen. Dies hilft Benutzern, Unordnung zu minimieren, kleine Informationen zu verdauen und die Spalten nach ihren Bedürfnissen anzuordnen.

Erwägen Sie eine feste Zeilenhöhe

Tabelle, die Sie mit wpDataTables erstellen können

Wenn die Datentabelle viele Spalten enthält, verankern Sie die ersten paar Spalten. Dadurch bleibt der Kontext erhalten, während Benutzer durch den Rest der Tabelle scrollen.

Es wird dringend empfohlen, anpassbare Spalten zu haben. Tabellenzeilen müssen jedoch eine feste Höhe haben, um die Symmetrie aufrechtzuerhalten und die Leser nicht zu verwirren.

Unabhängig von den Daten verbessert die feste Zeilenhöhe das Design und die visuelle Darstellung der Tabellen-UI.

Paginierung für lange Datentabellen verwenden

Paginierte Tabelle, die Sie mit wpDataTables erstellen können

Es gibt eine ungeschriebene Regel, dass Datentabellen nicht länger als ein Desktop-Bildschirm sein sollten. Dies ist jedoch nicht möglich, wenn eine Datentabelle lang ist.

Verhindern Sie, dass lange Datentabellen einen großen Teil einer Webseite einnehmen, und maximieren Sie den Leerraum. Tun Sie dies, indem Sie die Paginierungsfunktion aktivieren.

Dies dient auch dazu, den Leser durch die Tabelle zu führen und ihm beim Navigieren zu helfen.

Wenn Sie Paginierung verwenden, geben Sie die Seitenzahl an, um anzuzeigen, wie viele Seiten es gibt und auf welcher Seite sich die Leser befinden. Um den Benutzern mehr Kontrolle zu geben, können Sie außerdem anpassen, wie viele Zeilen pro Seite angezeigt werden sollen.

Tabellensortierfunktion einschließen

Wenn Benutzer mehr Kontrolle über die Datentabelle haben, wird das Design der Tabellen-UI verbessert. Wenn die Tabelle viele Informationen enthält, können Sie den Lesern helfen, die benötigten Daten zu finden, indem Sie eine Sortierfunktion hinzufügen.

Die Sortierung ermöglicht Benutzern , die Daten nach bestimmten logischen Reihenfolgen anzuordnen.

Dies kann alphabetisch, Datum und Uhrzeit geändert, aufsteigend, absteigend und mehr sein. Je mehr Optionen, desto besser.

Eine andere Möglichkeit, Daten zu sortieren, besteht darin, ein Suchfeld einzufügen. Auf diese Weise können Leser nach bestimmten Daten wie dem Namen eines Unternehmens, Standort, Produkten und mehr suchen.

Filtern von Daten

Tabelle mit Filtern, die Sie mit wpDataTables erstellen können

Das Filtern von Daten ist eine weitere Möglichkeit, die Funktionalität einer Datentabelle zu erhöhen. Benutzer können große Datenmengen verarbeiten, Trends verstehen und Vergleiche erstellen.

Sie können auch bestimmte Informationen finden und komplexe Daten analysieren. Dies gilt insbesondere für numerische Datentabellen.

Stellen Sie sicher, dass Benutzer Parameter oder Filtersätze für bestimmte Spalten anpassen können. Fügen Sie außerdem eine erweiterte Filteroption hinzu, um den von ihnen erstellten Filtersatz für die zukünftige Verwendung zu speichern.

Behalten Sie den Kontext bei, verwenden Sie feste Überschriften und eingefrorene Spalten

Das Lesen einer großen Datentabelle erfordert viel vertikales und horizontales Scrollen. Um den Kontext beizubehalten , verankern Sie die Spaltenüberschriften sowie die erste Spalte oder die ersten paar Spalten.

Microsoft Excel und Google Sheets bezeichnen verankerte Spalten als „eingefroren”.

Fügen Sie zur einfacheren Tabellennavigation eine vollständige Zeilenauswahl hinzu. Dadurch können Benutzer beim horizontalen Scrollen wichtige Zeilen markieren .

Dies kann schwierig sein, wenn die Tabelle erweiterbare Zeilen enthält, und kann zu einem anderen Effekt führen.

Abschließende Gedanken, wie man einen Tisch richtig gestaltet

Zu wissen, was beim Erstellen eines Tabellen-UI-Designs zu beachten ist, führt zu effektiven Tabellen. Diese ermöglichen Benutzern, Daten zu vergleichen und Informationen zu sortieren, und erhöhen auch die Lesbarkeit.

Zu lernen, wie man einen Tisch entwirft, versetzt Designer in die Lage, visuelles Rauschen zu reduzieren und Leerraum sinnvoll zu nutzen. Die hier bereitgestellten Designtipps können das Tabellendesign und die Benutzerdaten optimieren.

Wenn Sie diese Tipps befolgen, verbessern Sie den gesamten Tabellenstil und die Funktionalität. Darüber hinaus tragen sie dazu bei, die Benutzererfahrung und das Markenimage zu verbessern.

Wenn Ihnen dieser Artikel über das Entwerfen einer Tabelle gefallen hat, sollten Sie sich diesen Artikel über das Erstellen einer Datentabelle ansehen.

Wir haben auch über einige verwandte Themen geschrieben, wie z _ _ _ [](https://wordpress.mediadoma.com/so-erstellen-sie-eine-tabelle-in-wordpress-ohne-plugin/) Tabellen- Plugins und wie man statistische Tabellen in WordPress erstellt.

Aufnahmequelle: wpdatatables.com