2020-02-27 10:53:30 +08:00
---
2022-11-09 12:28:04 +08:00
group: Design Patterns (Research)
2020-02-27 10:53:30 +08:00
type: Global Rules
order: 2
title: Message and Feedback
skip: true
---
2024-06-19 12:01:24 +08:00
Used to provide feedback to the user on the results of their actions or to convey messages when necessary.
## Design Goals
Ensure that users receive feedback or messages that match the context and urgency of their actions under different scenarios, achieving reasonable and effective communication.
## Feedback Methods
When designing, consider the task the user is attempting to complete and the method of attention required. The feedback methods are listed below:
< div >
< img src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SKfjS7vyRP4AAAAAAAAAAABkARQnAQ" >
< / div >
## When to Use
< div >
< img src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vv37RaVAXhAAAAAAAAAAAABkARQnAQ" >
< / div >
### Success
#### Stay in Place
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qQ8NTKMH-2IAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Modal Dialog**
Notify users of important success results without interrupting their workflow.
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NPVGQr6f5-4AAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Global Message**
Display a brief success message without interrupting the user’ s ongoing task.
#### Redirect
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0EdyRa7WeUAAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Inline Text & Illustration**
- Notify users of success at the end of a long-form process;
- Provide detailed supplementary information (e.g., configuration details).
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*524fSKE97wYAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Global Message**
Display a brief success message without interrupting the user’ s ongoing task.
### Failure
#### Stay in Place
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*S03WS5uHqDsAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Modal Dialog**
Alert users to important actions outside the current workflow (e.g., safety warnings).
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4sHLQowCs6IAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Alert**
Inform users of critical errors that require immediate attention.
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qg51Sq2A_M4AAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Form Validation**
- User input does not meet field or form requirements;
- User skipped required fields;
- System detects errors in form data.
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QeWqTIWqrWEAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Notification**
- Inform users of important issues or failure statuses that require immediate decisions;
- Feedback on backend process failures & alerts.
#### Redirect
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*7ES2TrY6UJgAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Inline Text & Illustration**
- Notify users of failure at the end of a long-form process due to third-party causes (e.g., application engine creation failure);
- Provide detailed failure information.
### Background Operations
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*owL_SK1xmggAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Notification**
- Inform users of important issues or failure statuses that require immediate decisions;
- Feedback on backend process results.
####
< ImagePreview >
< img class = "preview-img no-padding" src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IGpqRbPGZxQAAAAAAAAAAABkARQnAQ" >
< / ImagePreview >
**Notification Center**
Notify users of related activity information (e.g., items that need user approval or the progress of user-submitted approvals).