コマンド実行の基本

Windows アプリの "コマンド要素" は、ユーザーがメール送信、項目の削除、フォームの送信などのアクションを実行できる対話型の UI 要素です。 "コマンド インターフェイス" は、共通のコマンド要素、それをホストするコマンド サーフェス、サポートされている対話、提供されているエクスペリエンスで構成されます。

最善のコマンド エクスペリエンスを提供する

コマンド インターフェイスの最も重要な側面は、ユーザーが実行できるようにすることです。 アプリの機能を計画するときは、それらのタスクを実現するために必要な手順と、有効にするユーザー エクスペリエンスを検討します。 これらのエクスペリエンスの最初のドラフトが完成した後は、それらを実装するためのツールと相互作用を決定できます。

一般的なコマンド エクスペリエンスを次に示します。

  • 情報の送信または提出
  • 設定と選択肢の選択
  • コンテンツの検索とフィルター処理
  • ファイルを開く、保存する、削除する
  • コンテンツの編集または作成

クリエイティブにコマンド エクスペリエンスを設計してください。 アプリでサポートする入力デバイスと、各デバイスに対するアプリでの対応方法を選択します。 幅広い機能と設定をサポートすることにより、アプリの使いやすさ、移植性、アクセシビリティを最大限に引き出せます (詳しくは、Windows アプリ向けのコマンド デザインに関する記事をご覧ください)。

適切なコマンド要素を選択する

適切な要素をコマンド インターフェイスで使うことが、直感的で使いやすいアプリとなるか、使いにくくてややこしいアプリとなるかの分かれ目になります。 Windows アプリでは、包括的なコマンド要素のセットを使用できます。 最も一般的な UWP のコマンド要素を次に示します。

ボタンの画像

ボタン

ボタンは、即時アクションをトリガーします。 たとえば、メールの送信、フォーム データの送信、ダイアログでのアクションの確認などがあります。

リストの画像

リスト

リストは、対話型のリストまたはグリッド内に項目を表示します。 通常、多くのオプションや表示項目に使用されます。 例として、ドロップダウン リスト、リスト ボックス、リスト ビューとグリッド ビューなどがあります。

選択コントロールの画像

選択コントロール

アンケートの完了やアプリ設定の構成など、いくつかのオプションからユーザーが選択できます。 例として、CheckBoxRadioButtonトグル スイッチなどがあります。

カレンダーの画像

カレンダー、日付、および時刻の選択コントロール

カレンダー、日付、および時刻の選択コントロールは、イベントを作成するときや、アラームを設定するときなどに、ユーザーが日時情報を表示して変更できるようにします。 例として、カレンダーの日付の選択コントロール、カレンダー ビュー、日付の選択コントロール、時刻の選択コントロールなどがあります。

テキスト予測入力の画像

テキスト予測入力

データの入力時やクエリの実行時など、ユーザーの入力に関する提案を提供します。 例として、AutoSuggestBox などがあります。

完全な一覧については、「 Controls と UI 要素」を参照してください。

コマンドを右側の画面に配置する

アプリのキャンバスや、コマンド バー、コマンド バー ポップアップ、メニュー バー、ダイアログといった特殊なコマンド コンテナーなど、アプリ内の多くのサーフェスに、コマンド要素を配置できます。

常に、コンテンツに対して作用するコマンドを介してではなく、コンテンツを直接ユーザーが操作できるようにします。たとえば、リストのアイテムの並べ替えは、上下のコマンド ボタンではなく、ドラッグ アンド ドロップで行えるようにします。

ただし、特定の入力デバイスの場合、または特定のユーザー機能や設定に対応するときは、これが不可能なことがあります。 このような場合は、できるだけ多くのコマンド アフォーダンスを提供し、これらのコマンド要素をアプリのコマンド サーフェスに配置します。

最も一般的なコマンド サーフェスの一覧を次に示します。

アプリのキャンバスの画像

アプリのキャンバス (コンテンツ領域)

ユーザーがコア シナリオを完了するためにコマンドが常に必要な場合は、キャンバスに配置します。 影響を受けるオブジェクトの近く (または上) にコマンドを配置できるため、キャンバスにコマンドを配置すると、コマンドを簡単に使用できます。 ただし、キャンバスに配置するコマンドは慎重に選択してください。 アプリ キャンバス上のコマンドが多すぎると、貴重な画面領域を占有し、ユーザーを圧倒する可能性があります。 コマンドを頻繁に使用しない場合は、別のコマンド サーフェイスに配置することを検討してください。

コマンド バーの画像

コマンド バーとメニュー バー

コマンド バーを使うと、コマンドを整理しやすくなり、アクセスしやすくなります。 コマンド バーは画面の上部または画面の下部、あるいは画面の上部と下部の両方に配置できます (アプリの機能がコマンド バーに対して複雑すぎる場合はメニュー バーも使用できます)。

コンテキスト メニューの画像

メニューとショートカット メニュー

メニューとコンテキスト メニューは、コマンドを整理し、ユーザーが必要になるまで非表示にすることで、領域を節約します。 通常、ユーザーはボタンをクリックするか、コントロールを右クリックして、メニューまたはコンテキスト メニューにアクセスします。

CommandBarFlyout は、コマンド バーとコンテキスト メニューの利点を単一のコントロールに結合するコンテキスト メニューの一種です。 これにより、よく使うアクションへのショートカットが提供され、クリップボードやカスタム コマンドなど、特定のコンテキストにのみ関連するセカンダリ コマンドにアクセスできます。

UWP には、従来のメニューとコンテキスト メニューのセットも用意されています。詳細については、「メニューとショートカット メニュー」を参照してください。

コマンドのフィードバックを提供する

コマンドのフィードバックでは、操作やコマンドが検出されたこと、コマンドがどのように解釈および処理されたか、コマンドが成功したかどうかを、ユーザーに伝えます。 これは、自分が実行したこと、そして次に実行できることを、ユーザーが理解するのに役立ちます。 理想的には、フィードバックは UI に自然に統合する必要があるため、ユーザーを中断したり、絶対に必要でない限り追加のアクションを実行したりする必要はありません。

Note

必要なときにのみ、そして他の場所では得られない場合にだけ、フィードバックを提供します。 価値が加わる場合を除き、アプリケーションの UI は無駄がなく整然としたものに保ちます。

アプリでフィードバックを提供する方法を次に示します。

コマンド バー コンテンツ領域の画像

コマンド バー

CommandBar のコンテンツ領域は、ユーザーがフィードバックを確認したい場合にユーザーに状態を伝えるための直感的な場所です。

ポップアップの画像

ポップアップ

フライアウトは、その外側をタップまたはクリックして閉じることができる、軽量な状況依存のポップアップです。

ダイアログの画像

ダイアログ コントロール

ダイアログ コントロールは、状況依存のアプリ情報を表示するモーダル UI オーバーレイです。 ほとんどの場合、ダイアログは明示的に閉じるまでアプリ ウィンドウとの対話をブロックし、多くの場合、ユーザーに何らかのアクションを要求します。 ダイアログは中断する可能性があり、特定の状況でのみ使用する必要があります。 詳細については、「 操作を確認または元に戻す場合 」セクションを参照してください。

ヒント

アプリが確認ダイアログを使用する量に注意してください。ユーザーが間違いを犯した場合は非常に役立ちますが、ユーザーが意図的にアクションを実行しようとするたびに障害になります。

操作を確認または元に戻すタイミング

アプリケーションの UI がどれほど適切に設計されていたとしても、すべてのユーザーが望んだとおりにアクションを実行できることはありません。 アクションの確認を求めたり、最近のアクションを元に戻す方法を用意したりすることにより、アプリでこのような状況に対処できます。

元に戻すことができないため、大きな影響を与えるアクションの場合は、確認ダイアログを使用することをお勧めします。 このようなアクションの例を次に示します。

  • ファイルの上書き
  • 閉じる前にファイルを保存しない
  • ファイルまたはデータの完全な削除の確認
  • 購入を行う (ユーザーが確認の要求をオプトアウトしない場合)
  • フォームを送信する (何かにサインアップするなど)

元に戻すことができる操作の場合は、通常、簡単な元に戻すコマンドを指定するだけで十分です。 このようなアクションの例を次に示します。

  • ファイルを削除する
  • メールの削除 (永続的ではない)
  • コンテンツの変更またはテキストの編集
  • ファイル名を変更する

特定の入力の種類に合わせて最適化する

特定の入力の種類またはデバイスに関するユーザー エクスペリエンスの最適化の詳細については、 Interaction 入門 を参照してください。