Alert Design system

Report what happened and what steps are needed.

6 checks · 2 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Write clearly the incident and how to handle itState the specific problem instead of just recording successes or errors.Users need to know whether to act immediately or just note.Example “Changes could not be saved. Check your network and try again.”Distinguish the meaning of the messageUse colored symbols or labels to identify information, warnings, and errors.Use words or symbols to recognize levels; Warnings and errors need to be different in meaning, not just one darker color.Place near related contentError input field set at field; Task-wide errors are located in easily identifiable areas.Form-wide errors should be placed in a prominent area and linked to the relevant field; Errors in the field still need to be read with the same field.

Interaction and usability

Try the operation, change the status and continue working.

Take action directlyIf a local fix is possible, place a specific button or link.Prioritize direct resolution steps such as retrying; If you cannot fix it, please indicate where to get support and what information to send.Close when information is not requiredDon't use closing the alert to ignore errors that still need to be fixed.Closing a notification does not resolve the issue; Valid errors should continue to be reflected in the relevant task.Notifications appropriate for accessibilityChoose to read updates according to urgency, avoid repeating the same content.Avoid rereading an error every render; Choose reading priority according to urgency so as not to block what users are listening to.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Write clearly the incident and how to handle it

Users need to know whether to act immediately or just note.

EXAMPLES

Usage examples

Write clearly the incident and how to handle it

“Changes could not be saved. Check your network and try again.”

Alert Design system

Structure and meaning

Interaction and usability

How to review

Write clearly the incident and how to handle it

Usage examples

Write clearly the incident and how to handle it

Find a checklist

No checklists found