59ad48476b
* chore: add boime lint * fix lint * use files ignore * revert change * ignore clarity.js * fix some errors * fix some errors * fix some errors * fix some errors * add yml file * Update clarity.js Signed-off-by: afc163 <afc163@gmail.com> * add npm run lint:biome * add npm run lint:biome * fix test case * fix ts errors * fix ts errors * fix lint and add .lintstagedrc * shorten prop name * chore: update package.json * update biome.json * chore: remove stylelint * chore: useOptionalChain * fix lint * biome format * prettier all code * prettier all code * fix site test --------- Signed-off-by: afc163 <afc163@gmail.com>
4.1 KiB
| group | type | order | title | skip |
|---|---|---|---|---|
| Design Patterns (Research) | Global Rules | 2 | Message and Feedback | true |
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:
When to Use
Success
Stay in Place
Modal Dialog
Notify users of important success results without interrupting their workflow.
Global Message
Display a brief success message without interrupting the user’s ongoing task.
Redirect
Inline Text & Illustration
- Notify users of success at the end of a long-form process;
- Provide detailed supplementary information (e.g., configuration details).
Global Message
Display a brief success message without interrupting the user’s ongoing task.
Failure
Stay in Place
Modal Dialog
Alert users to important actions outside the current workflow (e.g., safety warnings).
Alert
Inform users of critical errors that require immediate attention.
Form Validation
- User input does not meet field or form requirements;
- User skipped required fields;
- System detects errors in form data.
Notification
- Inform users of important issues or failure statuses that require immediate decisions;
- Feedback on backend process failures & alerts.
Redirect
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
Notification
- Inform users of important issues or failure statuses that require immediate decisions;
- Feedback on backend process results.
Notification Center
Notify users of related activity information (e.g., items that need user approval or the progress of user-submitted approvals).