Verwendung
Badges zeigen Benachrichtigungen, Zählerstände wie z. B. ungelesene Elemente, Ereignisse oder Statusinformationen zu Navigations- oder Inhaltselementen an. Sie werden immer innerhalb anderer Komponenten platziert und stehen nie ohne jeglichen Kontext für sich alleine.
Notification-Badge
Ein Notification-Badge wird genutzt, um auf wichtige neue Informationen hinzuweisen. Es zeigt die Anzahl neuer Elemente an, zum Beispiel: Hauptmenüpunkt „Postfachnachrichten (2)“.
Es kann an Menu-Items und Buttons benutzt werden, sollte jedoch nicht zweimal auf einer Seite für die gleiche Information benutzt werden, da Nutzende diese eventuell addieren und von mehr neuen Informationen ausgehen als sie tatsächlich haben. Beispiel: Hauptmenüpunkt „Postfachnachrichten (2)“ und Button in Dashboard-Kachel für Posteingang „Ungelesene Nachrichten (2)“.
Wenn Notification-Badges zusammen mit Status-Badges (Neu / Hellblau) für den gleichen Kontext eingesetzt werden, dann muss die Summe der Status-Badges (Hervorgehoben / Neu) mit der angezeigten Zahl in der Notification-Badge übereinstimmen.
Indikator-Badge
Ein Indikator-Badge wird genutzt um anzuzeigen, wie viele Elemente sich hinter einem Tab, einem Button oder einem Link verbergen. Es zeigt die Anzahl aller Elementen innerhalb dieses Bereichs an, bevor dieser geöffnet wurde, zum Beispiel: „Favorisierte Dienstleistungen (6)“, Tabs „Posteingang (15)“ oder „Papierkorb (9)“.
Indikator-Badges sollen nur dann eingesetzt werden, wenn die Information über die Anzahl der Elemente von Relevanz ist. Zum Beispiel: „Alle Dienstleistungen (82)“ hat keinen Mehrwert, weil ohnehin alle Dienstleistungen angezeigt werden. Hingegen gibt „Favorisierte Dienstleistungen (6)“ den Nutzenden die Information, dass dieser Bereich nicht mehr leer ist und bereits sechs Dienstleistungen favorisiert wurden.
Verwenden Sie eine maximale Zeichenanzahl, um sicherzustellen, dass die Beschriftungen nicht über den-Badge-Container hinausragen oder abgeschnitten werden. Da die wesentliche Information das Vorhandensein z. B. von ungelesenen Nachrichten ist und nicht deren exakte Anzahl bietet sich an, die Zahl auf zwei Stellen zu begrenzen und darüber hinaus gehende Werte mit + abzuschneiden (z. B. 99+).
Status-Badge (Hervorgehoben / Neu)
Ein Status-Badge wird genutzt, um neue Elemente innerhalb von Tabellen und Ergebnislisten zu kennzeichnen. Es muss zwingend zusammen mit weiteren Merkmalen genutzt werden, die die gleiche Information vermitteln (z. B. das Kennzeichnen neuer Elemente).
Beispiel: Neue Postfachnachricht — Status-Badge (Hervorgehoben / Neu) + Fetter Text
Beispiel: Neuer Eintrag in Verlaufstabelle eines Vorgangs — Status-Badge (Hervorgehoben / Neu) + Fetter Text
Status-Badge (Positiv / Warnung / Negativ / Neutral)
Ein Status-Badge wird genutzt, um den Status eines Sachverhaltes zu kennzeichnen. Es muss immer zusammen mit weiteren Merkmalen genutzt werden, die den gleichen Inhalt auch ohne Farbwahrnehmung kommunizieren. Idealerweise geschieht dies über eine zugeordnete Beschriftung.
- Beispiel: Fahrzeuge in Fahrzeugübersicht
- Status-Badge (Positiv) + Beschriftung „Angemeldet“
- Beispiel: Status auf Vorgangs-Detailseite
- Status-Badge (Warnung) + Beschriftung „Dokumente nachreichen“
- Beispiel: Einladung an neuen Benutzer gesendet
- Status-Badge (Warnung) + Beschriftung „Ausstehend“
- Beispiel: Benutzer gesperrt
- Status-Badge (Warnung) + Beschriftung „Eingeschränkter Zugriff“
