Tabellenansicht

Überblick

Die Tabellensicht ist ein Mechanismus zur Anzeige und Bearbeitung großer Datensätze.

Zu verwenden

• Sie müssen den Benutzern komplexe Daten präsentieren.
• Die Reihenfolge, in der Daten dargestellt werden, ist von Bedeutung, und die Benutzer haben die Kontrolle über die Sortierung der Daten.
• Die Benutzer müssen Daten desselben Typs in verschiedenen Zellen vergleichen.

Nicht zu verwenden

• Die Reihenfolge der Darstellung von Daten ist nicht so wichtig wie die Daten selbst. Verwenden Sie stattdessen Kartenansichten oder Listenansichten.
• Der Anwendungsfall erfordert keinen Vergleich von Daten. Verwenden Sie stattdessen Kartenansichten oder Listenansichten.
• Bei der Arbeit mit kleinen Datenmengen entsteht viel Leerraum. Verwenden Sie stattdessen Kartenansichten oder Listenansichten.

Aufbau

1. Titel (obligatorisch): Gibt einen kurzen Hinweis darauf, worum es in der Tabellenansicht geht, mit optionaler Zeilenzahl, die die Anzahl der Zeilen in der Tabelle angibt.
2. Steuerelemente der Tabellenansicht (optional): Eine Reihe von Steuerelementen, mit denen die Anzeige von Daten geändert werden kann. Verwechseln Sie Tabellensteuerelemente nicht mit Tabellenaktionen.

   1. Suchfilter (optional): Verwenden Sie diese Option, um den Datensatz durch die Suche nach Schlüsselwörtern zu filtern.

   2. Konfigurator (optional): Bietet die Möglichkeit, Tabellenspalten ein- oder auszublenden.

   3. Filter (optional): Umfasst eine Reihe erweiterter Mechanismen, um den Datensatz nach verschiedenen Parametern zu filtern.

3. Tabellenaktionen (optional): Ermöglicht die Durchführung von handlungsrelevanten Aktionen für den Datensatz, entweder für den gesamten Satz oder für ausgewählte Datensätze in der Tabelle. Folgende Tabellenaktionen sind verfügbar:
   • Primäre Aktion (optional): Verwenden Sie die primäre Aktion für die Hauptaktion in der Tabelle. Für eine Tabelle kann nur eine primäre Aktion festgelegt werden.
   • Sekundäre Aktion (optional): Verwenden Sie die sekundäre Aktion für unterstützende Aktionen.
   • Tertiäre Aktion (optional): Verwenden Sie die tertiäre Aktion für destruktive oder weniger wichtige Aktionen.
   • Überlaufmenü (optional): Im Überlaufmenü können Sie weitere mit den Tabellendaten verbundene Aktionen anzeigen.
4. Spaltenüberschriften (obligatorisch): Geben Sie eine Bezeichnung für jede Datenspalte sowie den Mechanismus zum Sortieren der Daten in jeder Spalte an.
5. Datenzeilen (obligatorisch): Geben Sie die Anzeige der mit der Tabelle verbundenen Daten an.
6. Seitensteuerungselemente (optional): Verwenden Sie diese Option, um die Anzeigedichte anzupassen und zwischen den Seiten zu navigieren.

Inhalt der Tabelle

Spalten

• Alle Zellen in einer Spalte müssen den gleichen Datentyp aufweisen. Mischen Sie beispielsweise keinen Datumswert mit einem Statuswert in einer einzelnen Spalte.
• Verwenden Sie Symbole nur, um zusätzlichen Kontext für Daten anzuzeigen. Die Verwendung von Symbolen für alle Zellen innerhalb einer Spalte muss einheitlich sein: Entweder haben alle Zellen Symbole oder keine von ihnen hat Symbole. Verwenden Sie nur leicht erkennbare und geläufige Symbole, wenn kein begleitender Text vorhanden ist.
• Die letzte Spalte einer Tabelle ist für Zeilenaktionen reserviert. Diese Aktionen können als Symbole, Aktionsschaltflächen oder ein Überlaufmenü dargestellt werden. Halten Sie den Typ und das Vorkommen innerhalb der Spalte konsistent.
• Beschränken Sie zur besseren Lesbarkeit die Anzahl der Spalten auf 8 pro Tabelle, wenn möglich, und bieten Sie eine Benutzerkonfigurationsoption zum Hinzufügen oder Entfernen von Spalten nach Bedarf.
• Die Größe der Spalten kann nach den Wünschen der Benutzer angepasst werden.

Zeilen

• Jede Zeile steht für einen Datensatz oder ein Objekt und die damit verbundenen Details.
• Die Primärzelle (Kennung) einer Zeile ist die Schlüsselinformation, die den Datensatz verankert.
• Die Zeilen können Auswahlsteuerelemente wie das Optionsfeld für die Einfachauswahl und das Kontrollkästchen für die Mehrfachauswahl enthalten.
• In Zeilen, die eine Zeilenerweiterung zulassen, erscheint das Erweiterungssymbol direkt hinter dem Auswahlsteuerelement. Ein Klick darauf öffnet und schließt die Zeilenerweiterung.
• Aktionen müssen immer verfügbar sein. Wenn der horizontale Bildlauf aufgerufen wird, wird die Spalte Aktionen eingefroren.

Richtlinien für die Anzeige von Aktionen in Tabellen

Verwendung von Symbolen

Sie können Symbole nur dann für Aktionen verwenden, wenn sie allgemein anerkannt und eindeutig sind. Zum Beispiel:

• Das Papierkorb-Symbol stellt die Löschaktion dar.
• Das Stiftsymbol stellt die Bearbeitungsaktion dar.

Wenn eine Verwechslung möglich ist, verwenden Sie eine Textbeschriftung oder kombinieren Sie das Symbol mit Text.

Verwalten von Aktionen auf Zeilenebene

Um Tabellen übersichtlich, scannbar und benutzerfreundlich zu halten, sollten Sie die Anzeige von Aktionen auf Zeilenebene sorgfältig verwalten. Die Anzahl und Häufigkeit dieser Aktionen bestimmen, ob sie direkt in der Tabelle angezeigt oder in einem Überlaufmenü platziert werden. Orientieren Sie sich an der folgenden Kurzanleitung, um ein übersichtliches und benutzerfreundliches Tabellendesign sicherzustellen:

Bei einer Aktion in der Tabelle

Die vollständige Bezeichnung wird in der Tabelle angezeigt.

In dieser Tabelle wird zur besseren Verständlichkeit eine einzelne Aktion mit der vollständigen Bezeichnung angezeigt.

Bei zwei Aktionen in der Tabelle

• Wenn beide Aktionen gleichermaßen verwendet werden, werden beide angezeigt.
• Wenn eine Aktion deutlich häufiger verwendet wird und eine übersichtlichere Benutzeroberfläche benötigt wird, wird die primäre Aktion angezeigt und die andere Aktion in das Überlaufmenü verschoben.

In dieser Tabelle werden 2 Aktionen angezeigt, da beide gleichermaßen verwendet werden.

In dieser Tabelle wird nur die primäre Aktion angezeigt. Für eine übersichtlichere Oberfläche befindet sich die sekundäre Aktion im Überlaufmenü.

Bei drei oder mehr Aktionen in der Tabelle

• Wenn eine primäre Aktion vorhanden ist, wird sie angezeigt. Die anderen Aktionen werden in das Überlaufmenü verschoben.
• Wenn mehrere Aktionen häufig verwendet werden, werden die beiden relevantesten Aktionen angezeigt und die restlichen Aktionen in das Überlaufmenü verschoben.

In dieser Tabelle ist die primäre Aktion hervorgehoben, mit weiteren Aktionen im Überlaufmenü.

In dieser Tabelle werden die zwei am häufigsten verwendeten Aktionen angezeigt, mit weiteren Aktionen im Überlaufmenü.

Funktionen der Tabellenansicht

Zustand „Leer“ und Zustand „Wird geladen“

• Wenn keine Daten angezeigt werden können oder wenn Bedingungen die Anzeige von Daten verhindern, informieren Sie die Benutzer mittels des Leerzustands. In der Meldung müssen das Problem und die Mittel zur Behebung des Problems klar angegeben werden.
• Wenn Daten abgerufen werden, wird der Benutzer mit dem Zustand „Wird geladen“ informiert. Die Nachricht muss eindeutig mitteilen, dass die Daten geladen werden, und erklären, warum der Benutzer warten muss.
• Über Aktionsschaltflächen kann bei Bedarf ein Neuladen der Seite ausgelöst werden.

Beispiel für den Zustand „Leer“ einer Tabellenansicht

Beispiel für den Zustand „Wird geladen“ einer Tabellenansicht

Reaktionsfähigkeit

Die Tabellenansicht ist sowohl für Tablets als auch für Mobilgeräte vollständig responsiv. Zellen können entfernt, neu angeordnet oder so kombiniert werden, wie es für die Benutzer sinnvoll ist. Für Mobile-First-Anwendungsfälle eignen sich Kartenansichten besser als eine rein responsive Anzeige.

Von links nach rechts: Tabellenansicht für Geräte mit mittlerem Formfaktor (Tablets), Tabellenansicht für Geräte mit kleinem Formfaktor (Mobiltelefone) und Kartenansicht für Mobile-First-Anwendungsfälle.

Tabellenfilter

Filtern bietet die Möglichkeit, bestimmte Datensätze zu bearbeiten. Die Filterung kann über den Filterbereich erfolgen, wobei Spaltenüberschriften als Filter dienen. Es gibt auch einen Suchfilter, mit dem Benutzer den Datensatz durch Eingabe eines Schlüsselworts eingrenzen können.

Tabelleneinstellungen

Mit den Tabelleneinstellungen können Benutzer Spalten ein- oder ausblenden und sie nach ihren Wünschen neu anordnen.

Summen in der Tabelle

Anhand von Summen können Benutzer schnell die Summe der wichtigen Daten in einer Tabelle erfassen. Wie Summen angezeigt werden, hängt davon ab, ob die Tabelle eine Paginierung aufweist und welche Art von Summe benötigt wird. Um Klarheit und Konsistenz sicherzustellen, orientieren Sie sich an Folgendem:

Tabelle ohne Paginierung (einseitige Tabelle)

• Fügen Sie am Ende der Tabelle eine Zeile ein, in der die Gesamtsumme der relevanten Datenspalten angezeigt wird.
• Die Beschriftung für diese Zeile kann einfach „Gesamt“ lauten, da alle Daten sichtbar sind.

Tabelle mit Paginierung

• Summe nur für sichtbare Zeilen (pro Seite): Verwenden Sie die Beschriftung „Gesamt (pro Seite)“. Dies ist für das Verständnis der Daten auf den einzelnen Seiten hilfreich.
• Summe für alle Daten (Gesamtsumme für alle Seiten): Verwenden Sie die Beschriftung „Gesamt (alle Seiten)“, um den gesamten Datensatz anzugeben. Dies ist hilfreich, wenn Benutzer einen Gesamtüberblick und nicht nur Einblick in die aktuelle Seite benötigen.
• Bei Bedarf können beide angezeigt werden. Wichtig dabei sind die eindeutigen Beschriftungen.

In dieser Tabelle wird die Summe für die aktuelle Seite angezeigt, die zur besseren Übersichtlichkeit mit „Gesamt (pro Seite)“ beschriftet ist.

In dieser Tabelle wird die Summe für alle Seiten angezeigt. Sie ist mit „Gesamt (alle Seiten)“ beschriftet und bietet einen Gesamtüberblick.

Dynamisch berechnete Summen

• Wenn Summen basierend auf Filtern oder Sortierungen aktualisiert werden, muss sichergestellt werden, dass der Wert korrekt aktualisiert wird.
• Bei großen Datensätzen wird bei der Neuberechnung der Summen eine Loader-Komponente angezeigt.

Anzeige mehrerer Summen in einer Tabelle

• Die Summen müssen eindeutig als „Gesamt (pro Seite)“ oder „Gesamt (alle Seiten)“ beschriftet werden.
• Die Ausrichtung mit der entsprechenden Spalte muss beibehalten werden.
• Wenn die Tabelle mehrere Summen enthält, sollten Sie die Summen nebeneinander gruppieren.

Die Summen sind klar beschriftet und ausgerichtet, wobei mehrere Summen gruppiert sind.

Tabelle enthält Aktionen

Die Spalte „Aktionen“ muss sich immer ganz rechts befinden.

Die Spalte „Aktionen“ befindet sich aus Gründen der Konsistenz ganz rechts.

Tabelle enthält eine Zeile mit Anpassungen

Eine Zeile mit Anpassungen dient dazu, Änderungen oder Korrekturen, die an ursprünglichen Werten vorgenommen wurden, transparent darzustellen. Hauptzweck ist, Klarheit über die Unterschiede zwischen der ursprünglichen und der endgültigen berechneten Summe zu schaffen, damit Benutzer Änderungen oder Abweichungen, die sich auf die Gesamtergebnisse der Daten auswirken, leicht erkennen und nachvollziehen können.

Eine Zeile mit Anpassungen hebt Änderungen hervor und verdeutlicht die Unterschiede zwischen der ursprünglichen und der endgültigen Summe.

Angeheftete Spaltenüberschrift

Mit dieser Option bleiben die Spaltenüberschriften an Ort und Stelle, während der Benutzer vertikal scrollt.

Erweiterbare Zeilen

Erweiterbare Zeilen sind nützlich, wenn nur minimale Details angezeigt werden sollen und es wichtig ist, den Kontext der Tabelle als Ganzes beizubehalten. Beispielsweise beim Vergleich verschiedener Datensätze. Die ausgewählte Zeile wird zur Anzeige der Detailansicht erweitert und kann minimiert werden, wenn sie nicht mehr relevant ist.

Klicken Sie auf das Erweiterungssymbol, um weitere Details zu einer Zeile anzuzeigen.

Änderung der Spaltengröße

• Standardmäßig werden die Spalten so verkleinert, dass sie in die Kopfzeile passen, mit Ausnahme der letzten Spalte, die so erweitert wird, dass sie den Rest des Containers ausfüllt. Dadurch wird die Nähe der Informationen beibehalten, um dem Benutzer die Analyse zu erleichtern.
• Wenn andere Spalten größer werden, wird die letzte Spalte kleiner, bis sie die Mindestbreite erreicht. Ab diesem Punkt wird die letzte Spalte über den sichtbaren Bereich der Tabelle hinausgeschoben und der horizontale Bildlauf wird aktiviert.
• Nach der Größenänderung bleibt die Breite einer Spalte so lange erhalten, bis der Benutzer sie ändert oder auf den Standardwert zurücksetzt.

Halten Sie den Ziehindikator gedrückt und bewegen Sie ihn, um die Größe einer Spalte zu ändern.

Ressourcen

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)