Verwende AccentBoxen, um z. B. ...
- ergänzende, aber nicht kritische Hinweise anzuzeigen.
- kontextuelle Informationen oder Tipps zu geben.
- visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.
Hilf uns, Flow noch besser zu machen!
Fehlt dir eine bestimmte Component oder etwas anderes? Hast du Feedback? Dann teile es uns gerne auf GitHub mit.Feedback zu Flow gebenGrundlagen
Best practices
Achte bei der Verwendung einer AccentBox darauf, dass...
- sie sparsam eingesetzt wird, um gezielt Aufmerksamkeit zu lenken.
- keine kritischen Inhalte darin platziert werden. Wenn Informationen zwingend wahrgenommen werden müssen, verwende stattdessen einen Alert.
- ein ausreichender Kontrast zum Inhalt besteht – insbesondere, wenn Texte mithilfe der Color-Component eingefärbt werden.
Verwendung
Verwende eine AccentBox, um...
- besondere Inhalte visuell hervorzuheben.
- ergänzenden Inhalt darzustellen, der nicht zwingend wahrgenommen werden muss.
- Umfragen aufmerksamkeitsstark zu präsentieren.
- Werbemaßnahmen ansprechend zu platzieren.
- kontextbezogene Hinweise oder Tipps zu geben.
AccentBox vs. Alert
AccentBoxen und Alerts dienen beide dazu, dem User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft bei der Entscheidung: Kann die Information ignoriert werden, ohne negative Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen zu Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder wichtigen Systemmeldungen – sollte ein Alert mit entsprechendem Status verwendet werden.
Verwende Alerts, um z. B. ...
- den User auf sicherheits- oder funktionsrelevante Informationen hinzuweisen.
- vor möglichen Problemen oder Systemzuständen zu warnen.
- dringende oder aktionsrelevante Statusmeldungen zu kommunizieren.