Introduction
Alert dialogs present critical information that requires the user's acknowledgment or interaction. They overlay the interface, temporarily restricting any further interactions until the user takes appropriate action. The primary content behind the dialog is disabled (neutral.default at 50%) until the user actively engages with the dialog. The user can not close the dialog unless an action is taken.
Given that dialogs can disrupt the user's flow, it's essential to use them sparingly. Implement them only when it is imperative to have the user's undivided attention during the duration of the modal display.
- Use dialogs if you need the user to interact with the provided information, e.g. prompting the user to update their payment information or asking permission for enabling location access.
- Dialogs can also inform the user of critical informations related to their current task, e.g. informing them that an item added to their basket is out of stock
Usage
Use a dialog to display alerts, enforce immediate user interaction, and to seek confirmations.
Do not use dialogs for marketing or any other low priority information. Use modals instead.
Always communicate clearly what is expected from the user. Focus on the needed action and outcome of the task.
Avoid long, unclear texts and vague wording as to not confuse the user. Don't offer "yes" or "no" actions or aggressive language.
Use whenever the required action is crucial to the users task or interaction with the product. Optionally, use dialogs to convey success messages with further information prompts.
Don't display more than one dialog at a time. Don't stack dialogs on top of each other.
Place dialog in the center of the screen on any screensize bigger than mobile. Set the background to neutral.default at 50% transparency.
Don't position alert dialogs off-center or on any coloured overlays.
Mobile Specs
Also known as
Alert message, error message, alert notification, action dialog, action overlay, alert overlay
Related