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 zwischen der Heading und dem restlichen Content dieser Section eingefügt.
E-Mail-Adresse
...Speicherplatz
...Do
Bezieht sich der Alert auf den gesamten Inhalt, wird er prominent oberhalb der ersten Section innerhalb der LayoutCard platziert.