Verwendung
Übergreifende Systemmeldungen werden anders als Modale Dialoge nicht in Form eines Overlays angezeigt, das die jeweiligen Masken überdeckt, sondern sie schaffen sich ihren eigenen Bereich, indem sie oberhalb des Headers angezeigt werden. Sie finden Verwendung für allgemeine Hinweise zur Anwendung wie z. B. Hinweise auf kommende Wartungsfenster, an denen die Anwendung nicht zur Verfügung steht. Die Inhalte sind je nach Situation frei bestimmbar, sollten aber ein Maß von ca. 4 Textzeilen nicht überschreiten.
Aufbau
Ihr Aufbau besteht generell aus einer sinnbildenden Überschrift (optional, aber empfohlen), dem Hinweistext auf den jeweiligen Sachverhalt, sowie einem rahmenlosen Icon-Button zum Schließen der Systemmeldung. Sofern dies inhaltliche notwendig ist können auch mehr als nur eine Systemmeldung untereinander angezeigt werden.
Diese Form der Systemmeldung kann analog zu zoll.de auch für Cookie-Hinweise verwendet werden. In diesem Fall sind weitere Schaltflächen zum Akzeptieren bzw. Ablehnen von Cookies erlaubt. In allen anderen Fällen, die über den Text hinausgehende Formularelemente für Eingaben oder Auswahlen benötigen, muss statt einer Systemmeldung ein Modaler Dialog verwendet werden.
Vermeiden Sie, dass nach Schließen einer Systemmeldung an gleicher Stelle eine weitere, neue Meldung anstelle der bisherigen erscheint.
Positionierung & responsives Verhalten
Ab dem Breakpoint XS (≥ 0px)
- Alle Systemmeldungen nehmen die volle Breite des Viewports ein.
- Systemmeldungen werden über dem Header platziert und schieben diesen nach unten.
- Es wird kein Weißraum über, unter, zwischen oder neben den Meldungen gelassen.
Ab dem Breakpoint SM (≥ 576px)
- Die Buttons des Datenschutzhinweises werden rechtsbündig angeordnet.
Ab dem Breakpoint XL (≥ 1200px)
- Die Buttons des Datenschutzhinweises werden neben dem Text angeordnet.
- Alle Systemmeldungen erstrecken sich weiterhin über die gesamte Breite des Viewports.
- Der Inhalts-Container einer Systemmeldung ist zentriert und orientiert sich am Grid.
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
- Ein Übermaß an gleichzeitig dargestellten Meldungen
- Nutzende in ihrer Aufgabe unterbrechen, wenn die Unterbrechung nicht zwingend ist
- Meldungen ohne Zutun des Nutzenden wieder ausblenden
