Patterns– Help & feedback

Help & feedback

Help content provides answers to user’s questions and concerns.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Help content provides answers to common user questions about your app. Users can send comments, report bugs, and ask questions that are not already answered by the help content.

Placement Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Make it easy for users to find help content in your app.

Help content can be made accessible from various points in your app’s navigation, with options listed below. It is usually placed in the navigation drawer (or overflow menu) under the label “Help” or “Send feedback.”

Complex apps

If your app is complex, place “Help” both in the navigation drawer and the app bar.

Material Design Help in navigation drawer and app bar

To make it easy for users to get help, particularly if your app is complex, place “Help” in both the navigation drawer and app bar. Otherwise, place “Help” in the navigation drawer only, or the overflow menu.

Navigation Drawer

Place “Help” as the last item in the navigation drawer, with “Send feedback” directly above it.

If “Sign out” appears in the navigation drawer, it should be the last item in the list.

Material Design navigation drawer with Help and Feedback

The navigation drawer showing “Help” and “Send feedback”

Overflow menu

Place “Help” and “Feedback” (or “Send feedback”) in the overflow menu when there is no navigation drawer.

If “Sign out” appears in the overflow menu, it should be the last item in the list.

Material Design overflow menu: Help and Send feedback

Do.

Overflow menu showing “Help” and “Send feedback”

App bar

To make it easier for users to find help for urgent issues, such as payments and refunds, place a Help icon in the app bar.

Desktop applications may also place a Help icon in the app bar, as there is more space in the desktop UI.

Material Design help icon in app bar

Help icon promoted in the app bar

Help screen

A “Send feedback” button may be included in the help screen.

Content viewed less often (such as “About,” “Privacy,” and “Terms of service”) may be placed in an action overflow menu.

Material Design help screen with FAQs and feedback button

A help screen with frequently asked questions and answers and an action button to send feedback.

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Relevant help topics

Help content should be relevant to the user’s current location in an app. For example, if a user is viewing their account information, the help content displayed should include information about accounts.

Immediate access

Take the user directly to help content upon selecting “Help” in your app.

Material Design Help menu access after selection

Do.

Once a user selects “Help,” they should be taken directly to the “Help” menu.

Material Design: Skip choice screen after Help selection

Don’t.

After a user has selected “Help,” do not present a screen asking the user to choose between “Help” and other options.

Unsolicited help

Occasionally, help content appears when users interact with an app for the first time, even though the user has not requested help. By offering unsolicited help, users don’t have to search the “Help” menu for answers on how to use new features. This kind of help often appears:

  • To promote feature discovery, when a feature can’t easily be activated from a menu or button
  • When a new gesture is introduced that wasn’t in the app before

This type of help should be limited to new features and gesture education, as it could be interruptive and distracting.

Icons Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Help and Feedback icons are displayed at 24dp.

Tooltip icons are 18dp.

On light backgrounds, icons have an opacity of 54%. On dark backgrounds they have an opacity of 100%.

Light theme

Opacity

Active icon

54%

Inactive icon

38%

Dark theme

Opacity

Active icon

100%

Inactive icon

50%

Help

Standard Material Design Help icon

Do.

Use the standard Material Design icon for Help.

Use only Material Design icons without variations

Don’t.

Don’t use icon variations, such as those with speech bubbles or circle outlines.

Send feedback

Material Design icon for Send feedback

Do.

Use the standard Material Design icon for Send feedback.

Avoid using variations like chat or bug icons in Material Design

Don’t.

Don’t use icon variations, such as chat or bug icons.

Help Tooltips

Standard Material Design icon for Help Tooltips

Do.

Use the standard Material Design icon for Help Tooltips.

Material Design: Avoid icon variations and outlines

Don’t.

Don’t use icon variations, including the Help icon, or icons with speech bubbles or outlines.

Writing Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Help content lets users find answers to questions or problems that are unique to your app.

Consider these guidelines when writing help content:

Give key information

Keep explanations as short as possible. Avoid giving details that aren’t relevant to typical usage. Answer one question or concern at a time.

Make it easy to read

Make help content easy to read by formatting text with bold headings, lists, tables, and space between paragraphs as needed.

In particular, when referring to elements that users need to select, such as buttons or links, bold the label names when referring to them in help content.

Material Design headings help readers easily scan content

Headings clearly outline an article’s content. They help readers scan the page to quickly find the information they need.

Use simple language

Avoid using technical terms in help content where possible.

Show images

When providing step-by-step instructions, show relevant images or icons to explain what the user needs to do.