Alerts highlight important information the user needs to see, like errors. They provide medium-priority messaging throughout the product and remain on screen until dismissed, an action is selected, or the app deems it suitable to remove it, e.g. moving from one page to another.
You can also use alerts to communicate other types of messaging, like warnings, success messages, or informational messages. We use colors to communicate the difference:
Crafting error messages
The two key components of an error message:
-
Tell users what went wrong. Be specific, but only when it helps.
Vague messages such as "We encountered an unknown error" or "Something went wrong" can be frustrating for users. We should also avoid being too specific, because general users can feel alienated by users that mention "504 gateway timeout error".
If you don't know what went wrong, explain what you do know. You can usually say that what the user expected to happen, hasn't happened – for example, "We couldn't load your folders."
-
Tell them how to fix it (or what to do next). Let the user know what steps they can take to solve the problem – like trying again, or reloading the page.
Best practices
Avoid jargon
Use language that everyone from a 10-year-old to a grandmother will understand. Technical language may help explain an error to your fellow engineers, but it doesn't help our users.
Use humor and "cute" words sparingly
Messages that say "whoops!" are fine when a user does something wrong, but when it's a technical problem – like something not saving properly, for example – it looks like this frustrating issue isn't being taken seriously. Creating helpful error messages should be your priority. If you would like to add a bit of humor, make sure it improves the user experience.
Be positive
Words like "error" and "problem" can fill users with fear. Instead of writing "Bad request. Password is invalid", try something more positive, such as "That password wasn't right. Try again?" Never blame a user for an error.
Avoid exclamation marks
These can make messages seem alarming or frivolous.
Example errors
| Error message | Why it works |
|---|---|
| We couldn't connect to your account. Please try again later. | This message is shown when Canva fails to connect to Google Drive or Facebook as a publishing endpoint. It needs to be succinct and clear. |
| The expiry date entered is in the past. | This message is shown when someone enters a credit card expiry date that has already passed. It is short and sweet because the user needs only this much information to know what to do next. |
| Your password rest link expired. Please request a new one. | Again: tells the user what happened, then lets them know the next steps. |
| Font limit reached. | This one can afford to be a bit more playful—it's an edge case, and the user won't be losing any of their work. |