説明 UI のガイドラインInstructional UI guidelines

アプリでの特定のタッチ操作など、ユーザーにとって自明ではない機能について、ユーザーに伝えると有用な場合があります。In some circumstances 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. このような場合は、ユーザーが気付かない場合もある機能について、ユーザー インターフェイス (UI) を使ってユーザーに指示を表示する必要があります。In these cases, you need to present instructions to the user through the user interface (UI), so that they can use those features they might have missed.

説明 UI を使う状況When to use instructional UI

説明 UI は、慎重に使用します。Instructional UI has to be used carefully. 多用されると、煩わしく、無視されやすくなり、効果が低くなります。When overused, it can be easily ignored or annoy the user, causing it to be ineffective.

説明 UI は、タッチ ジェスチャや、ユーザーが関心を持つ設定など、重要だが自明でないアプリの機能をユーザーに示すために使用します。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.

アプリがタッチ ジェスチャに依存したものでない場合には、アプリの基本的な機能をユーザーに説明するために説明 UI を使用しないようにします。Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

説明 UI の作成の原則Principles of writing instructional UI

ユーザーにとって適切で、ユーザーのためになるように、説明 UI を使うと、ユーザー エクスペリエンスを向上できます。Good instructional UI is relevant and educational to the user, and enhances the user experience. 良い説明 UI の原則を示します。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.
  • すぐに関連します。 説明用の UI には、すぐにやりたいことについて、ユーザーは教えません、ことに注意を払うの理由ことがなくなります。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.

説明 UI は多用せずに、適切なものに限るようにします。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.
  • 明瞭な特徴: ユーザーは、命令せず独自の機能を理解できる、方法で説明用の UI は取得だけです。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.
  • 複雑な機能: UI の説明を簡潔でする必要があると、複雑な機能に興味のあるユーザーは、通常は積極的に命令を検討して、それらを指定する必要はありません。Complex features: Instructional UI needs to be concise, and users interested in complex features are usually willing to seek out instructions and don't need to be given them.

説明 UI がユーザーの妨げにならないようにします。Avoid inconveniencing the user with your instructional UI. 次のことを避けるようにします。Do not:

  • あいまいな重要な情報: 説明用の UI は、ことはありません、アプリの他の機能は邪魔する必要があります。Obscure important information: Instructional UI should never get in the way of other features of your app.
  • ユーザーは強制的に参加: ユーザーは、説明用の UI とも、アプリを使用して進行状況を無視できる必要があります。Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • 繰り返しの情報を表示するには。 最初の時間を無視する場合でも、説明用の UI を使用したユーザーを見かけたはありません。Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. 説明 UI の再表示を設定に追加するのは、優れたソリューションです。Adding an setting to display instructional UI again is a better solution.

説明 UI の例Examples of instructional UI

ここでは、説明 UI がユーザーの習得に役立ついくつかの例を示します。Here are a few instances in which instructional UI can help your users learn:

  • ユーザーがタッチ操作を検出可能になります。Helping users discover touch interactions. 次のスクリーン ショットには、Cut the Rope というゲーム内でタッチ ジェスチャを使う方法をプレイヤーに教える説明 UI が示されています。The following screen shot shows instructional UI teaching a player how to use touch gestures in the game, Cut the Rope.

    説明 UI のメッセージ ("縄を切るには、縄を横切るようにスライド") が表示されているゲームのスクリーン ショット

  • 良い第一印象を作成します。Making a great first impression. ムービー モーメントの初回起動時には、ユーザー エクスペリエンスが妨げられることなく、説明 UI で、ユーザーはビデオの作成を始めるように求められます。When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    ムービー モーメント アプリの起動面

  • 複雑なタスクで、次の手順を実行するユーザーを誘導します。Guiding users to take the next step in a complicated task. Windows メール アプリの受信トレイの下のヒントは、以前のメッセージにアクセスできるように、[設定] にユーザーを導きます。In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    説明 UI のメッセージが表示された Windows メール アプリのスクリーン ショット (一部)

    ユーザーがメッセージをクリックすると、アプリの設定ポップアップが画面の右側に表示され、ユーザーがタスクを実行できるようになります。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. 次のスクリーン ショットは、ユーザーが説明 UI のメッセージをクリックする前後のメール アプリを示しています。These screen shots show the Mail app before and after a user clicks the instructional UI message.

    変更前Before クリック後After
    Windows メール アプリのスクリーン ショット 設定ポップアップが表示された Windows メール アプリのスクリーン ショット