Contextual Help on Demand

The Contextual Help pattern describes methods to help users navigate the user interface and accomplish their tasks by providing examples, hints, and suggestions within the context of their application (without invoking a separate help interface). Unlike ordinary labels and prompt text, contextual help is extra guidance focused on helping the user understand what to do next. It is often dynamic and situational, responding to user input and disappearing when no longer needed.

There are five common forms of contextual help.

Empty Section Help. A display field, list, or table which normally has content can sometimes be empty. When this happens, the purpose of the display area may no longer be clear and users may become confused about what to do next. Brief explanatory text can help users to understand the purpose of the display, why it may be empty, and what to do next.
Instructional Text. Field labels, button names, and section titles should normally be sufficient to convey the intended purpose and organization of input controls. In some cases, though, an additional piece of fixed text, placed near a button or field, can resolve ambiguities. This technique should be used sparingly and only as a subtle enhancement, not as a shortcut to patch a non-intuitive interface.
Inline Page Message or Banner. When the next action a user must take is clear, it can sometimes be helpful to proactively draw the user's attention to the correct control and help them understand what to do next. Unlike a warning, confirmation, or error message, the inline message appears before the user takes an action and automatically fades or disappears as soon as the user touches the screen.
Popup Tooltip. Contextual help text can appear in a minimal popup whenever the user touches and holds over a control or display element or taps an info icon next to the element. Unlike contextual actions, help tooltips only provide a brief definition of the element or explanation of a current state.
Hint Text. Hint text is an optional feature provided by the Textbox component which disappears as soon as the user begins to type. When space is tight it can be used in place of a label to clarify the purpose of the text field or can provide a simple example of the text required.

Appearance

Appearance characteristics for this pattern.

Empty Section Help

Title: A simple title (e.g. "My Trips" or "Search Results") clarifies the purpose of a currently empty section. Grey text preferred.
Graphic: A simple graphic (e.g. a heart graphic for Favorites page) reinforces the purpose of the section and reassure users that the app is functioning and ready for use. Faded monotone graphic preferred.
Instructional text: (Optional) When there is an unambiguous action the user must take to get things going, brief instructional text can help the user understand what to do next. Grey text preferred.
Action: (Optional) If there is a single, simple action the user must always take to proceed you can save the user an extra step by placing a button to perform that action right in the empty section. Such a button would disappear after the action is complete.

Fixed Text

New User: If new users are not sure what a button will do, a discrete explanation can clarify the situation
Example: If users are unsure what to enter into a field, an example placed just below the field can help
Beneath: The explanation should appear near (usually beneath) the button or field in question so there is no question what it refers to.
Text Size: The text should be understated, big enough that new users will see it, but not distracting to more experienced users
Text Length: The text should be short. Think of it as a permanent tooltip.

Page Level Message/Banner

Sequence: Inline help messages appear before the user takes an action (e.g. on screen load) and either fade away automatically or disappear as soon as the user taps anywhere
Position: If the message applies to the entire interface, it should appear centered near the top of the screen
Controls: If the message applies to a particular control, it should appear over or near that control
Transparency: The banner may be partially translucent to clarify that is a temporary overlay, not an embedded part of the interface
Background Color: The background color of the banner should provide enough contrast so the message is easy to read even when message text is overlaid over text in the interface

Popup Tooltip

Position: Popup tooltips should appear near the control or element they refer to.
Information: If triggered by a separate info button (instead of touch-holding the element), the info button should be placed near or within the element. It should be clear to the user that the info button refers to the element, not to the interface in general.
Style: A variety of styles are possible, but it should be clear that the tooltip is floating above the interface, not embedded in it.
Actions: Unlike contextual actions, contextual help popups only contain text. They should not perform actions.
Drill: Some help popups can contain a button or link leading to more information
Concise: In general, the tooltip text should be brief. But in some cases more extensive help can be shown. In the second example at left, tapping a menu item navigates; touch and holding it provides a translucent help panel with ample room for explanation.

Hint Text

Optional: Hint text is an option provided by the textbox component which controls its style
Color: The text is shown in gray to signal that it is a hint, not an actual value
Concise: The phrase chosen should be short enough to easily fit in the available width of the field
Clear: The phrase should clearly convey what kind of input is required
Format: Hint text is especially useful to convey required formats that may not be obvious to some users (e.g. MM/DD/YYYY).

Behavior

Common behaviors for this pattern.

On Demand: In general, contextual help should only appear when needed then disappear when it is no longer needed.
Fade: If it appears without the user taking an action, it can fade away automatically after a few seconds.
User Dismiss: If the user caused it to appear, or if it might require some time to absorb, it should not disappear until the user dismisses it, usually by tapping anywhere on the screen.
Auto Dismiss: If the contextual help includes a button or control element, the user can dismiss it by tapping anywhere outside the boundaries of the help container.
Interval: Help triggered by touch and hold is hard for users to discover. The touch interval should be no more than 500 msecs.
Placeholder: Hint text behavior is controlled by the textbox component.

Usage

Usage guidelines for this pattern.

Contextual help should never be used as a band-aid to patch a non-intuitive interface. Before adding contextual help first consider if there is anything you can do to make the interface itself more intuitive so that no additional help is needed.
Contextual help should be contextual to specific situations or elements of an interface. Avoid using contextual help techniques to convey general help information.
Remember that touch and hold is difficult for users to discover. Don't rely on it.
User testing can often suggest opportunities for contextual help:
- If users are puzzled by an initially empty screen or unsure how to begin, consider empty section help
- If users are anxious or surprised by a button or field, and if there is no way to improve the existing button or field label, consider brief clarification or example text
- If users frequently run into trouble or need a reminder about something when they first load a screen, consider a preemptive inline message or banner
- If users have questions about any element on the screen, consider popup tooltips
- If users are unsure exactly what to enter into a field, consider help text

Empty Section Help

Use a simple title to explain the purpose of the empty page.
- Start the sentence with You or Your to let the user you are speaking directly.
- Use sentence casing for the sentence.
- Write the sentence as a statement of fact explaining why the UI is empty.
- End complete sentences with periods.
- Capitalize proper nouns only.
- Use the present tense instead of future tense, when possible.
Use a simple graphic to reinforce the purpose of the empty page.
Consider using a brief instructional text to explain the user what to do next.
- Use a complete sentence to encourage users to fix the empty UI. Do not guide the user through the complete process. Instead, just direct the user to the entrypoint for the UI feature in one to two sentences.
- Use sentence casing.
- In general, start the sentence with an imperative verb. It is also OK to provide brief background or conceptual information.
- Capitalize proper nouns only.
- Use the present tense instead of future tense, when possible.
If there is a single action the user has always take to proceed, place that action on the empty page.
Use grey text and faded monotone graphic to convey that this contextual help is part of the empty page. Avoid using too much active-looking help content that could confuse users and do more harm than good. Users should still have an overall understanding that the page is currently empty and waiting to be filled with actual content.