-
Notifications
You must be signed in to change notification settings - Fork 309
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Docs] Adding Error messages and minor changes in existing files
- Loading branch information
Showing
6 changed files
with
212 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
168 changes: 168 additions & 0 deletions
168
general/contentguidelines/01-productwriting/errormsg.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
--- | ||
title: Error messages | ||
sidebar_position: 4 | ||
tags: | ||
- Content style guide | ||
- UX Writing | ||
--- | ||
import {ValidExample, InvalidExample } from '@site/src/components'; | ||
|
||
Error messages describe issues that stop users from finishing a task, or the system from functioning properly. A good error message explains what happened, the reason why it happened, and what the user can do to move forward. They may even provide a way forward in the call to action. | ||
|
||
## Related components | ||
|
||
[HTML modal](https://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/moodle/components/dom-modal/) | ||
|
||
[Notification](https://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/moodle/components/notifications/) | ||
|
||
## Basic guidelines | ||
|
||
- Keep language clear and concise, and avoid jargon and technical terms. | ||
- Explain what happened and the reason it happened, but focus on how users can move forward. | ||
- Give users an error code only in cases where the error needs to be solved by a developer. | ||
|
||
## Content | ||
|
||
The structure and content of error messages will depend on the component you choose. | ||
|
||
### Title | ||
|
||
The title of your error message should be understandable on its own. | ||
|
||
Keep it short and concise. | ||
|
||
<ValidExample title="Do"> | ||
|
||
Your email is missing the '@' symbol. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
The email address doesn't match the required format. Please use a standard email format including the '@' symbol. | ||
|
||
</InvalidExample> | ||
|
||
Be specific. | ||
|
||
<ValidExample title="Do"> | ||
|
||
The file is too large. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
Coudn't upload file. | ||
|
||
</InvalidExample> | ||
|
||
<ValidExample title="Do"> | ||
|
||
Your storage is full. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
Something went wrong. | ||
|
||
</InvalidExample> | ||
|
||
Explain what happened clearly. | ||
|
||
<ValidExample title="Do"> | ||
|
||
Your file was not saved. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
There was a problem saving your file. | ||
|
||
</InvalidExample> | ||
|
||
Avoid jargon and technical terms. | ||
|
||
<ValidExample title="Do"> | ||
|
||
Unable to log in. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
Authentication error. | ||
|
||
</InvalidExample> | ||
|
||
### Description | ||
|
||
The description gives users additional information about the error and, when possible, lets them know what they can do to move forward. | ||
|
||
- Add details about the cause of the error if they can help users understand how they can avoid a similar problem in the future. | ||
|
||
- Provide a link to supporting content only when it truly helps solve the problem. | ||
|
||
- If you don't know the reason for an error, avoid making things up. Simply state that something went wrong. | ||
|
||
- If users can't solve the problem themselves, let them know what next step they should take, such as contacting their site admin. | ||
|
||
- If trying again later is a likely solution, let people know how much later: a few minutes, a few hours, etc. | ||
|
||
- When a solution can't be offered to the user, such as in cases where the error is caused by a third party, it's important to clearly explain what happened. This will help the user understand the issue and may enable them to troubleshoot the problem on their own. | ||
|
||
Use clear language, add details that can help users avoid the error in the future, and provide a solution: | ||
|
||
<ValidExample title="Do"> | ||
|
||
Grade can't be negative. Adjust it to be 0 or higher. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
Grade must be greater than or equal to zero. | ||
|
||
</InvalidExample> | ||
|
||
Don't blame the user for user-generated errors: | ||
|
||
<ValidExample title="Do"> | ||
|
||
Password can't be blank. | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
You didn't type a password. | ||
|
||
</InvalidExample> | ||
|
||
### Call to action | ||
|
||
Having a call to action depends on the component you choose. | ||
|
||
When possible, provide users with a contextually relevant action that can help them solve the problem, e.g. 'Go to settings' or 'Contact support'. | ||
|
||
If you use an HTML modal to display an error message, always provide an option to dismiss the modal. | ||
|
||
Use CTA to provide users with a posssible solution: | ||
|
||
<ValidExample title="Do"> | ||
|
||
**Your device is offline** | ||
Download failed because you're not connected to the internet. | ||
Ok | Go to settings | ||
|
||
</ValidExample> | ||
|
||
<InvalidExample title="Don't"> | ||
|
||
**Your device is offline** | ||
Download failed because you're not connected to the internet. | ||
Ok | Cancel | ||
|
||
</InvalidExample> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters