UWP アプリのコマンド設計の基本

ユニバーサル Windows プラットフォーム (UWP) アプリでは、コマンド要素は、ユーザーがメール送信、項目の削除、フォームの送信などのアクションを実行できる対話型の UI 要素です。 この記事では、ボタンやチェック ボックスなどのコマンド要素、それらの要素でサポートされる操作、それらの要素をホストするコマンド サーフェス (コマンド バーやショートカット メニューなど) について説明します。

重要な API: ICommand インターフェイスButton クラスCommandBar クラスMenuFlyout クラス

適切な種類の操作の提供

コマンド インターフェイスを設計する際、最も重要な決定はユーザーが何を実行できる必要があるかという点です。 たとえば、フォト アプリを作成している場合、ユーザーには写真を編集するツールが必要です。 ただし、写真を表示できるソーシャル メディア アプリを作成している場合は、イメージ編集の優先度は高く可能性があるので、スペース節約のために編集ツールを省略できます。 ユーザーが達成する目的を決定して、それに役立つツールを提供します。

アプリの適切なインターフェイスを計画する際の推奨事項については、「アプリの計画」をご覧ください。

操作に適切なコマンド要素を使用

適切な操作に適切な要素を使うことは、直感的に使うことができるアプリとなるか、使いにくくてややこしいアプリとなるかの分かれ目になります。 ユニバーサル Windows プラットフォーム (UWP) には、アプリで使うことができる多くのコマンド要素セットがコントロールの形で用意されています。 最も一般的ないくつかのコントロールの一覧と、それによって可能になる操作の概要を以下に示します。

カテゴリ 要素 操作
ボタン ボタン メール送信、ダイアログでのアクションの確認、フォーム データの送信など、即座にアクションをトリガーします。
日付/時刻選択ツール カレンダーの日付選択ツール、カレンダー ビュー、日付の選択、時刻の選択 クレジット カードの有効期限を入力したり、アラームを設定したりするときなどに、ユーザーが日時情報を表示して変更できるようにします。
リスト ドロップダウン リスト、リスト ボックス、リスト ビューとグリッド ビュー 対話型のリストまたはグリッド内に項目を表示します。 これらの要素を使うと、ユーザーは新着の一覧からムービーを選んだり、在庫を管理したりすることができます。
テキスト予測入力 自動提案ボックス 入力候補を表示して、ユーザーがデータを入力したりクエリを実行したりする時間を節約できるようにします。
選択コントロール チェック ボックスラジオ ボタントグル スイッチ アンケートに入力するときや、アプリ設定を構成するときなど、ユーザーがさまざまなオプションを選ぶことができるようにします。

全一覧については、「コントロールと UI 要素」をご覧ください。

適切なサーフェスへのコマンドの配置

アプリのキャンバス (アプリのコンテンツ領域) や、コマンド バー、メニュー、ダイアログ、ポップアップなどコマンド コンテナーとして機能する特殊なコマンド要素を含む、アプリの多くのサーフェスにコマンド要素を配置できます。 コマンドを配置する際の一般的な推奨事項は次のとおりです。

  • できる限り、コンテンツを操作するコマンドを用意せず、アプリのキャンバス上でユーザーがコンテンツを直接操作できるようにします。 たとえば、旅行アプリで旅行計画を編集するときに、リスト内のアクティビティを上下に移動するコマンド ボタンを使うのではなく、キャンバスのリスト上でアクティビティをドラッグ アンド ドロップできるようにします。
  • ユーザーが直接コンテンツを操作できない場合は、コマンドを次の UI サーフェスのいずれかに配置します。

    • コマンド バー: ほとんどのコマンドはコマンド バーに配置してください。コマンドを整理しやすくなり、アクセスしやすくなります。
    • アプリのキャンバス上: 目的が 1 つに限られているページまたはビューは、その目的用のコマンドをキャンバス上に直接配置できます。 しかし、このようなコマンドはなるべく作らないでください。
    • ショートカット メニュー: クリップボードの操作 (切り取り、コピー、貼り付けなど) や、選択できないコンテンツに実行するコマンド (地図の目的の位置にピンを追加するなど) に使うことができます。

Windows に用意されたコマンド サーフェスの一覧と、それらを使用する際の推奨事項を以下に示します。

サーフェス 説明
アプリのキャンバス (コンテンツ領域)

The content area of an app

あるコマンドが重要で、ユーザーが中心的なシナリオを完了するうえで常に必要な場合は、そのコマンドをキャンバス (アプリのコンテンツ領域) に配置できます。 コマンドは影響を与えるオブジェクトの近く (またはその上) に配置できるため、キャンバスにコマンドを配置すると使い方がわかりやすくなります。

ただし、キャンバスに配置するコマンドは慎重に選んでください。 アプリのキャンバスにコマンドが多すぎると、貴重な画面のスペースがなくなり、ユーザーを困惑させる可能性があります。 それほど頻繁に使わないコマンドの場合、メニューやコマンド バーの [その他] 領域など、別のコマンド サーフェスに配置することを検討してください。

コマンド バー

Example of a command bar with icons

コマンド バーを使うと、ユーザーはアクションに簡単にアクセスできます。 コマンド バーは、ユーザーのコンテキストに固有のコマンドまたはオプション (写真の選択や描画モードなど) を表示するためにも使うことができます。

コマンド バーは画面の上部または画面の下部、あるいは画面の上部と下部の両方に配置できます。 写真編集アプリのこの設計は、コンテンツ領域とコマンド バーを示しています。

A photo app

コマンド バーについて詳しくは、「コマンド バーのガイドライン」をご覧ください。

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

Example of a single-pane context menu

複数のコマンドをコマンド メニューにグループ化することで効率性が高まる場合があります。 メニューを使うと、より狭い場所により多くのオプションを表示できます。 メニューには対話的なコントロールを含めることができます。

ショートカット メニューは、よく使うアクションへのショートカットを提供し、特定のコンテキストにのみ関連するセカンダリ コマンドにアクセスできるようにします。

ショートカット メニューは、次の種類のコマンドとコマンド シナリオを対象としています。

  • 選んだテキストに対する状況依存の操作 (コピー、切り取り、貼り付け、スペル チェックなど)。
  • 操作する必要があるものの、選択することも、他の方法で指定することもできないオブジェクトのためのコマンド。
  • クリップボード コマンドの表示。
  • カスタム コマンド。

この例は、ショートカット メニューを使って経路の変更、経路のブックマーク登録、別の電車の選択を行う地下鉄アプリのデザインを示しています。

A context menu in an subway app

ショートカット メニューについて詳しくは、「ショートカット メニューのガイドライン」をご覧ください。

ダイアログ コントロール

Example of a simple two-button dialog

ダイアログは、状況依存のアプリ情報を表示するモーダル UI オーバーレイです。 ほとんどの場合、ダイアログは明示的に閉じられまでアプリ ウィンドウの操作を妨げます。また、多くの場合、ユーザーに操作を要求します。

ダイアログは、煩わしく感じることがあるため、特定の状況でのみ使用してください。 詳しくは、「アクションを確認または元に戻すタイミング」をご覧ください。

ポップアップ

Image of default flyout

ユーザーが現在操作している内容に関係する UI を表示する軽量な状況依存のポップアップです。 ポップアップは、次の目的で使います。

  • メニューを表示する。
  • 項目の詳細を表示する。
  • アプリの操作をブロックしないでユーザーにアクションの確認を求める。

ポップアップは、その外側をタップするかクリックすることで閉じることができます。 ポップアップ コントロールについて詳しくは、「ダイアログとポップアップ」をご覧ください。

アクションを確認または元に戻すタイミング

適切に設計されたユーザー インターフェイスであっても、ユーザーがどれほど慎重に作業したとしても、すべてのユーザーは必ず意図しないアクションを実行します。 ユーザーにアクションの確認を求めたり、最近のアクションを元に戻す方法を用意したりして、アプリでこのような状況に対処することができます。

  • 元に戻すことができず、実行結果が重大な操作の場合は、確認ダイアログ ボックスの使用をお勧めします。 このような操作の例は、次のとおりです。
    • ファイルを上書きする
    • ファイルを保存せずに終了する
    • ファイルやデータを完全に削除することを確認する
    • 購入する (確認メッセージを表示しないことをユーザーが選択した場合を除く)
    • 何かへのサインアップなどのフォームを送信する
  • 元に戻すことができる操作の場合は、通常、単純な "元に戻す" コマンドを提供すれば十分です。 このような操作の例は、次のとおりです。
    • ファイルを削除する
    • メールを削除する (完全には削除しない)
    • コンテンツを変更する、またはテキストを編集する
    • ファイル名を変更する
ヒント

アプリで使う確認ダイアログの量に注意してください。ユーザーが間違えたときはとても役に立ちますが、ユーザーが意図的にアクションを実行しようとしているときは邪魔になります。

特定の入力タイプの最適化

特定の入力の種類やデバイスを中心としたユーザー エクスペリエンスの最適化について詳しくは、「操作の基本情報」をご覧ください。