Dialog

Ein Dialog ist ein temporäres UI-Element, das eine klar abgegrenzte Interaktion aus dem aktuellen Nutzungskontext heraushebt. Er wird verwendet, um eine Entscheidung, eine kurze Eingabe oder eine wichtige Information fokussiert zu bearbeiten, ohne eine neue Seite zu öffnen. Dialoge sollten nur dann eingesetzt werden, wenn die Aufgabe einen echten Mehrwert durch diese Form der Unterbrechung und Fokussierung hat.

Overview

Hinweis zu Dialogtypen

Modale Dialoge blockieren die restliche Oberfläche, bis die Nutzeraktion abgeschlossen oder der Dialog geschlossen wird. Nicht-modale Dialoge bleiben parallel zur Hauptoberfläche geöffnet und eignen sich für unterstützende Inhalte oder Aufgaben, bei denen Informationen im Hintergrund weiter sichtbar und nutzbar bleiben müssen. Im Mate Design System empfehlen wir aktuell ausschließlich modale Dialoge , weil sie in unseren Anwendungsfällen die klarere, robustere und konsistentere Interaktion für entscheidungsrelevante Unterbrechungen bieten. Die Dokumentation bezieht sich auch deswegen ausschließlich auf den Einsatz von modalen Dialogen.

Intro

Modal Dialoge werden dazu verwendet kritische Informationen anzuzeigen, oder wenn eine Eingabe vom Nutzer erforderlich ist, damit eine Aufgabe abgeschlossen werden kann, die mit der im Hintergrund dargestellten Seite im Zusammenhang steht.

Modal Dialoge sind bewusst so designt, dass sie den Nutzer beim Bearbeiten seiner Aufgabe unterbrechen. Wenn sie aktiv sind, dann kann der Nutzer nicht zur vorherigen Aufgabe zurückkehren, ohne den Anweisungen im Modal Dialog zu folgen oder diesen abzubrechen. Dieses Paradigma macht Modal Dialoge auf der einen Seite sehr effektiv, wenn man sie richtig einsetzt, jedoch sollte man sie nur sparsam einsetzen, damit der Nutzer nicht permanent bei seiner Arbeit unterbrochen wird.

Beispiel Modal Dialog

Verwendung

👍 Do	👎 Don't
... wenn ein Warnung kommuniziert werden soll wie z.B. wenn der Nutzer eine destruktive Aktion auslösen möchte (Daten löschen). ... wenn der Nutzer eine Aufgabe abschließen möchte die große Auswirkungen hat, z.B. 1000 Datensätze auf einmal modifizieren. ... wenn der Nutzer sich von einer unvollständige Aufgabe abwendet, wie z.B. ein unvollständiges Formular abbricht.	... wenn eine erfolgreiche Aktion kommuniziert werden soll, wie z.B. Daten wurden erfolgreich gespeichert. ... wenn wiederkehrende oder komplexe Daten eingegeben werden sollen. Setze die Funktionalität dann in der jeweiligen Seite direkt um, wie es z.B. im Master-Detail Bedienmuster oder beim Wizard beschrieben ist.

Guidelines

Hinweis zu Dialogtypen

Modale Dialoge blockieren die restliche Oberfläche, bis die Nutzeraktion abgeschlossen oder der Dialog geschlossen wird. Nicht-modale Dialoge bleiben parallel zur Hauptoberfläche geöffnet und eignen sich für unterstützende Inhalte oder Aufgaben, bei denen Informationen im Hintergrund weiter sichtbar und nutzbar bleiben müssen. Im Mate Design System empfehlen wir aktuell ausschließlich modale Dialoge , weil sie in unseren Anwendungsfällen die klarere, robustere und konsistentere Interaktion für entscheidungsrelevante Unterbrechungen bieten. Die Dokumentation bezieht sich auch deswegen ausschließlich auf den Einsatz von modalen Dialogen.

Aufbau

Titelleiste

Der Titel in der Titelleiste beschreibt kurz bündig und klar die Aufgabe oder den Grund für den modalen Dialog. Der Titel sollte mit den Bezeichnungen der Buttons zusammenpassen, z.B. wenn der Titel in der Titelleiste „Kontakt löschen?“ lautet, dann sollte der Button das Label „Löschen“ haben.

Inhalt

Der Inhaltsbereich beinhaltet die erforderlichen Informationen oder Bedienelemente, damit die Aufgabe abgeschlossen werden kann.

Funktionsleiste

Die Funktionsleiste beinhaltet alle Funktionen um die Aufgabe abzuschließen oder abzubrechen. Verwende sprechende Labels für die Buttons wie z.B. "Löschen", "Speichern" und vermeide vage Bezeichnungen wie "OK", "Fertig".

Überlagerung

Der Bildschirm wird mit einer grauen Fläche hinter dem Dialog überlagert, um den Inhalt dahinter zu verdecken.

Varianten/Typen

	Transaktionsvariante Diese Variante wird verwendet, um Entscheidungen vom Nutzer zu validieren, oder eine zweite Bestätigung zu bekommen. Die Transaktionsvariante erfordert eine Aktion vom Nutzer, damit der Modal Dialog geschlossen und die Aufgabe zu Ende geführt werden kann.
	Gefahrenvariante Diese Variante ist eine Unterart der Transaktionsvariante und wird verwendet, wenn der Nutzer destruktive oder irreversibele Aktionen auslösen möchte.
	Bestätigungsvariante Diese Variante wird dazu verwendet, wenn das System eine Bestätigung vom Nutzer bzgl. einer Information benötigt.

Varianten mit unterschiedlichen Größen

Es gibt 3 unterschiedlich große Modal Dialoge: Small, Medium und Large. Die oben aufgeführten funktionalen Varianten lassen sich mit den verfügbaren Größen der Modal Dialoge darstellen.

Größen des Modal Dialogs

Verhalten

1. Modal Dialog Fenster haben eine relative, minimale und maximale Breite, damit diese nicht zu schmal oder zu breit dargestellt werden.
2. Modal Dialoge wachsen in der Höhe, abhängig davon wie viel Inhalt sie enthalten. Sie verfügen ebenfalls über einen gleichen Abstand oben und unten. Wenn die Gesamthöhe die verfügbare Höhe im Fenster überschreitet, dann lässt sich der Inhaltsbereich vertikal scrollen. Horizontales Scrollen in Modal Dialogen ist dagegen nicht möglich.
3. Die Überlagerung erstreckt sich über das gesamte Fenster inkl. Anwendungsrahmen.
4. Die Buttons in der Funktionsleiste sind rechts angeordnet. Siehe auch Buttons für weitere Informationen und Layout Empfehlungen.
5. Der Inhaltsbereich lässt beliebige Inhalte zu. Standardmäßig ist ein innerer Abstand vorgesehen, dieser kann bei Bedarf jedoch deaktiviert werden um z.B. Tabellen über die gesamte Breite darzustellen. Sollte der Inhalt über den verfügbare Raum hinaus reichen, dann ist der vertikale Scrollbalken immer zu sehen.
6. Der Titel in der Titelleiste steht linksbündig und ist kurz zu halten wie z.B. "Eingaben verwerfen?"

Transaktionsvariante

Diese Variante hat immer einen primären Button, um die Aktion auszuführen, sowie einen sekundären Button, um die Aktion abzubrechen. Die Transaktionsvariante kann auf folgende Arten geschlossen werden:

1. Aufgabe abschließen: Ein Klick auf den primären Button führt die Aufgabe durch und schließt das modale Fenster automatisch.
2. Abbrechen Button: Ein Klick auf den Abbrechen-Button schließt das modale Fenster und führt zurück zum vorherigen Kontext. Das Abbrechen verwirft ggf. alle vorherigen Eingaben im Modal Dialog.
3. Esc Taste: Die Esc Taste auf der Tastatur löst die selbe Funktion aus wie der Abbrechen Button im Modal Dialog.
   

Gefahrenvariante

Diese Variante hat an Stelle des primären Buttons immer einen Negativ Button, um die Aktion auszuführen, sowie einen sekundären Button, um die Aktion abzubrechen.

Die Gefahrenvariante kann auf die selben Arten geschlossen werden wie die Transaktionsvariante.

Bestätigungsvariante

Diese Variante hat ausschließlich einen primären Button in der Funktionsleiste.

Die Bestätigungsvariante kann auf folgende Arten geschlossen werden:

Aufgabe abschließen

Ein Klick auf den primären Button führt die Aufgabe durch und schließt das modale Fenster automatisch.

Barrierefreiheit

Tastaturbedienung

Sobald ein Modal Dialog eingeblendet wird muss der Fokus auf die Überschrift gelenkt werden. Der Fokus darf nicht initial auf den primären Button gelegt werden, damit ein versehentliches Auslösen ausgeschlossen ist.

Modal Dialoge halten den Fokus gefangen. Das bedeutet das die Nutzer über die Tabulatortaste („Tab“) oder Hochstell- und Tabulatortaste („Shift + Tab“) den Fokus ausschließlich über die Inhalte vom Modal Dialog verschieben können. Inhalte aus der dahinter liegenden Seite lassen sich nicht mehr fokussieren.

Inhalte hinter dem Modal Dialog dürfen von assistierenden Technologien nicht mehr vorgelesen werden. Die beste Art, um das sicherzustellen, ist, dem Modal Dialog und den Inhalten im Hintergrund unterschiedliche Container zu geben, welche über das aria-hidden entsprechen ihrer Zustände gekennzeichnet sind. Der Modal Dialog sollte zudem die role=dialog besitzen.

Schematische Darstellung, wie der Fokus im Modal Dialog verschoben werden soll

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-dialog--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fdialog

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-dialog-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Paragraph;

Variants

Small

Dialog dialog = new Dialog();
dialog.setHeaderTitle("Small dialog");
dialog.add(new Paragraph("Content"));
dialog.addThemeName("small");

Medium

Dialog dialog = new Dialog();
dialog.setHeaderTitle("Medium dialog");
dialog.add(new Paragraph("Content"));
dialog.addThemeName("medium");

Large

Dialog dialog = new Dialog();
dialog.setHeaderTitle("Large dialog");
dialog.add(new Paragraph("Content"));
dialog.addThemeName("large");

Footer actions

Dialog dialog = new Dialog();
dialog.setHeaderTitle("Datensätze löschen?");
dialog.add(new Paragraph("Diese Aktion kann nicht rückgängig gemacht werden."));
Button cancelButton = new Button("Abbrechen", e -> dialog.close());
Button deleteButton = new Button("Löschen", e -> dialog.close());
dialog.getFooter().add(cancelButton, deleteButton);