Guidelines for designing instructional UI

Applies to Windows and Windows Phone

Design an instructional user interface (UI) that teaches users how to work with your Windows Store app.

Dos and don'ts

  • Use instructional UI to introduce a new user to what your app can do.
  • Use for tips on new features or specific details about how your app has changed after an update.
  • Integrate instructional UI with specific tasks.
  • Don't block interaction with the application UI.

Additional usage guidance

In some circumstances, the best way to help users interact with your Windows Store app is to teach them from within your app's UI. We use the term instructional UI to refer to this type of guidance. A great example is using a UI element, like inline text or a flyout, to tell a user when they need to use a touch interaction to complete a task.

Keep in mind that instructional UI is not a replacement for thoughtful design. If you use it too often or out of context, you can disrupt the flow of your app and diminish its effectiveness. Before adding instructional UI, explore other ways to introduce users to your app. See Related Topics for more info about layouts, navigation, and controls.

Here are a few instances in which instructional UI can help your users learn:

  • Helping 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"

  • Making a great first impression. Consider using instructional UI to introduce a new user to what your app can do. For example, when Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies.

    Launch screen for Movie Moments app

  • Guiding 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 clicks the instructional UI message.

    BeforeAfter
    Screen shot of Windows Mail appScreen shot of Windows Mail app with an extended Settings flyout

     

  • Introducing UI changes. If you made significant UI changes in the latest version of your app, users might like tips on new features or specific details about how your app has changed.

Principles of instructional UI design

  • Keep it simple. Introduce one basic concept at a time and use images when possible. Consider adding a Help section to a Settings flyout in your Windows Store app to address complex features.
  • Teach in context. Integrate instructional UI with the task it helps a user complete. A user is more likely to retain a concept when it's introduced when they need it most.
  • Don't block interaction. Make sure users can still interact with your app while instructional UI is present. Instructional UI should help users, not annoy them by getting in the way.
  • Teach, then disappear. Remove instructional UI as soon as it's no longer relevant or allow the user to dismiss it. Also, in most cases, users only need instructional UI displayed once. Avoid repeatedly displaying the same instructional UI.
  • Use sparingly. Thoughtful design and a Help section can often teach users everything they need to know to enjoy your app. Consider the breadth of design options before adding instructional UI to your app.

Related topics

For designers
Microsoft design principles
Layout
Controls
Guidelines for app help
For developers (HTML)
Creating a UI (Javascript)
For developers (XAML)
Creating a UI (C#/C++/VB)

 

 

Show:
© 2014 Microsoft