Help

Purpose

Users need to understand the processes, forms, and data they’re interacting with.

Description

Help can be provided in a lot of different ways. When and how you provide help depends on the amount of help needed, the type of process/interaction, and your target audience. Too much contextual help can actually make interfaces harder to understand, but insufficient help will frustrate new users.

Some of the ways help can be provided are:

• Dedicated help and FAQ page(s)
• Above and in forms (See Forms page for examples)
• Below form input fields (See Forms page for examples)
• Popovers when form input fields are focused (See Forms page for examples)
• Popovers with definitions/descriptions when hovering over a label/term/word
• “Learn more” links and “Information” icons

Dotted underlines

Use this for term definitions when a term may not be obvious to your target audience.

// HTML

Input field focus popover

Use this when the information is only relevant once the user has focused the field.

// HTML

“Learn more” links

Use “Learn more” links to provide additional help text only when the user needs it. The links can reveal additional text in the form of a popover, a dedicated help page, or by expanding the text.

// HTML

“Information” icons

Use “Information” icons to provide explanations and elaborations for titles and panels.

// HTML