Message Box

Last Updated 09.04.03

General Description

The message box component is used at the top of an application page to give the user important messaging information.

The following message types may be displayed in a message box:

Error
Warning
Information
Confirmation

NOTE: Processing Messages should not appear in an inline message box component. They should appear on a separate Processing Page in the application flow. See the Processing Templates guideline for details.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Craig Louis
UI Models - all models
Example Products - all products
Related Guidelines - Icons, Help Templates, Messaging Templates, Containers in Content, Action/Navigation Buttons, Buttons as Links, Inline Messaging and Tips, Processing Templates, Messaging Flows

Interaction and Usage Specifications

General Principles

There are 4 common message types:
- Error
- Warning
- Information
- Confirmation
The contents of a message box are:
- A header icon: Denotes the message type, header text and a header line - see Header component
- Summary Message: The summary message text should summarize the issue(s) within the page and suggest how the user should proceed. This summary text is optional, and should be used if more explanation is needed than just the list of individual items.
- List of Items: An item and/or or numbered list of items (the item refers to a label/prompt of a standard web widget, or column header name for a table cell on the page outside the Message Box) with text informing the user the specific issues and suggestions how to proceed.
  - An item or numbered list of items should be placed in the Message Box when there are inline messages within the page.
  - Each numbered or listed item links to a corresponding inline message item within the page. See Inline Messaging and Tips for more information about inline messaging.
  - The text of each linked item should be identical to the label/prompt text of the specific standard web widget within the page to which it links. If the item is in a table, the link should be the column header name. Placed following the link is a brief explanation of the specific issue, and suggestions of how the user should proceed. When the link is selected the page will scroll to the inline message anchor.
The message box should span the entire width of the content area of the page, and dynamically grow as the browser window is enlarged. For visual examples of message box layout, see the Visual Specifications section of this document, below.
For language tips for messaging see Language in UI Guidelines.
For guidance on how Message Boxes work within application flow, see Messaging Flows, and Messaging Templates for implementation examples.

Visual Specifications

Visual Principles

Header with Icon - see the Header Component guideline.
Message Icons - see the Icons in BLAF Applications guideline.
Message Text Definitions:
- Message Text
  - Font Face = Arial, Helvetica
  - Font Style = Regular
  - Font Size = 10pt CSS
  - Font Color = black; #000000
- Inline Message Item Label or Numbered List of Inline Message Items (This text refers to the label or prompt text of the specific field or pulldown list within the page.)
  - Font Face = Arial, Helvetica
  - Font Style = Bold
  - Font Size = 10pt CSS
  - Font Color = link brown; #663300

Measurement and Layout of Message Box

For exact spacing above and below the message box, see Content Layout: Spacing Above and Below Various Components.
Placement - See Component Order guideline. Also, see Messaging Templates for page examples.

Examples

Message Box for an Information Message

Message Box for an Warning Message

Message Box for an Confirmation Message

Message Box for an Error Message

Open/Closed Issues: Open Issues; none; Closed Issues; March-2002 Processing Messages are not described as residing in a Message Box component. They should appear on a separate Message Page in the application flow. See the Processing Templates guideline for details.