Verwendung
Mit Modalen Dialogen werden Rückmeldungen und Fragen des Systems dargestellt, auf die Nutzende reagieren müssen. Sie beschleunigen die Interaktion durch Fokussierung und stellen nicht relevante Inhalte in den Hintergrund. Modale können außerdem zur Absicherung sicherheitskritischer Interaktionen oder zum Informationsaustausch mit den Nutzenden verwendet werden.
Aufbau
Üblicherweise bestehen Modale aus einem Dreiklang von:
- aussagekräftiger und verständlich getextete Überschrift,
- einem Sachverhalt mit Erläuterungen der Rückmeldung bzw. Fehlermeldung oder einer eindeutigen Fragestellung,
- einem “Call-to-Action” in Form von einem oder mehreren Buttons in einer Schaltflächenzeile zur Bestätigung oder Ablehnung der Meldung oder zur Auswahl der möglichen Optionen.
Sollte keine Schaltfläche vorgesehen sein, so muss der Dialog eine Schaltfläche zum Schließen des Dialogs anbieten, in der Regel ist dies ein Icon-Button mit einem Schließen-Symbol.
Symbole mit entsprechender farblicher Gestaltung können benutzt werden, um die Art der Rückmeldung zu visualisieren.
Mit der Ausnahme von bestimmten fachlich festgelegten Fragemeldungen haben Informationsmeldungen, Fehlermeldungen und Erfolgsmeldungen nicht zwingend eine generische Überschrift, sondern vermitteln ihren Zweck durch einen aussagekräftigen und nachvollziehbaren prägnanten Textinhalt und Beschriftungen in Buttons, die eindeutig die auszulösenden Aktionen beschreiben.
In begründeten Fällen können auf einer Maske auch mehrere Dialoge und Meldungen erscheinen. Dies kann zum Beispiel der Fall sein, wenn eine Systemmeldung noch nicht bestätigt wurde und dann während der Bearbeitung ein Fehler auftritt, auf den hingewiesen werden muss.
Positionierung & responsives Verhalten
Modale Dialoge werden horizontal zentriert und vertikal in der optischen Mitte des Viewports mit ausgegrautem Seitenhintergrund angezeigt. Die allgemeinen Regeln zu Schriftgraden und -farben und sonstigen Textauszeichnungen finden auch hier unveränderte Anwendung.
Dialoge verhalten sich responsiv, d. h. unterhalb eines festgelegten Schwellwerts nehmen sie, weiterhin zentriert, die fast volle Breite des Bildschirms ein.
Die Höhe von Dialogen ist nicht festgelegt, sondern richtet sich nach deren Inhalten. Bei der Konzeption solcher Inhalte muss darauf geachtet werden, dass sie auch auf mobilen Endgeräten, inklusive ihrer Bedienelemente wie Buttons, vollständig und ohne scrollen wahrnehmbar sein sollten.
Ab dem Breakpoint XS (≥ 0px)
- Das Modal nimmt bis zur festgelegten Maximalbreite 100% des Viewports ein (abzüglich Padding).
- Innerhalb des Modals selbst wird nicht gescrollt. Sollten in Ausnahmefällen die Inhalte des Modals die verfügbare Höhe des Viewports überschreiten, so wird beim scrollen das ganze Modal auf dem abgedunkelten Hintergrund bewegt.
Ab dem Breakpoint SM (≥ 576px)
Sonderfälle
Einen Sonderfall stellen die Dialoge des „Session Timer“ als Bestandteil des Header-Musters dar, wo diese auch im Detail beschrieben sind.
In bestimmten fachlich geforderten Dialogen können diese auch strukturierte Daten enthalten, zum Beispiel zur Detaillierung von Datensätzen oder Sachverhalten. Dialoge können ebenso kleine Mengen von weiteren Formular-Elementen zur Eingabe von Daten oder zur Auswahl aus einer Datenmenge enthalten.
Vertikaler Abstand zwischen Textfeldern = 24px
Anwendungsfall: Login-Option löschen
Do’s and Dont’s
So:
- In der Konzeption die Relevanz für den jeweiligen Kontext bewerten
- Prägnante und klare Formulierungen
- Wichtigkeitsgrad der Meldung farblich und im Text kommunizieren
- Bekannte Lösungen anbieten
- „So viel wie nötig, so wenig wie möglich“
So nicht:
- Nichtssagende Meldungen, wenn die Aufgabe auch ohne diese Meldung abgeschlossen werden könnte
- Übermaß an gleichzeitig dargestellten Meldungen
- Nutzende in ihrer Aufgabe unterbrechen, wenn die Unterbrechung nicht zwingend ist
- Meldungen ohne Zutun der Nutzenden ausblenden
- Verschachtelte Dialoge
