Darstellung und Verhalten

Dialoge sind Pop-up-Fenster, die Nutzende über benötigte Informationen in einem Prozess informieren. Sie dienen dazu, notwendige Aktionen explizit abzufragen. Die referenzierte Seite wird dabei nicht verlassen.

Dialog

Der Dialog ist ein im Viewport zentriertes Pop-up-Fenster. Das Dialogfenster besteht aus einem Titelbereich, dem Inhaltsbereich und dem Aktionsbereich.

• Im Titelbereich wird die Funktion oder Aktion, die die Nutzenden im Dialog erledigen können, beschrieben.
• Über den Schliessen-Link oder Klick auf die abgedunkelte Zone gelangen Nutzende auf die darunter liegende Seite zurück.
• Der Inhaltsbereich beinhaltet Formularfunktionen oder weiterführende Inhalte sowie Links.
• Der Aktionsbereich beinhaltet im Minimum eine Funktion «Abbrechen». Die Hauptaktion wird durch einen primären Button gekennzeichnet.
• Hinter dem Dialogfenster wird das restliche Interface abgedunkelt. Der Ursprung bleibt für die Nutzenden so weiterhin erkennbar, der Fokus liegt aber eindeutig auf dem Dialogfenster.

Verhalten

Scroll-Verhalten bei überlappenden Inhalten

Die Informationsmenge sollte in der Regel so gewählt werden, dass eine Überlappung des Dialogfensters über den Viewport hinaus nicht möglich ist. Sollte dies dennoch der Fall sein, wird das Dialogfeld scrollbar. Der Aktionsbereich wird dabei am unteren Rand festgemacht.

Mobile-Verhalten

Auf Smartphones bedeckt der Dialog-Layer die gesamte verfügbare Fläche.

Verwendung

Wir verwenden den Dialog, um kleine Abfragen an die Nutzenden zu richten. Das Dialogfenster kann beispielsweise dann zum Einsatz kommen, wenn dargestellte Daten bearbeitet oder ergänzt werden können. Es eignet sich auch für einzelne, komplexe Formularschritte, wie beispielsweise das Hochladen einer Datei. Aus Gründen der Barrierefreiheit setzen wir Dialogfenster sehr bedacht und sparsam, statt freigiebig ein.

Dialog für explizite Aktionen

Dialogfenstern unterbrechen bewusst den Prozess der Nutzenden, um den Fokus auf eine bestimmte Information zu lenken. Ein Dialogfenster erfordert in den meisten Fällen eine Aktion der Nutzenden – im Minimum das aktive Schliessen des Dialogfensters.

Dialog zum Editieren von Inhalten

Ein Dialogfenster kann auch verwendet werden, um Seiteninhalte zu editieren.

Dialogfenster für Detailinformationen

Mit dem Dialogfenster können wir Detailinformationen einer Content-Seite darstellen. Der Inhalt besteht typischerweise nur aus Inhaltselementen wie Text und Tabellen und verlangt von den Nutzenden keine weitere Interaktion als dieses wieder zu schliessen. Der Inhalt im Dialog kann im Rahmen des Grunddesigns gestaltet werden.

Code