Wir wollen Mobilität so einfach wie möglich machen.
Und dadurch Menschen begeistern.
Guidelines
Kurz, Knackig, Klar
Setze die Badge-Komponente ein, wenn
- Statusindikatoren angezeigt werden sollen, um Elemente als „neu“, „aktiv“ oder „offline“ zu markieren.
- Zähler erforderlich sind, um die Anzahl ungelesener Nachrichten, Benachrichtigungen oder Aufgaben anzuzeigen.
- wichtige Hinweise auf besondere Informationen oder Aktionen hinweisen, z. B. „verfügbar“ oder „ausverkauft“.
- kontextuelle Markierungen spezifische Elemente in Listen oder Menüs hervorheben sollen.
Guidelines to Go
- Label
- kurze und prägenante Begriffe (ein bis zwei Worte oder Zahlen)
- bei großen Zahlen (dreistellig): "99+", 0 wird nicht angezeig
- Positionierung
- absolut an den 4 Ecken oder 2 Seiten oder inline
- keine visuelle Kollisionen mit anderen Elementen
- Tag: Für Kategorien oder Attribute; meist interaktiv (Filter/Suche), längere Begriffe möglich
- Badge: Für statusbezogene Infos wie Zähler oder Hinweise (z. B. „neu“); nicht interaktiv, fokussiert auf Status/Besonderheiten
Label Text
Der Text im Badge sollte möglichst kurz und prägnant sein, da der Platz begrenzt ist. Ein bis zwei Worte oder Zahlen eignen sich am besten. Verwende konsistente Begriffe oder Bezeichnungen im Badge-Text, um Verwirrung zu vermeiden. Die gewählten Begriffe sollten den Kontext klar vermitteln.
Wenn der Badge Zahlen anzeigt, sollte das Format verständlich sein, z. B. „99+“ für größere Mengen, um Platz zu sparen. Vermeide bei Badges, die absolut zum Element positioniert, sind (längere) Textinhalte.Wenn die Anzahl gleich “0” ist, zeige keinen Badge an.
🟢 Halte das Label kurz und prägnant. Verwende Ziffern und Mengenangaben bei absolut positionierten Badges.🔴 Vermeide Textinhalte und lange Labels bei absolut positionierten Badges.
Positionierung
Der Badge kann entweder absolut an den 4 Ecken bzw. 2 Seiten (links + rechts) eines Elements platziert werden oder inline innerhalb eines Elements stehen. Bei der absoluten Positionierung behält der Badge bei einer horizontalen Verbreiterung die Position bei.
🟢 Den Text oder Icon Badge kannst du Inline oder an den Ecken (Corner) positionieren.🟢 Positioniere den Badge Dot nur an den Ecken (Corner).🔴 Positioniere den Badge Dot nicht Inline.
Nutze den großen Badge wenn genug Platz ist und platziere ihn am Ende einer Komponente, um visuelle Kollisionen zu vermeiden.
Achte darauf, dass du innerhalb eines Anwendungsbereiches nicht unterschiedliche Positionierungen verwendest. Der Badge soll nicht abgeschnitten werden oder mit einem anderen Element kollidieren. Beschränke in solchen Fällen die Länge der Inhalte oder wähle die kleinere Größe.
🟢 Nutze bei begrenztem Platz die Small Variante und halte die Länge des Labels kurz.🔴 Achte darauf, den Badge im Layout nicht abzuschneiden oder mit anderen Elementen zu überlagern.
Tag oder Badge?
Tag und Badge haben, obwohl sie optisch ähnlich erscheinen können, unterschiedliche Bedeutungen und Anwendungen.
Tags werden verwendet, um kategorische Informationen oder Attribute darzustellen, z. B. Labels für Themen, Kategorien oder Status. Sie sind oft interaktiv und ermöglichen Filter- oder Suchfunktionen. Sie vermitteln eine Zugehörigkeit oder Klassifikation. Tags sind meist textbasiert und können auch mehrere Begriffe umfassen.
Badges zeigen kompakte, statusbezogene Informationen an, wie Zähler oder spezielle Hinweise (z. B. „neu“, „kritisch“). Sie sind nicht interaktiv. Sie fokussieren sich auf Status oder Benachrichtigungen. Badges sind kurz und prägnant (ein Wort oder Zahl).
Accessibility
Screenreader Text
Achte darauf, dass auch bei Icon Badge der Screenreader-Text immer mit an die Entwicklung übergeben wird, auch wenn es keinen visuell sichtbaren Text gibt. Ohne diese Angaben kann der Tag nicht barrierefrei genutzt werden.
Gib immer einen Text an, auch wenn er nicht sichtbar ist.
Weiter