BLAF Guidelines - Inline Messaging, Tips, Hints, and Bubble Text
Inline Messaging, Tips, Hints, and Bubble Text
Last Updated 5-Dec-2003
General Description
Web applications feature several methods to provide help and communicate information to users. This specification describes methods for displaying brief Hints, tips, and Messages inline on the page, as well as rollover bubble-text ('Alt' text).
All the messaging methods in this specification address the need for display of brief in-context information. This information may be needed in context to explain application interface behavior, or to help the user decide on an action that best leads to meeting their goals in using the application.
Hints, Tips, Inline Information Messages, and Cautionary Warnings appear to the user on first page view. Bubble Text and the other Inline Messaging types (Warning, Error, Confirmation, and Processing) appear in response to user action. The choices made in which messages and message types to implement, and where and when to use them will have a significant impact on ease of use.
The following sections are intended to help make the best use of these messaging types in your application, and help develop strategies for dealing with the need for simultaneous display of these various messaging types.
Note: Users may be allowed to turn off Tips, Hints, Key Notation,
and Instruction Text in Preferences, accessed with the global Preferences button.
Refer to the Global Templates BLAF guideline, Preferences
Global Page section.
Hints for standard Web widgets (for fields, pulldowns, radio buttons, etc.) appear beneath the related element, and do not include a Tip icon. In general, Hints should not exceed a single line in U.S. English, to allow a maximum of one and a half lines in translation to other languages.
Hints Schematic
Tip text with Tip Icon is used inline in a page to call attention to useful domain or UI information that might not otherwise be obvious. This information may include reminders about organization policies, UI shortcuts or alternate ways to perform tasks, pointers to Preferences, or information on how the UI behaves, such as "Changes will be saved when you move to the next set of {objects}".
Tips appear in two forms:
Regular Tips: Consist of a Tip Icon and dark blue text. They may apply to a page, section of page, table, group or components, action/navigation button, or link. Regular Tips should not exceed one or two lines of text.
Content Container Tips: Consist of a Tip or Quick Tip content container icon and one or two paragraphs of text. They appear within a Content Container applying to a page or section of page.
Tips Schematic
See the Help Methods guideline for a comparison of Tips
and other Help methods.
Either an inline active icon, or inline status icon,
A standard Web widget, and
Inline message text.
These standard BLAF application message types make use of Inline Messaging:
Information - Provides contextual information about business practices and methods. Visble on initial page load.
Warning - Alerts the user to a condition or a situation that requires a decision before continuing. Appears in response to user action.
Cautionary Warning - Alerts the user to possible loss of information or real assets if some specified action is taken. Visble on initial page load.
Error - Alerts the user that one or more actions have failed due to data inaccuracies or system level problems. The application requires immediate attention and/or correction before continuing. Appears in response to user action.
Inline Messaging Schematic - Information Icon and Text (Visible on Initial Page Load)
The other two standard message types, Confirmation and Processing, are not directly
shown through Inline Messaging. Confirmation Messages are applied at the page
level and are not item specific. Processing generally is indicated only after
process commencement. Use a Hint to indicate that a user action will initiate
a process. Refer to the Messaging Templates
guideline for details.
Inline messaging may appear in:
The body contents of a page form layout.
A table. See the Tables guideline for extensive
examples and guidelines for inline messaging in a table.
See the Help Methods guideline for a comparison of
Tips and Information Messages.
Bubble text, otherwise known as ALT text or rollover text, is used on several UI elements within a page:
Action/Navigation Buttons
Global Buttons
Graphics and Icons in Content
Bubble text can provide a slightly longer description of a UI element than is possible in the element's label. This information can be very useful when labels are ambiguous. For instance, an action/navigation button may be labeled "Save Form," and the bubble text can read "Save 1999 Federal Tax Form."
Inline Messaging Schematic - Bubble Text
When a keyboard shortcut is assigned to a UI element, the Bubble text includes
the shortcut, such as "Next: Access key = X". The Keyboard
Shortcuts guideline specifies standard access keys.
Some limits should be placed on where, when, and how often Hints and Tips appear. Although hints can be automatically placed beneath common fields/web widgets, excessive use may be annoying to users who are either experienced in an application or familiar with the terminology common to a specific domain. However, new users may fail to complete a task if they are not provided with certain definitions.
While the user may turn off Hints and Tips in their application Preferences
(accessible through the Global Preferences button), it remains wise to apply
economy when populating a page. Refer to the Global Templates BLAF guideline,
Preferences Global Page
section for more on user messaging display options.
Hints & Tips UI Overload
Note that Bubble Text is not counted when calculating the population of Hints
and Tips. Bubble Text is applied to buttons, links, and icons, and only appears
if the user pauses the cursor over the active UI element. See Icon
Repository for BLAF for standard rollover text on common icons. See Language
in UI for details on the content and format of Hints for standard web widgets.
The first occurrence of a particular field type in a page section should receive a Hint.
Hints and Tips should be used to prevent user error, or to help a user recover from an error or warning situation. They are intended to increase ease of use, but should not take the place of design simplicity.
The total population of Hints and Tips per page should be counted and kept within limits.
Where possible, the total number of Hints and Tips per page should be five or less, seven on long pages, including both those automatically and manually placed.
Hints: General Total Per Page Recommendations:
On short pages, a maximum of three Hints
On medium pages, a maximum of five Hints
On long pages, a maximum of seven Hints
Tips: General Total Per Page Recommendations:
On short pages, a maximum of two tips
On medium pages, a maximum of three Tips
On long pages, a maximum of five Tips
If more information is required, use Instruction Text with an optional Information Icon to display additional content on a message page.
Hints for standard Web widgets (for fields, pulldowns, radio buttons, etc.) appear beneath the related element, and do not include a Tip icon. In general, Hints should not exceed a single line in U.S. English, to allow a maximum of one and a half lines in translation to other languages.
To keep Hint text succinct:
When giving directions, use imperative voice, such as "Enter your first name" instead of "You need to enter your first name"
When explanation requires too many words, use an example or a syntax instead, as in the Hint text for a Date field.
As long as it communicates well, Hint text does not need to form complete sentences.
To reduce individual team coding efforts, Hints for specific common fields used throughout applications should be automatically generated, based on the field type. If the field is not a common field type, it still may be appropriate to specify Hint text. In that case, the Hint must be manually coded per application context.
Valid common field types for automatically generated hints:
Date, Time, Telephone, Address, Name, ID#, User Name, Password, and Email
See Language in UI for details on the content
and format of Hints for standard web widgets.
Automatically Generated Hints on Common Fields
To prevent excessive amount of Hints per page, including both automated and manual, the following heuristics should be used to determine when to show the automated Hint for the valid field type.
Heuristics:
The first occurrence of a common field type in a page section should receive a Hint. Sections are defined by level-one page headers (Page Title) and level-two headers (subheaders).
The total number of Hints and Tips on the page should be less than the maximum number recommended.
When the total number of Hints and Tips exceeds the recommendation, it may be necessary to manually remove (turn off) some automatic Hints to increase page readability.
Hints in page sections defined by level-three headers (subsubheaders) should be placed manually.
Tip text is used inline in a page to call attention to useful domain or UI information that might not otherwise be obvious. This information may include reminders about organization policies, UI shortcuts or alternate ways to perform tasks, pointers to Preferences, or information on how the UI behaves, such as "Changes will be saved when you move to the next set of {objects}".
Tips appear in two forms:
Regular Tips: Apply to a page, section of page, table, group of components, button, or link, in one or two lines with a Tip icon.
Content Container Tips: May appear within a content container, applying to a page or section of page, with an optional Tip or Quick Tip icon. These may include an optional Tip or Quick Tip icon followed by one or two paragraphs of text.
See the Help Methods guideline for a comparison of
Tips and other Help methods.
Regular Tips consist of a Tip icon and dark blue text, and may be associated with a page, section of page, table, group or components, action/navigation button, or link. Regular Tips should not exceed one or two lines of text.
Content Containers can be used to provide longer Tips. Content Container Tips may be associated with a section of the page, the entire page, or even a part of an application. The following illustration shows an example.
Either an inline active icon, or inline status icon,
A standard Web widget, and
Inline Message text.
Out the common inline message types, these four make use of Inline Messaging:
Information - Provides contextual information about business practices and methods.
Warning - Alerts the user to a condition or a situation that requires a decision before continuing.
Cautionary Warning - Alerts the user to possible loss of information or real assets if some specified action is taken.
Error - Alerts the user that one or more actions have failed due to data inaccuracies or system level problems. The application requires immediate attention and/or correction before continuing.
Confirmation and Processing Messages are not directly shown through Inline
Messaging. Confirmation Messages apply to pages and are not item specific. Processing
generally is indicated only after process commencement. Use a Hint to indicate
that a user action will initiate a process. Refer to the Messaging
Templates guideline for details.
Inline Messaging can be in:
The contents of a page. See below for examples and guidelines for within
the contents of a page. Also see the Messaging
Templates guideline for implementation examples and guidelines.
A table. See the Tables guideline for extensive
examples and guidelines for inline messaging in a table.
See the Help Methods guideline for a comparison of
Tips and Information Messages.
The inline active icon navigates to a message page containing more information
regarding the message. The inline status icon is not clickable, and is
used when no further information is needed. See the Icons
guideline and Messaging Page Flows guideline
for details.
Note: Active icons are commonly used in Information Messages, but Error and Warning Messages usually have status icons.
Inline messaging is associated with a message box at the top of the page, which
indicates which fields or pulldown choice lists have an associated message (there
are few exceptions to this rule). See the Message
Box guideline for details. See Messaging
Templates for implementation details templates.
Inline Message with Inline Active Icon, Field, and Optional Messaging Text
Multiple inline messaging icons and multiple instances of inline message text can be associated with one field or pulldown. They should be stacked and left-aligned, directly below the widget. Below are the valid combinations of inline message text:
Error Messaging Text and Hint Text
Error Messaging Text, Information Messaging Text and Hint Text
Error Messaging Text and Information Messaging Text
Warning Messaging Text and Hint Text
Warning Messaging Text, Information Messaging Text and Hint Text
Warning Messaging Text and Information Messaging Text
Information Messaging Text and Hint Text
Multiple different Hint Texts
It is not recommended to use Error and Warning Message text together.
Bubble text, otherwise known as ALT text or rollover text, is used on several UI elements within a page:
Action/Navigation Buttons
Global Buttons
Graphics and Icons in Content
Note: Bubble text must be used on all graphical elements. (BLAF buttons are graphics)
Bubble text can provide a slightly longer description of a UI element than is possible in the element's label. This information can be very useful when labels are ambiguous. For instance, an action/navigation button may be labeled "Save Form," and the bubble text can read "Save 1999 Federal Tax Form."
When a keyboard shortcut is assigned to a UI element, the Bubble text includes
the shortcut, such as "Next: Alt + x". The Keyboard
Shortcuts guideline specifies standard accelerator keys.
It is possible to use some basic HTML formatting tags in Inline Messaging and Hints. These should be used sparingly and only when necessary, since inline messaging should be brief. These are the valid tags:
Bookmark
