Dashboardseite
Overview
Intro
Die Dashboardseite bietet dem Nutzer einen zentralen Überblick über relevante Informationen und verfügbare Funktionen. Sie eignet sich besonders gut als Startseite, da es einen schnellen und intuitiven Einstieg in die Anwendung ermöglicht und den Zugriff auf wichtige Bereiche erleichtert.
Dashboardseite
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| Verwenden, wenn: - ein Überblick über verschiedene Funktionalitäten und/oder Informationen gegeben werden soll. - ein Schnelleinstieg in die Funktionalitäten des Softwaremoduls ermöglicht werden soll - Funktionalitäten und/oder Informationen aus verschiedenen Softwaremodulen übersichtlich dargestellt werden sollen. | Nicht verwenden, wenn: - die Seite einen Überblick über ein einziges Datenobjekt geben soll. Hierfür eignet sich die Objektseite. - ein Überblick über einen Datenbestand als Ganzen gegeben werden soll. Hierfür eignet sich die Tabellenseite. - sich die Seite auf eine Funktionalität beschränkt. - komplexe Funktionalitäten ausgeführt werden sollen. |
Guidelines
Aufbau
Jede Dashboardseite besitzt einen Titel und beinhaltet die Dashboard Komponente, die Widgets in einem Raster einbindet. Falls das Dashboard konfigurierbar ist, kann optional eine Funktionsleiste basierend auf einer Menubar eingebunden werden. Ein Widget nimmt in Höhe und Breite zunächst nur so viel Platz ein, wie es benötigt, und kann dabei auch mehrere Spalten oder Zeilen umfassen. Weitere Informationen finden sich in der Dokumentation zur Dashboard Komponente .
Aufbau einer Dashboardseite
- Titel: Jede Dashboardseite muss immer einen Titel besitzen.
- Funktionsleiste (Optional): Über die Funktionsleiste (basierend auf einer Menu Bar) lässt sich ein Dashboard konfigurieren. Es können Widgets hinzugefügt, entfernt, verschoben, vergrößert und verkleinert werden. Ebenso kann der Standardzustand wiederhergestellt werden. Ebenso können Vorlagen gespeichert, geladen und verwaltet werden.
- Dashboard: Ausführlichere Informationen zum Dashboard
Object Header und Seitenüberschrift
Die Seitenüberschrift dient zur Orientierung. Sie sollte die dargestellte Seite beschreiben und/oder das Objekt bzw. den Kontext wie z.B. in welcher Funktion sich der Nutzer derzeit befindet, kommunizieren.
Aktuell ist im Design System kein globaler Standard für Seitentitel festgelegt.
Die Verantwortung für die Definition und Dokumentation des jeweils richtigen Seitentitels liegt auf Produktebene.
Siehe den Abschnitt Seitenüberschrift und Object Header unter UX Writing in Foundations.
Verhalten
Widgets ein- oder ausblenden
Um Widgets im Dashboard ein- oder auszublenden, aktiviere zunächst den Editiermodus über die Funktionsleiste mit einem Klick auf " Bearbeiten ".
Editiermodus aktivieren
- Ausblenden: Klicke auf die „Schließen“-Schaltfläche in der oberen rechten Ecke des Widgets.
- Wieder einblenden: Dafür stehen zwei Möglichkeiten zur Verfügung:
- Über den Button „Standard wiederherstellen“ in der Menüleiste – damit wird das Dashboard in seinen ursprünglichen Zustand zurückgesetzt.
- Über die Funktion „Widget hinzufügen“ in der Funktionsleiste – dort kannst du gezielt das gewünschte Widget erneut auswählen und einfügen. Es werden dabei stets alle zur Verfügung stehenden Widgets angezeigt auch wenn diese bereits integriert wurden.
- Editiermodus beenden: Klicke auf die „Fertig“-Schaltfläche um den Editiermodus zu beenden.
Widgets ein- oder ausblenden
Widget-Inhalte anpassen
Der Inhalt eines Widgets lässt sich individuell konfigurieren:
- Klicke auf die Einstellungstaste im Widget.
- Es öffnet sich ein Menü mit den verfügbaren Anpassungsmöglichkeiten.
- Für individuelle Änderungen z.B. an Parametern oder Zeiträumen ist diese Änderung in einem Modalen Dialog anzuzeigen. Welche Einstellungen verfügbar sind, hängt vom Kontext ab, den das Widget abbildet.
Widget Inhalte anpassen
Dashboard Vorlagen verwalten
Im Editiermodus öffnet sich durch einen Klick auf die „Vorlagen“-Schaltfläche ein Menü, über welches Dashboard-Vorlagen gespeichert, geladen und verwaltet werden.
Dashboard Layout Vorlagen verwalten
Barrierefreiheit
Tastaturbedienung
Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") springt man in die jeweiligen Widgets und fokussiert verfügbare Aktionen der Widgets. Gibt es in den jeweiligen Widgets Elemente welche auswählbar sind, so werden diese als nächstes fokussiert. Innerhalb des Widgets kann man mit den Pfeiltasten navigieren. Zudem können fokussierte Optionen mit Leertaste ausgeführt werden.