Inhaltsbereich Navigation Navigation Fußzeile

Globale Meldung (Toast)

Verwendung

Globale Meldungen oder Toasts sind leichtgewichtige Benachrichtigungen, die den Push-Benachrichtigungen nachempfunden sind, wie sie aus mobilen und Desktop-Betriebssystemen bekannt sind.

Meldungen der Anwendung in Form von Dialogen haben eine Reihe Gemeinsamkeiten, die hier zusammengefasst beschrieben werden. Regeln zu Fehlerhinweisen am Feld entnehmen Sie bitte dem entsprechenden Abschnitt im Bereich Formular-Elemente.

  • Grundsätzlich sollen Meldungen hilfreiche Informationen kommunizieren. Nichtssagende, zum jeweiligen Kontext unpassende oder auch redundante Informationen müssen vermieden werden.
  • Jede Meldung ist immer zunächst eine neutrale Information und somit eine Informationsmeldung.
  • Wenn eine Meldung zwingend einer anderen Klasse zugeordnet werden kann, dann wird die Meldung als Erfolg, Fehler oder Frage deklariert.
  • Sind mehrere Interpretationen möglich, dann wird eine Informationsmeldung verwendet.
  • Die Kommunikation ist immer wohlwollend, erklärend, nicht „strafend“ und soll nicht einschüchtern, sondern verständlich und nachvollziehbar informieren.

Fehlermeldungen sollen vermieden werden, die Nutzende nur darauf hinweisen, dass ihnen für eine Aktion die Berechtigung fehlt. Stattdessen sollen Funktionen, die zu einem solchen Fehler führen könnten, gar nicht angezeigt werden bzw. nicht aktiv sein. In diesem Fall sollen vor dem Beginn einer Formularbearbeitung Erklärungen zu fehlenden Rechten (z. B. zum sog. “Vertrauensniveau“) angezeigt oder verlinkt werden.

In begründeten Fällen können auf einer Maske auch mehrere Meldungen erscheinen. In diesem Fall müssen die Meldungen in der Reihenfolge ihres Erscheinens untereinander an der dafür vorgesehenen Stelle angeordnet werden, d. h. bei größeren Bildschirmen oben rechts in ihrer definierten Breite, bei kleineren Bildschirm auf nahezu voller Breite des Mobilgerätes. Hierbei muss darauf geachtet werden, dass diese Dialoge sich unter keinen Umständen überschneiden.

Positionierung & responsives Verhalten

Ab dem Breakpoint XS (≥ 0px)
  • Alle Globalen Meldungen nehmen 100% der Viewport-Breite ein (abzüglich Außenabstand).
  • Die Meldungen werden an der Oberkante des Screens fixiert und können nicht aus dem Viewport gescrollt werden.
Breakpoint XS
Ab dem Breakpoint SM (≥ 576px)
  • Globale Meldungen wachsen mit ihrem Inhalt, bis sie Ihre Maximalbreite erreicht haben.
  • Globale Meldungen werden in der oberen rechten Ecke des Viewports und damit außerhalb des Grids platziert.
Breakpoint SM
Ab dem Breakpoint XL (≥ 1200px)
  • Globale Meldungen werden in der oberen rechten Ecke des Viewports und damit außerhalb des Grids platziert.
Breakpoint XL, Abbildung nicht maßstabsgetreu

Allgemeine Eigenschaften und Kriterien zur Unterscheidung

Meldungen werden entweder automatisch vom System generiert oder sind eine Reaktion auf eine durch Nutzende ausgeführte Aktion. Hierbei wird unterschieden zwischen Informationsmeldungen, Erfolgs- und Fehlermeldungen. Deutlich von diesen abzugrenzen sind Dialoge und Fragemeldungen mit Optionen zu Entscheidungen, die in einem eigenen Muster „Modale Dialoge“ behandelt werden.

Visualisierung der folgenden Textbeschreibung.
Entscheidungsbaum zur Ermittlung der richtigen Variante

Informationsmeldungen

Informationsmeldungen werden in einem Dialog angezeigt, wenn Nutzende zu einem Sachverhalt informiert werden sollen, der relevant für den aktuellen Prozess ist, aber keine unmittelbare Handlung erfordert. Dabei kann es sich um die nächsten Schritte eines Prozesses oder Begründungen für Änderungen im Vorgangsstatus handeln.

Die Informationsmeldung besteht aus:

  • Symbol
  • Hinweistext
  • Ein Icon-Button bestätigt die Kenntnisnahme und schließt den Dialog.

Bei der Konzeption solcher Meldungen muss darauf geachtet werden, dass nur wirklich relevante Meldungen ausgegeben werden. Eine Überfrachtung mit unnötigen Meldungen muss vermieden werden, die lediglich etwas bereits Offensichtliches duplizieren.

Erfolgsmeldungen

Eine Erfolgsmeldung wie z. B. „Ihre Änderungen wurden gespeichert.“ darf erst erscheinen, wenn Daten tatsächlich auch geändert und durch Betätigung von „Speichern“ übernommen worden sind und damit eine Aktion erfolgreich abgeschlossen wurde.

So oft wie möglich werden sprachlich standardisierte Erfolgsmeldungen verwendet wie z. B. „Vielen Dank! Sie haben die E-Mail-Adresse für die Benachrichtigung zum Datenabruf erfolgreich bestätigt.“ oder „Derzeit befinden sich keine Nachrichten in Ihrem Posteingang.“

Nach dem Speichern lädt die Seite neu und der Beginn der Maske wird angezeigt, sofern keine übergeordnete Seite vorhanden ist. Sollte es eine übergeordnete Seite im Prozess geben, so wird nach dem Speichern auf diese zurücknavigiert und dort die Erfolgsmeldung angezeigt, dass die Änderungen gespeichert wurden.

Falls keine Daten geändert wurden, so wird lediglich eine Informationsmeldung „Sie haben keine Daten geändert.“ angezeigt und die Maske wird nicht neu geladen.

Fehlermeldungen & Systemmeldungen

Fehlermeldungen der Anwendung müssen grundsätzlich am fehlerbehafteten Feld selbst angezeigt werden (siehe hierzu die bei den einzelnen Formularelementen definierten Fehlerzustände). Globale Fehlermeldungen erscheinen nur, wenn ein aufgetretener Fehler nicht einem bestimmten Formularelement zugeordnet werden kann.

Mit den globalen Systemmeldungen werden vor allem Rückmeldungen des Systems dargestellt. Sofern anwendungsseitige technische Fehler auftreten, wird eine entsprechende Fehlermeldung als „Globale Fehlermeldung“ angezeigt.

Fragemeldungen

Fragemeldungen werden in einem Modalen Dialog angezeigt, wenn die Nutzenden nochmals explizit auf eine Aktion und deren mögliche Konsequenzen hingewiesen werden muss und eine binäre Entscheidung treffen muss.

Diese Rückfragen sind eine Reaktion der Anwendung auf eine Aktion des Benutzers und sollen die Fehlausführung einer Aktion verhindern, wenn potenziell schwerwiegende Konsequenzen unbeabsichtigt auftreten können.

Die Rückfrage besteht aus:

  • Überschrift (optional)
  • Rückfragetext
  • Zwei Schaltflächen: z. B. „Nein“ als Sekundärfunktion und „Ja“ als Primärfunktion.

Sofern möglich werden sprachlich standardisierte Rückfragen verwendet; z. B. „Wollen Sie den kompletten Vorgang abbrechen? Alle bisherigen Eintragungen gehen verloren.“

Rückfragen müssen bestätigt oder abgelehnt werden, bevor eine weitere Benutzung der Anwendung erfolgen kann:

  • Nach dem Auslösen der Schaltfläche „Ja“ wird die im Rückfragetext benannte Aktion ausgeführt und die Nutzenden auf die gewünschte Maske weitergeleitet.
  • Nach dem Auslösen der Schaltfläche „Nein“ wird die im Rückfragetext benannte Aktion nicht ausgeführt und die Nutzenden auf die ursprüngliche Maske zurückgeleitet.

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 sowie im Code kommunizieren
  • Bei Fehlern 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 der Nutzenden wieder ausblenden