Alert box
The Design Need:
The user needs to be made aware of an error, or the effect that a certain action might have.
Design Solution:
Show a modal window that contains the alert you want to bring across to the user. If you design an alert box you should take care to do the following:
- Only use an alert box if there is no other option to get the message across. Consider options such as tooltips, undo functions and preventing errors in your task design
- Consider using a lightbox to show users that they cannot interact with the page below
- Use a button label that communicates the action that will be taken after clicking it. If the button only asks for confirmation that the message has been read, “ok” is sufficient. If you ask users whether they want to save something, use “save” and “don’t save”
- If your alert contains a question, allow the user to answer the question and formulate the question unambiguously
- Provide an easy way out. Allow users to close or cancel without any consequences and go back to where they were before the alert box popped up.
Communicate errors
- A good error message contains:
- An explicit indication that something went wrong
- A precise description of the problem that occurred
- Constructive advice on how to solve the problem
- Use polite phrasing when you write the error message
- Do not blame the user
When to use:
In all situations where the user needs to be made aware of a certain action or error, or a task-critical question needs to be asked.
Do not use alert boxes if it is possible to provide an undo function.
Why use this solution (rationale):
In general it is best to avoid alert boxes whenever you can. Users often have a habit of getting rid of pop-ups as soon as possible. When you design the necessary alerts you should keep this in mind.
More info elsewhere:
- “Never use a warning if you mean undo” on www.alistapart.com
- “Use verbs as labels on buttons” on www.usabilitypost.com
- Confirmation message on www.msdn.microsoft.com
- Warning message on www.msdn.com
