Messages and alerts are used when the user should be notified of an event, such as when an action was successfully - or unsuccessfully - completed, or when an action they are about to submit may cause an error. Some messages should also offer the user more information about any application errors they encounter, and allow them to send it to support.
Tooltips and Contextual Information Icons
Tooltips are often activated when a user hovers over an item they would like more information or clarification about. Sometimes, this can be as simple as listing the associated name of a button or icon. Tooltips should be short and succinct.
Particularly for terms and fields that you suspect a user will need more information about - such as if it's a new requirement, or the terminology is not well known - a contextual information icon is useful. It is generally placed to the right of the term or field, and hovering or clicking on it should reveal a hover that provides additional information.
Activity and Processing Indicators
Activity indicators help alert the user that there are background activities or processes occurring in the application. If it is known that a process may take more than a second, it is useful to include an activity indicator so that the agent doesn't wonder if the application has frozen or "broken."
Progress Indicators
A progress indicator (or progress meter) provides feedback to the user that a potentially long-running operation is underway. The progress bar shows the percentage of completion and should be used when an operation takes more than two seconds to complete, and when a task is determinate - that is when it has a well defined duration or a predictable end.
Use a label to show the progress value, or to describe the process taking place, or to indicate that the operation has been interrupted. A label is optional, but recommend.
To describe the process taking place, use a gerund (an –ing verb), e.g. ‘connecting’, ‘downloading’, or ‘sending’.
To indicate that progress is paused or has encountered an exception, use past participles, e.g. ‘paused’, ‘download failed’, or ‘canceled’.
Application Notifications
This example shows an application error notification. The error notification explains to the user that an error has occurred, and the attached message is relevant, actionable, brief, clear, and courteous.
"Bar" Style Notifications
The notification bars are useful to quickly alert the user of an event or problem. It should be short, succinct, and specific. It should also be used when we don't want the user to be diverted away from the content they were using when the notification was displayed. The fields that cause the notification to occur are also bordered in the corresponding color to help quickly point out where the error is originating from.
Below are examples of the different types of bar style notifications.
Errors
This example shows an error notification. Often, errors relate to problems with data and data input, or faulty processing.
Alerts and Warnings
A warning is not necessarily an error, and should let the user know that an action may cause an error, or alert them to information they wouldn't know about their action otherwise.
Success Confirmations
Success notifications, or confirmations, are useful for letting the user know that their action, such as submitting a report, was completed successfully.
