Dashboard (Pro)
Die Dashboard Komponente liefert eine Benutzeroberfläche, die relevante Informationen und Kennzahlen übersichtlich zusammenfasst, um schnelle Einsichten und Entscheidungen zu ermöglichen.
Overview
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Intro
Die Dashboard Komponente liefert eine Benutzeroberfläche, die relevante Informationen und Kennzahlen übersichtlich zusammenfasst. Sie dient dazu, Nutzern Einblicke in komplexe Daten, Prozesse oder Abläufe zu geben und fundierte Entscheidungen zu ermöglichen. Dashboards fokussieren sich auf Übersicht und Monitoring , nicht auf Detailarbeit, und sind besonders nützlich, wenn mehrere Informationsquellen oder Metriken gleichzeitig betrachtet werden müssen.
Beispiel Dashboard
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| Verwenden, wenn: - Schnell mehrere zusammenfassende Informationen (KPIs, Status oder Trends) auf einen Blick ersichtlich sein sollen. - Entscheidungen oder Aktionen basierend auf Echtzeit-Daten getroffen werden müssen. - Verschiedene Datensätze nebeneinander oder aggregierte Daten betrachtet werden müssen. - Bei regelmäßigem Zugriff auf wichtige oder die gleichen oder Informationen, ohne sie neu suchen zu müssen. | Nicht verwenden, wenn: - Nicht für tiefgehende Analysen oder komplexe Exploration mit vielen Filtern/Drilldowns einsetzen – dafür separate Seiten bereitstellen. - Kein Dashboard für Datenerfassung oder Bearbeitung (Formulare, lange Tabellen, Workflows). Dashboards sind für „at-a-glance“ Monitoring & schnelle Entscheidungen – nicht für Primäraufgaben mit Eingaben. - Die gezeigten Daten nicht regelmäßig aktualisiert werden |
Guidelines
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Aufbau
Ein Dashboard besteht aus mindestens zwei Widgets. Die Größe der Widgets ist flexibel und orientiert sich an einem Raster (Sechs Spalten und min. eine Zeile). Ein Widget muss mindestens eine Kachel ausfüllen.
Aufbau Dashboard
Widgets
Jedes Widget beinhaltet bestimmte Informationen, Kennzahlen oder Status und wird in Containern dargestellt, um Inhalte zu gruppieren und visuelle Klarheit zu schaffen; Widgets können z. B. Diagramme, Tabellen, Zahlenwerte oder Benachrichtigungen enthalten. Widgets können Daten aus mehreren Softwarebereichen beinhalten. Es kann außerdem als Schnelleinstieg in die Softwarebereiche genutzt werden.
Aufbau
Bestandteile Widget
- Widget-Badge (optional): Kann verwendet werden, um Widgets – z. B. von Produkten oder Modulen – leichter unterscheidbar zu machen.
- Titel: Jedes Widget benötigt einen Titel, der den Inhalt eindeutig beschreibt.
- Vorwärts-Navigation (optional): Bei Bedarf kann eine Vorwärts-Navigation zu weiterführenden Dialogen genutzt werden.
- Overflow-Menü (optional): Öffnet ein Menü mit zusätzlichen Funktionen (z. B. zur Konfiguration des Widgets).
- Inhalt: Weitere Hinweise zur Gestaltung von Inhalten finden sich im Abschnitt Beispiele bei den Widgets.
- Tabs (optional): Falls erforderlich, können mehrere Datenansichten über Tabs dargestellt werden.
Beispiele für den Inhalt eines Widgets
Tabellen
Beispiel für Tabellen
- Tabelle: Verwende nur Rahmen und keine Spalten und Zeilentrennlinien.
Daten und Diagramme
Beispiel Daten und Diagramme
- Legenden: Verwende Legenden für ein besseres Verständnis der Daten des Charts.
- Datenvisualisierungen: Verwende zum Visualisieren von Daten in Diagrammform die Vaadin Charts. Ergänzend können daneben kleine Tabellen mit weiteren Werten dargestellt werden. Mehr Informationen zu Charts
Key Performance Indicator (KPI)
Beispiel KPIs
KPIs: Verwende die KPI-Facette um die wichtigsten Daten auf einen Blick darzustellen.
Verhalten
Standard Mode
Darstellung Standard Mode
Der Standard Mode dient zur Ansicht eines Widgets. Die Funktionen eines Widgets dienen als Schnelleinstieg: Bei der Ausführung (z. B. Klick auf eine Schaltfläche) in einer Tabelle eines Widgets oder bei der Vorwärts Navigation wird der Nutzer direkt in das Modul weitergeleitet, das diese Funktion samt aller Details bereitstellt. So kann er nahtlos an die gestartete Aktion anknüpfen und im Modul weiterarbeiten.
Edit Mode
Darstellung Edit Mode
- Anfasser zum Verschieben des Widgets
- Button „Entfernen“: entfernt das Widget
- Anfasser zum Skalieren (Vergrößern oder Verkleinern) des Widgets
Barrierefreiheit
Tastaturbedienung
Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") kann durch die Widgets im Dashboard navigiert werden. Einzelne Optionen lassen sich dann mit den Pfeiltasten ansteuern. Ist eine Option im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.
Alle Interaktionselemente der Widget-Komponente müssen – wie in den Beschreibungen der jeweiligen Komponenten festgelegt – über die Tastatur bedienbar sein. Zusätzlich sollten zu Diagrammen immer alternative Darstellungen bereitstehen, bevorzugt in Form von Tabellen oder KPI-Facetten, z. B. über einen Tab.
Datenanzeige für Barrierefreiheit anpassen
Darstellung anpassen