Message Bar
The message bar is an area to present error, feedback,
progress, and alerts to the user. The key aspects of the message bar
are the message bar, message icon, message text, and divider line.
Required Properties
- Standard height: 24 pix
- Dividing line color: blue #225A8D
Success Messages
Inform users that an action has been successfully completed if they cannot immediately see the effect of the action, or if it is part of a critical business function.
-
Locate success messages on top of the page to ensure that the user can read the success message without scrolling.
- Include a confirmation icon.
-
If the function triggers a subsequent window (for example, a summary of the new transaction), position the success or information messages at the beginning of the new window.
Figure 1: Success message
Error Messages
Support users in recovering from errors by providing
instructions for correcting the error, the location of the error,
and useful input aids. For example, offer possible inputs such as
typical values, plausible spelling alternatives, last entries, or
data from previous screens.
-
Emphasize error fields by bolding the label and coloring both the label and the field borders in Red #D0001D
-
Allow the user to continue working in areas that are unaffected by the error.
Figure 2: Error message and marked field
Colors and Fonts
- Info and Error label: Bold black #000000
- Standard text: Black #000000
- Background: White #FFFFFF
- Info dividing line color: Dark blue #225A8D
- Error dividing line color: Red #D0001D
