Table of contents
Collapse the table of content
Expand the table of content

Instructional UI guidelines

Last Updated: 9/19/2016

[ Updated for Universal Windows Platform (UWP) apps on Windows 10. For Windows 8.x articles, see the archive ]

Sometimes it can be helpful to teach the user about functions in your app that might not be obvious to them, such as specific touch interactions. In these cases, you need to present instructions to the user through the UI so they can discover and use features they might have missed.

When to use instructional UI

Instructional UI has to be used carefully. When overused it can be easily ignored by, or annoy, the user, making it ineffective.

Instructional UI should be used to help the user discover important and non-obvious features of your app, such as touch gestures or settings they may be interested in. It can also be used to inform users about new features or changes in your app that they might have otherwise overlooked.

Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

Principles of writing instructional UI

Good instructional UI is relevant and educational to the user, and enhances the user experience. It should be:

  • Simple: Users don't want their experience to be interrupted with complicated information.
  • Memorable: Users don't want to see the same instructions every time they attempt a task, so instructions need to be something they'll remember.
  • Immediately relevant: If the instructional UI doesn't teach a user about something that they immediately want to do, they won't have a reason to pay attention to it.

Avoid overusing instructional UI, and be sure to choose the right topics. Do not teach:

  • Fundamental features: If a user needs instructions to use your app, consider making the app design more intuitive.
  • Obvious features: If a user can figure out a feature on their own without instruction, then the instructional UI will just get in the way.
  • Complex features: Instructional UI needs to be concise. Users interested in complex features are usually willing to seek out instructions.

Avoid inconveniencing the user with your instructional UI. Do not:

  • Obscure important information: Instructional UI should never get in the way of other features of your app.
  • Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. Adding a setting to display instructional UI again is a better solution.

Examples of instructional UI

Here are a few examples of instructional UI that can help your users:

  • Help users discover touch interactions. The following screen shot shows instructional UI teaching a player how to use touch gestures in the game Cut the Rope.

    screen shot from game showing instructional ui message, "slide acress to cut the rope"

  • Make a great first impression. When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    launch screen for movie moments app

  • Guide users to take the next step in a complicated task. In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    cropped screen shot of windows mail app showing instructional ui message

    When the user clicks the message, the app's Settings flyout appears on the right side of the screen, allowing the user to complete the task. These screen shots show the Mail app before and after a user selects the instructional UI message.

    screen shot of windows mail appscreen shot of windows mail app with an extended settings flyout
© 2016 Microsoft