Grundlagen
Ein CounterBadge zeigt auf einen Blick, dass es etwas Neues oder Wichtiges gibt – zum Beispiel ungelesene Nachrichten, Hinweise oder Aufgaben. Er wird meist dezent an Tabs, Icons oder anderen UI-Elementen platziert und hilft dabei, die User gezielt durch die Oberfläche zu führen.
Best practices
Achte bei der Verwendung einer CounterBadge darauf, dass ...
- der Kontext klar ist. Ein CounterBadge sollte sich eindeutig auf ein Element beziehen (z. B. einen Button oder Tab).
- keine Überlagerungen stattfinden. Vermeide zu viele Badges auf engem Raum, um eine kognitive Überforderung zu verhindern.
- die Position konsistent bleibt. Die CounterBadge steht immer rechts oberhalb oder mittig an einem Element.
- ein CounterBadge per Default eine weiße Kontur besitzt, um auf farbigen Hintergründen ausreichend Kontrast und gute Lesbarkeit zu gewährleisten.
Verwendung
Verwende ein CounterBadge, um ...
- auf neue und ungelesene Nachrichten hinzuweisen.
- die Anzahl von Elementen anzuzeigen, zum Beispiel bei offenen Tickets.
- visuell auf Hinweise oder Warnungen innerhalb eines Navigationselements (z. B. Tabs oder Menüpunkte) aufmerksam zu machen.