In-product help

Help prompts assist users to discover and learn about the functionality in your product. Three patterns are covered in this guide: the empty state message, feature discovery dialog, and help text.

General

When writing copy for your in-product help, try to pair information with an action. The tone is friendly but concise, making use of contractions and a natural flow in keeping with our writing style. If you’re using in-product help as an onboarding strategy, tie concepts together across multiple patterns.

Where relevant, include a ‘Learn more about x’ link which would open further in-product help or a documentation page in a new tab.

Empty state message

An empty state message is used in an area that usually holds content, but doesn’t have any content at the moment. For example, a new instance where content has yet to be created, or an area where users have deleted all content. When enough content exists, the empty state message disappears.

Empty state message
Title:
Phrased as an action.
Illustration:
To the left of the message. Stay consistent with the illustration style.
Message:
Pair information with an action. Be concise but don’t sound robotic. Follow our writing style guidelines.
Action:
Include at least one clear call to action as a button or as a link. Follow the button guidelines. Links to documentation open in new tabs.

Feature discovery dialog

A feature discovery dialog highlights a new or existing feature to the user. It usually offers a short introduction to the feature and invites users to make use of it.

Feature discovery dialog
Title:
Phrased as an action.
Message:
Should be focused on the value users get out of the feature. Tell users what they should be doing next.
Action:
Include at least one clear call to action as a button or as a link. Follow the button guidelines. Links to documentation open in new tabs.
Multi-step dialog:
Feature discovery dialogs can contain multiple steps. Include a button to move to the next step, a link button to cancel the tour, and a progress indicator in the bottom right corner.
Dialog trigger:
Dialogs can be triggered by any event that helps users in their understanding of the feature. Only show one dialog at a time.

Help text

Help text is used to help users understand the content of a potentially complex screen, for example, a configuration page. This can be dismissable if there is a way for the user to access it again later.

Help text
Rule:
When not using an illustration, you must add a horizontal or vertical rule to tie help text into the help system.
Message:
Explain what the screen is about and what users can accomplish on the screen. Keep it short, two sentences maximum.
Learn more link:
Include a ‘Learn more about x’ link where x is the topic the empty state is talking about. This should open a documentation page in a new tab.