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.
Accessibility
Da das CounterBadge selbst nicht accessible ist, muss der Wert über das
darunterliegende Element vermittelt werden. Wird das CounterBadge zum Beispiel
auf einem Button platziert, sollte der Button ein aria-label erhalten, das die
Zahl des Counters enthält.