Darstellung und Verhalten

Meldungen können in Form von einem farbigen Balken dargestellt werden. Diese Balken werden sowohl als Overlay im Headerbereich, im Inhaltsbereich oder im aktuell sichtbaren Bereich der Nutzenden angezeigt.

Meldungen sind entweder ausschliesslich informativ oder sie enthalten Aktionen, die eine Handlung anbieten. Die Meldungen haben je nach Typ eine unterschiedliche Farbe und werden in den meisten Fällen mit Icons gestaltet (siehe Farben und Icons)

Verhalten

Die Meldung kann sich innerhalb eines Elements einblenden (im Inhalt) oder über den gesamten Inhalte legen (Overlay).

Eine Meldung kann automatisch nach vier Sekunden verschwinden, oder sie wird durch den Nutzer über das Schliessen-Kreuz aktiv ausgeblendet.

Eine Bannermeldung mit Aktionen schliesst sich automatisch, sobald der Nutzer eine neue Aktion ausführt (nächster Klick) oder eine der angebotenen Buttons betätigt.

Varianten

Headerbanner

Der Headerbanner wird über dem Header der Webseite eingeblendet.

Es gibt vier Typen von Bannern:

• Warnung:
  • Hintergrundfarbe: Rot
  • Ausrufezeichen-Icon
  • besteht aus: Titel, Text, Link und Schliessen-Icon.
• Medienkonferenz:
  • Hintergrundfarbe: Weiss
  • Mit Mikrofon-Icon oder Bild der sprechenden Person
  • besteht aus: Titel, Untertitel, Name der sprechenden Personen, Link zur Live-Übertragung und Schliessen-Icon
• Wahlen:
  • Hintergrundfarbe: Weiss
  • Mit grünem Haken-Icon
  • besteht aus: Titel, Text, Link und Schliessen-Icon
• Info:
  • Hintergrundfarbe: Weiss
  • Mit blauem Info-Icon
  • besteht aus: Titel, Text, Link und Schliessen-Icon
  • Bei Klick auf das Schliessen-Icon wird der Banner für die gesamte Browser-Session des Benutzers ausgeblendet

Feedback-Meldungen

Es gibt zwei Typen von Feedback-Meldungen:

• Meldungen, die im Inhalt angezeigt werden.
• Meldungen als Overlay.

Es gibt zwei Farbvarianten:

• Rot wird ausschliesslich für Fehlermeldungen genutzt.
• Grün wird ausschliesslich für Erfolgsmeldungen genutzt.

Für alle Feedback-Meldungen gilt zudem:

• Der Button ist optional.
• Bei Klick auf das Schliessen-Icon wird die Meldung ausgeblendet.

Benachrichtigungen

Es gibt zwei Farbvarianten:

• Rot wird ausschliesslich für Fehlermeldungen oder Ausfallmeldungen genutzt.
• Die Akzentfarbe der Seite kann für allgemeine Meldungen genutzt werden.

Für alle Feedback-Meldungen gilt zudem:

• Der Button ist optional.
• Bei Klick auf das Schliessen-Icon wird die Meldung für die gesamte Browser-Session ausgeblendet.

Verwendung

Headerbanner

Wir nutzen Headerbanner, um prominent auf eine ausgewählte Meldung hinzuweisen. Er wird oberhalb des Headers angezeigt. Dabei gelten folgende Regeln:

• Es darf immer nur ein Headerbanner sichtbar sein.
• Die jeweiligen Typen dürfen nur für den jeweiligen Zweck genutzt werden.
• Banner des Typs «Warnung» und «Wahlen» werden auf allen Seiten der Webseite angezeigt.
• Banner des Typs «Medienkonferenz» und «Info» werden nur auf den Seiten angezeigt, bei denen die enthaltene Meldung thematisch zugehörig ist. Die Info-Meldung «Geänderter Schulplan» soll beispielsweise nur auf Seiten zum Thema Schule angezeigt werden.

Feedback-Meldungen

Wir nutzen Feedback-Meldungen, um Nutzende über Erfolg oder Hindernisse beim Erreichen seiner Ziele zu informieren. Damit unterstützen Feedback-Meldungen die Nutzenden direkt in ihrer Handlung. Dabei gelten folgende Regeln:

• Wir stellen Meldungen immer in direkten Bezug zu den Aktionen der Nutzenden.
• Feedback auf Handlungen der Nutzenden soll möglichst zeitnah erfolgen.

Beispiele sind Feldvalidierungen oder Statusanzeigen.

Im Inhalt

Das Overlay nutzen wir für Feedback-Meldungen in Formularen oder Applikationen. Sie erscheinen nach einer aktiven Tätigkeit des Benutzers. Ein Beispiel ist das Absenden oder Speichern eines Formulars.

Die rote Meldung nutzen wir für Fehlermeldungen. Sie wird oberhalb des «Senden»-Buttons des Formulars angezeigt, wenn nach dem Absenden bei der Validierung des Formulars ein Fehler aufgetreten ist, z.B. weil ein Feld falsch ausgefüllt wurde.

Overlay

Kann ein Formular nicht korrekt versendet werden, weil bspw. der Server nicht erreichbar ist, so wird ebenfalls eine rote Fehlermeldung angezeigt. In diesem Fall wird sie aber am oberen Bildschirmrand über den Inhalt als Overlay angezeigt.

Wir nutzen einen Overlay bspw. auch wenn in einer Applikation Daten erfolgreich gespeichert wurden.

Mit dem optionalen Button können wir beispielsweise Funktionen wie «Rückgängig machen» oder «Erneut editieren» zugänglich machen.

Benachrichtigungen

Benachrichtigungen informieren über Veränderungen, die nicht in direktem Bezug zur Handlung der Nutzenden stehen.

In Applikationen nutzen wir die Benachrichtigungen im Inhalt, um Nutzende zu informieren. Beispiele: Eine Frist läuft ab, ein Service ist nicht verfügbar oder ein Wartungsfenster steht an. Je nach Art und Wichtigkeit können wir hier ebenfalls zwischen den Varianten «Achtung» (Rot) und der Variante Standard mit der Akzentfarbe der Seite wählen.