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.
Grundlagen
Ein Alert ist ein UI-Element zur Kommunikation wichtiger Informationen, die Aufmerksamkeit erfordern. Alerts sollten sparsam und gezielt eingesetzt werden, da sie visuell hervorgehoben sind und den Nutzerfluss unterbrechen können. Sie können informativ, warnend, kritisch oder bestätigend sein.
Best practices
Achte bei der Verwendung eines Alerts darauf, dass ...
- der Alert nur verwendet wird, wenn der Inhalt wirklich die Aufmerksamkeit des Users benötigt. Für rein informative Hinweise kann ein weniger auffälliges Element (z. B. ein Hinweistext) ausreichend sein.
- der Schweregrad sinnvoll gewählt ist –
dangerfür sofortigen Handlungsbedarf,warningfür Handlungsbedarf,infofür eine wichtige Information undsuccessfür einen Erfolg. - der Text klar, prägnant und lösungsorientiert formuliert ist. Vermeide technische Fachbegriffe oder Schuldzuweisungen. Beachte die Content Guidelines für Fehlermeldungen.
- er möglichst eine Handlungsmöglichkeit bietet.
Verwendung
Verwende einen Alert, um ...
- dem User mitzuteilen, dass ein Fehler aufgetreten ist – verursacht durch sein Handeln oder durch das System.
- vor einer möglichen Folge oder Auswirkung zu warnen.
- wichtige Statusänderungen oder Systemereignisse mitzuteilen.
- zusätzliche wichtige Informationen oder Hinweise in einem bestimmten Kontext bereitzustellen.
Alert vs AccentBox
Alerts und AccentBoxen 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 AccentBoxen, um z. B. ...
- ergänzende, aber nicht kritische Hinweise anzuzeigen.
- kontextuelle Informationen oder Tipps zu geben.
- visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.
Anwendung
Position
Ein Alert sollte immer in unmittelbarem Zusammenhang mit dem betroffenen Inhalt platziert werden. Er wird in der passenden Section untergebracht oder, wenn sein Hinweis für die gesamte Seite gilt, in der LayoutCard oberhalb aller Sections.
E-Mail-Adresse
...Speicherplatz
...Do
Bezieht sich der Alert auf eine bestimmte Section, wird er im Content der Section platziert.
E-Mail-Adresse
...Speicherplatz
...Do
Bezieht sich der Alert auf den gesamten Inhalt, wird er prominent oberhalb der ersten Section innerhalb der LayoutCard platziert.
Writing guidelines
Heading
Die Heading sollte das Problem oder Ereignis kurz und prägnant benennen.
Content
Als erstes sollte die Ursache vermittelt werden. Was ist passiert und was sind die Folgen. Im Anschluss sollte dem User vermittelt werdern was er tun kann um die Situation zu lösen. Wenn es dem User unterstützt kann optional zusätzlicher Kontext oder technische Hintergründe erklärt werden.
Weitere Formulierungshilfen sind in unseren Content Guidelines unter Fehlermeldungen.
Action (optional)
Optional kann ein Alert auch eine direkte Handlung ermöglichen, etwa über einen Button zur Problemlösung oder einen Link zu weiteren Informationen bzw. zur relevanten Stelle.