説明 UI のデザインのガイドライン

Windows ストア アプリを使う方法をユーザーに説明するユーザー インターフェイス (UI) をデザインします。

推奨事項

  • アプリでできることを新しいユーザーに紹介するために説明 UI を使います。
  • 新機能に関するヒントや更新後のアプリの変更点に関する詳細に使います。
  • 説明 UI を特定のタスクと統合します。
  • アプリケーション UI の操作を妨げないようにします。

その他の使い方のガイダンス

状況によっては、ユーザーが Windows ストア アプリを操作できるようにする最適な方法は、アプリの UI から説明を行うことです。この種のガイダンスは、説明 UI という用語で表します。良い例の 1 つとして、タスクを完了するためにタッチ操作を使う必要があるときに、ユーザーへの指示のためにインライン テキストやポップアップなどの UI 要素を使うことが挙げられます。

説明 UI はよく練られた設計に代わるものではないことに注意してください。使用頻度が多すぎる場合、またはコンテキストから逸脱する場合には、アプリのフローが中断され、実効性が低下するおそれがあります。説明 UI を追加する前に、ユーザーをアプリに導く他の方法を検討してください。レイアウト、ナビゲーション、コントロールについて詳しくは、「関連トピック」をご覧ください。

ここでは、説明 UI がユーザーの習得に役立ついくつかの例を示します。

  • ユーザーがタッチ操作を見つけられるようにする。次のスクリーン ショットには、Cut the Rope というゲーム内でタッチ ジェスチャを使う方法をプレイヤーに教える説明 UI が示されています。

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

  • 第一印象を良くする。 新しいユーザーにアプリで可能な処理を紹介するために説明 UI を使うことを考慮してください。たとえば、ムービー モーメントの初回起動時には、説明 UI で、ユーザーはビデオを作成するように求められます。

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

  • 複雑なタスクの次の手順にユーザーを導く。Windows メール アプリの受信トレイの下のヒントは、以前のメッセージにアクセスできるように、[設定] にユーザーを導きます。

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

    ユーザーがメッセージをクリックすると、アプリの設定ポップアップが画面の右側に表示され、ユーザーがタスクを実行できるようになります。次のスクリーン ショットは、ユーザーが説明 UI のメッセージをクリックする前後のメール アプリを示しています。

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

     

  • UI の変更を示す。最新バージョンのアプリの UI に大幅な変更が加えられた場合、ユーザーはアプリの新しい機能や変更の詳細についてのヒントを希望することが考えられます。

説明 UI の設計原則

  • シンプルな状態を保つ。一度に 1 つの基本的な概念を紹介し、可能な限り図を使います。複雑な機能について説明する場合は、Windows ストア アプリの設定ポップアップにヘルプ セクションを追加することを検討してください。
  • コンテキストの中で説明する。説明 UI をタスクに統合します。そうすれば、ユーザーがタスクを完了しやすくなります。最も必要としているときに紹介された概念は、ユーザーの記憶に残りやすいものです。
  • 操作を妨げない。説明 UI が表示されている間も、アプリを操作し続けられるようにします。説明 UI は、ユーザーの邪魔になることなく、有用であることが必要です。
  • 説明が終わったら消える。説明が終わったらすぐに説明 UI が消えるようにするか、ユーザーが終了できるようにします。 また、ほとんどの場合、説明 UI は一度表示されれば十分です。繰り返し同じ説明 UI を表示することは避けてください。
  • 控え目に使う。設計とヘルプ セクションが練られていれば、新しいアプリを利用するために把握する必要があることを、ユーザーに十分に伝えることができます。アプリに説明 UI を追加する前に、さまざまな設計オプションを検討してください。

関連トピック

デザイナー向け
コントロール
アプリのヘルプのガイドライン
開発者向け (XAML)
UI の作成 (C#/C++/VB)
開発者向け (HTML)
UI の作成 (JavaScript)

 

 

表示:
© 2015 Microsoft