Properties
Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.
Variant
Die Variant-Property definiert die Darstellungsart der Notification. Es stehen drei Varianten zur Verfügung: Docked (Standard), bei der die Notification direkt am Rand des Inhalts angedockt ist, Standalone, die frei im Content-Bereich positioniert wird, und Overlay, die mit einem dezenten Schatten über den Content gelegt wird."
Semantic
Die Semantic-Property bestimmt die semantische Bedeutung und visuelle Darstellung der Notification. Die verfügbaren Werte sind: Adaptive (Standard), das sich flexibel an verschiedene Umgebungen anpasst, sowie Neutral, Critical, Informational, Successful und Warning, die jeweils spezifische Kontexte und Bedeutungen visuell unterstützen.
Closeable
Die Closeable-Property legt fest, ob die Notification geschlossen werden kann. Bei True wird eine Schließen-Option angezeigt, bei False bleibt die Notification dauerhaft sichtbar. Der Standardwert ist False.
Visual
Die Visual-Property gibt an, ob die Notification ein visuelles Element enthält. Die verfügbaren Optionen sind Icon (Standard) und Image. Diese Property ist optional.
Show Icon
Die Show-Icon-Property steuert, ob ein Icon angezeigt wird. Diese Property gilt nur, wenn Visual = Icon gesetzt ist. Der Standardwert ist True.
Link Variant
Die Link-Variant-Property legt das Erscheinungsbild des Links in der Notification fest. Bei Block wird der Link unterhalb des Texts angezeigt. Bei Inline wird er in der ersten Textzeile rechts ausgerichtet. Der Standardwert ist Block.
Show Headline
Die Show-Headline-Property gibt an, ob eine Überschrift oberhalb des Copy-Texts angezeigt wird. Der Standardwert ist True.
Show Timestamp
Die Show-Timestamp-Property legt fest, ob ein Zeitstempel angezeigt wird. Diese Property ist nur für Variant = Overlay verfügbar und schließt die gleichzeitige Nutzung mit Link = Inline aus. Der Standardwert ist False.
Examples
Docked
Standalone
Overlay
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
Padding-Full | db-spacing-fixed-md |
Padding-V | db-spacing-fixed-2xs |
Spacing 1 | db-spacing-fixed-md |
Spacing 2 | db-border-radius-2xs |
Image Border Radius | db-radius-xs |
Border Height | db-border-height-3xs |
Icon Size | db-base-icon-font-size-md |
Image Size | db-sizing-fixed-md |
Text Size 1 | db-type-body-font-size-md |
Text Size 2 | db-type-body-font-size-sm |
Kurz, Knackig, Klar
Setze die Notification-Komponente ein, wenn
- Benutzer kurz und prägnant über relevante Statusänderungen zu informieren.
- Hinweise zu geben, die keine sofortige Aktion erfordern.
- Bestätigungen oder Ergebnisse einer Aktion zu kommunizieren (z. B. "Änderungen gespeichert").
- Benutzerfreundliche Hinweise zu bieten, ohne den Arbeitsfluss zu stören.
Guidelines to Go
- Varianten je Kontext
- Overlay ➔ Benutzeraktionen
- Inline Standalone ➔ funktionsbezogene Hinweise
- Inline Docked ➔ allgemeine Hinweise für gesamte Anwendung oder Bereich
- Anzeigedauer
- Timed für kurzzeitige Anzeigedauer (5-10 Sekunden)
- Closeable für reduzierte Unterbrechungen des Nutzerflows
- Permanent für kritische Warnungen
- Verschiedene Befüllungen für unterschiedliche Anforderungen möglich (Headline, Link, Timestamp, Bild, Icon)
Kontext
Overlay
Benutzer werden zeitnah über wichtige Informationen, Systemstatus oder Benutzeraktionen informiert, ohne den aktuellen Arbeitsfluss zu unterbrechen.
Eine bewährte Position ist oben rechts in der Anwendung. Achte darauf, dass keine Navigationselemente (z.B. Header) oder Interaktionselemente (z.B. Button) verdeckt werden.
🟢 Platziere die Overlay Variante oben rechts in der Anwendung.🔴 Überlagere keine wichtigen Interaktions- oder Navigationselemente.
Oder platziere die Komponente zentriert im unteren Bereich. Notifications sind dort nur eine bestimmte Zeit sichtbar (Timed) und sollten inhaltlich sehr reduziert und prägnant gehalten werden, z. B. temporäre Statusmitteilungen oder Bestätigungen.
🟢 Platziere die Timed - Overlay Variante zentriert unten in der Anwendung.🔴 Platziere die Overlay Variante nicht unten links in der Anwendung.
Inline Standalone
Wird direkt im Kontext einer bestimmten Funktion (z.B. Login) oder eines Formulars angezeigt, um Benutzer gezielt auf relevante Informationen oder Fehler hinzuweisen, ohne den anderen Content zu überlagern.
Positioniere die Komponente innerhalb eines Containers bzw. einer Funktion (z.B. Login). Die Komponente sollte die spezifischen Eigenschaften des Containers aufweisen (z.B. Padding) und als ein Teil der Informationsarchitektur behandelt werden (z.B. Komponente unterhalb der Headline).
🟢 Platziere Inline Standalone innerhalb eines Containers mit dem entsprechenden Padding.🔴 Platziere Inline Standalone nicht ohne passendes Padding und nicht außerhalb eines Kontextes.
Inline Docked
Bezieht sich auf die gesamte Anwendung, um sicherzustellen, dass wichtige Informationen nicht übersehen werden.
Positioniere die Komponente im oberen Teil der Anwendung und verwende die gesamte Breite.
Anzeigedauer
Timed
Die Anzeigedauer sollte Nutzern genügend Zeit geben, die Nachricht zu lesen und darauf zu reagieren, ohne unnötig den Arbeitsfluss zu unterbrechen. Die Standard Anzeigedauer beträgt 5-10 Sekunden. Die Länge kann je nach Anforderung, Kontext, Endgerät, Dringlichkeit, Textlänge usw. variieren. Wir empfehlen dies mit Nutzern zu verproben.
Closeable
Die Meldung kann bei Bedarf manuell geschlossen werden. Ist besonders nützlich, um den Benutzerfluss nicht unnötig zu unterbrechen, während gleichzeitig wichtige Informationen übermittelt werden. Automatisches Ausblenden (Timed) ist in den meisten Anwendungsfällen sinnvoll.
Permanent
Wichtige Benachrichtigungen, wie Warnungen (Warning) und kritische Meldungen (Critical), sind entscheidend, um Benutzer über ernsthafte Probleme oder notwendige Aktionen zu informieren, die ihre sofortige Aufmerksamkeit erfordern. Diese Benachrichtigungen bleiben dauerhaft sichtbar, bis die notwendige Aktion durchgeführt worden oder das Problem behoben ist.
🟢 Wichtige und kritische Benachrichtigungen sollten permanent sichtbar sein, bis das Problem behoben ist.🔴 Gebe den Nutzer:innen nicht die Möglichkeit wichtige und kritische Benachrichtigungen zu schließen.
Befüllung
Headline
Durch die gezielte Nutzung von Headlines wird die Klarheit und Verständlichkeit von Notifications erhöht, indem sie den Benutzer auf wichtige und komplexe Informationen aufmerksam machen. Bei einfachen oder kurzlebigen Nachrichten können Headlines weggelassen werden, um die Benutzererfahrung nicht zu überladen.
Link
Biete einen Link innerhalb der Benachrichtigung an, der Nutzern zusätzliche Informationen, eine sofortige Handlungsmöglichkeit oder einen schnellen Ausweg ermöglicht („Mehr erfahren“, „Jetzt handeln“, „Erneut versuchen”).
🟢 Ergänze einen Link für weitere relevante Informationen.🟠 Vermeide es bei Fehlermeldungen den Nutzer:innen keine weiteren Informationen zur Behebung bereitzustellen.
Textlänge des Inline-Links: Stelle sicher, dass der Text des Inline-Links kurz und prägnant ist und nur in Kombination mit ebenfalls kurzen Texten links daneben steht. Ein zu langer Link-Text kann die Lesbarkeit beeinträchtigen und zu viel Platz einnehmen.
🟢 Halte beim Einsatz vom Inline-Link alle Texte kurz und prägnant.🔴 Vermeide zu lange Link-Texte, die den Platz für den restlichen Inhalt einschränken.
Zusätzlich zu Inline- und Block-Link können innerhalb der Notification Text-Links im Fließtext eingesetzt werden. (Im Design ist das per Änderung des Text Styles zu Underlined möglich).
Timestamp
Durch den Einsatz von Timestamps wird die Bedeutung und Relevanz der Nachricht verdeutlicht und der Benutzer erhält zusätzliche, zeitlich präzise Informationen.
Text & Image
Verleiht der Nachricht durch die Kombination von Text und Bildern oder Avataren eine verbesserte Erkennbarkeit, Personalisierung und visuelle Ansprechbarkeit, wodurch Informationen klarer und schneller vermittelt werden.
Dringlichkeit
Die semantischen Farben helfen dabei, die Dringlichkeit und den Kontext der Nachricht schnell und intuitiv zu erfassen: Hinweis (Grau), Information (Blau), Erfolgsmeldung (Grün), Warnung (Orange) und Fehlermeldung (Rot).
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter