次の方法で共有


Windows 7 ダイアログ ボックス (デザインの基本)

Note

この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。

ダイアログ ボックスとは、ユーザーがコマンドを実行したり、ユーザーに質問したり、ユーザーに情報や進行状況のフィードバックを提供したりできる、セカンダリ ウィンドウのことです。

screen shot identifying dialog box elements

一般的なダイアログ ボックス。

ダイアログ ボックスは、タイトル バー (ダイアログ ボックスの元のコマンド、機能、プログラムを識別する)、オプションの主な指示 (ユーザーがダイアログ ボックスを操作する目的を説明する)、コンテンツ領域のさまざまなコントロール (オプションを表示する)、コミット ボタン (ユーザーがタスクにコミットする方法を示す) で構成されます。

ダイアログ ボックスは、基本的に次の 2 種類に分けられます。

  • モーダル ダイアログ ボックス: ユーザーがオーナー ウィンドウに進むには完了して閉じる必要があります。 これらのダイアログ ボックスは、続行する前に完了する必要がある重要なタスクや、あまり頻度の高くない 1 回限りのタスクに最適です。
  • モードレス ダイアログ ボックス: ユーザーが必要に応じてダイアログ ボックスとオーナー ウィンドウを切り替えることができます。 これらのダイアログ ボックスは、頻繁に繰り返し実行される継続的なタスクに最適です。

タスク ダイアログとは、タスク ダイアログ アプリケーション プログラミング インターフェイス (API) を使用して実装されるダイアログ ボックスのことです。 これらは次の部分で構成され、さまざまな組み合わせで組み立てることができます。

  • ダイアログ ボックスの元のアプリケーションやシステムの機能を識別するためのタイトル バー
  • ユーザーがダイアログを操作する目的を識別するための主な指示 (オプションのアイコン付き)。
  • 詳しい情報とコントロールが表示されるコンテンツ領域
  • コミット ボタン ([キャンセル] ボタン、オプションの [その他] オプション、[今後この <項目> を表示しない] コントロールなど) が表示されるコマンド領域
  • 主に使い慣れていないユーザーを対象とした、オプションの追加の説明とヘルプが表示される脚注領域

screen shot of a typical task dialog box

一般的なタスク ダイアログ。

タスク ダイアログは作成が簡単で、外観の一貫性を保つのに役立つため、適当と認められる場合は常に使用することをお勧めします。 タスク ダイアログを使用するには Windows Vista 以降である必要があるため、それ以前のバージョンの Microsoft Windows には適していません。

作業ウィンドウはダイアログ ボックスに似ていますが、別個のウィンドウではなく、ウィンドウ内に表示される点が異なります。 そのため、作業ウィンドウはダイアログ ボックスよりも直結しており、コンテキストに依存しているように感じられます。 技術的には同じではないものの、作業ウィンドウはダイアログ ボックスと非常に似ていることから、それぞれのガイドラインをこの記事で紹介しています

screen shot of a typical task pane

一般的な作業ウィンドウ。

プロパティ ウィンドウは、オブジェクト、オブジェクトのコレクション、プログラムのプロパティを表示および変更することに特化した種類のダイアログ ボックスです。 また、プロパティ ウィンドウは一般的に複数のタスクに対応する一方で、ダイアログ ボックスは一般的に 1 つのタスクまたはタスク内の 1 つのステップに対応します。 用途が特化しているため、プロパティ ウィンドウについては別のガイドラインで取り上げています

ダイアログ ボックスにはタブがある場合があり、その場合はタブ付きダイアログ ボックスと呼ばれます。 プロパティ ウィンドウは、タブが使用されているかではなく、プロパティがあるかどうかで判別されます。

注: レイアウトウィンドウ管理、一般的なダイアログ ボックス、プロパティ ウィンドウウィザード確認エラー メッセージ警告メッセージに関連するガイドラインについては、別の記事で取り上げます。

これが適切なユーザー インターフェイスであるかどうか

それを判断するには、以下の質問を考えます。

  • 目的は、ユーザーに情報を提供すること、ユーザーに質問すること、またはユーザーにコマンドやタスクを実行するオプションを選択してもらうことですか? そうでない場合は、別のユーザー インターフェイス (UI) を使用します。
  • 目的は、オブジェクト、オブジェクトのコレクション、またはプログラムのプロパティを表示および変更することですか? その場合は、代わりにプロパティ ウィンドウまたはツール バーを使用します。
  • 目的は、コマンドまたはツールのコレクションを提示することですか? その場合は、ツールバーまたはパレット ウィンドウを使用します。
  • 目的は、ユーザーがアクションを続行することを確認することですか? 続行しない明確な理由があり、場合によってはユーザーが続行しない可能性が十分に考えられますか? その場合は、確認を使用します。
  • 目的は、エラー メッセージや警告メッセージを表示することですか? その場合は、エラー メッセージまたは警告メッセージを使用します。
  • 目的は次のいずれかですか?
    • ファイルを開く
    • ファイルを保存する
    • フォルダーを開く
    • テキストを検索または置換する
    • ドキュメントを印刷する
    • 印刷ページの属性を選択する
    • フォントを選択する
    • 色を選択する
    • ファイル、フォルダー、コンピューター、またはプリンターを参照する
    • Microsoft Active Directory でユーザー、コンピューター、またはグループを検索する
    • ユーザー名とパスワードの入力を要求する

その場合は、代わりに該当するコモン ダイアログを使用します。 これらのコモン ダイアログの多くは拡張性があります。

  • 目的は、複数のウィンドウを必要とするマルチステップ タスクを実行することですか? その場合は、代わりにタスク フローまたはウィザードを使用します。
  • 目的は、現在のユーザー アクティビティに関連しない、即時のユーザー アクションを必要としない、ユーザーが自由に無視できる、システムまたはプログラムのイベントをユーザーに通知することですか? その場合は、代わりに通知を使用します。
  • 目的は、プログラムの状態を表示することですか? その場合は、代わりにステータス バーを使用します。
  • インプレース UI を使用するほうが望ましいでしょうか? ダイアログ ボックスは注目を要求するため、ユーザーのフローが中断されてしまうおそれがあります。 ユーザーが現在のコンテキスト外のアクションを実行する必要があるなど、ユーザーのフローを中断することが適切である場合もあります。 それ以外の場合は、インプレース UI (作業ウィンドウなど) を使用して直接、または段階的表示を使用して必要に応じて、UI をコンテキスト内に表示することをお勧めします。
  • 目的は、それほど重要でないユーザー入力に関する問題や、特別な条件を表示することですか? その場合は、代わりにバルーンを使用します。
  • タスク フローの場合、別のページを使用するほうが望ましいでしょうか? 一般的には、1 つのウィンドウ内でタスクがページからページにフローするよう設定するのがお勧めです。 インプレース コマンドを確認する、インプレース コマンドの入力を取得する、メインのタスク フロー外で独立して実行するのが最適なセカンダリのスタンドアロン タスクを実行するには、ダイアログ ボックスを使用します。
  • オプションを選択する場合ですが、ユーザーがオプションを変更する可能性はありますか? ない場合は、次のような代替手段を検討してください。
    • 確認なしで既定のオプションを使用する。ただし、ユーザーが後で変更することを許可します。
    • オプションありのバージョン (例: メニューの [印刷...]) とオプションなしのバージョン (例: ツールバーの [印刷]) を提供する。 一般的に、ツール バー コマンドは直ちに実行され、ダイアログ ボックスが表示されないようにする必要があります。
  • オプションを選択する場合ですが、オプションをより簡単かつ直接的に表示する方法はありますか? その場合は、次のような代替手段を検討してください。
    • 分割ボタンを使用してコマンドのバリエーションを選択する。
    • コマンド、チェック ボックス、ラジオ ボタン、簡易リストにサブメニューを使用する

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

これらの例では、簡単に選択できるように、ダイアログ ボックスの代わりにサブメニューが使用されています。

設計概念

ダイアログ ボックスは、適切に使用すると、プログラムの用途を広げ、柔軟性を高めることができます。 ただし、ダイアログ ボックスは適切に使用しないと、すぐにユーザーの邪魔となり、フローを遮断し、プログラムが直感的でなく、手間がかかると受け取られてしまいます。 モーダル ダイアログ ボックスはユーザーの注目を要求します。 ダイアログ ボックスは、代替 UI よりも簡単に実装できる場合が多く、そのため過剰に使用される傾向にあります。

ダイアログ ボックスは、そのデザイン特性が用途と一致するときに、最も高い効果を発揮します。 ダイアログ ボックスのデザインは、主に目的 (オプションを提供するのか、質問をするのか、情報またはフィードバックを提供するのか)、種類 (モーダルかモードレスか)、ユーザー操作 (必須か、任意応答か、受信確認か) によって決まりますが、その用途は主にコンテキスト (ユーザーが起動したか、プログラムが起動したか)、ユーザーがアクションを取る見込みがあるか、および表示頻度によって決まります。

高い効果を発揮するダイアログ ボックスをデザインするには、次の要素を効果的に使用します。

  • ダイアログ ボックスのテキスト
  • 主要な命令
  • [今後この <項目> を表示しない] オプション

1 つだけ行うとしたら...

ダイアログ ボックスのデザイン (目的、種類、ユーザー操作によって決まります) が、その用途 (コンテキスト、ユーザーがアクションを取る見込みがあるか、および表示頻度によって決まります) と一致していることを確認します。

使用パターン

ダイアログ ボックスには、いくつかの使用パターンがあります。

  • 質問ダイアログ (ボタンを使用) では、ユーザーに 1 つの質問をする、またはコマンドを確認するよう求め、水平方向に配置されたコマンド ボタンで単純な応答を使用します。
  • 質問ダイアログ (コマンド リンクを使用) では、ユーザーに 1 つの質問をする、または実行するタスクを選択するよう求め、垂直方向に配置されたコマンド リンクで詳細な応答を使用します。
  • 選択ダイアログでは、通常はより完全にコマンドを指定するために、ユーザーに一連の選択肢を表示します。 質問ダイアログとは異なり、選択ダイアログでは複数の質問を尋ねることができます。
  • 進行状況ダイアログでは、時間のかかる処理 (5 秒以上) が実行されている間に、処理をキャンセルまたは停止するオプションとともに、進行状況に関するフィードバックをユーザーに表示します。
  • 情報ダイアログには、ユーザーが要求した情報が表示されます。

ガイドライン

全般

  • スクロールが発生するダイアログ ボックスは使用しないでください。 通常の使用において、すべてを表示するのにスクロール バーを使用する必要があるダイアログ ボックスは使用しないでください。 代わりにダイアログ ボックスのデザインを変更してください。 段階的表示またはタブの使用を検討してください。

  • メニュー バーやステータス バーを使用しないでください。 代わりに、ダイアログ ボックスからコマンドやステータスに直接アクセスできるように設計するか、関連するコントロールでコンテキスト メニューを使用してください。

    • 例外: メイン ウィンドウ (ユーティリティなど) の実装にダイアログ ボックスを使用する場合は、メニュー バーを使用してもかまいません。

    誤った例:

    screen shot of a dialog box with a menu bar

    この例の [Find Certificates] (証明書の検索) は、メニュー バー付きのモードレス ダイアログ ボックスです。

  • ダイアログ ボックスにすぐに注目してもらう必要があり、かつプログラムがアクティブになっていない場合は、タスクバー ボタンを 3 回点滅させて注意を引くようにし、強調表示されたままにします。それ以外のことはしないでください。ウィンドウを復元またはアクティブ化したり、サウンド エフェクトを再生したりしないでください。 代わりに、ウィンドウの状態についてはユーザーの選択を尊重し、ウィンドウをアクティブにするタイミングはユーザーに任せます。

  • その他のガイドラインと例については、「タスク バー」を参照してください。

  • 続行する前に完了する必要がある重要なタスクや、あまり頻度が高くない 1 回限りのタスクに使用します。
  • 明示的にコミットされるまで変更が反映されないように、遅延コミット モデルを使用します。
  • 外観の一貫性を保つために、適当と認められる場合は常にタスク ダイアログを使用して実装します。 タスク ダイアログを使用するには Windows Vista 以降である必要があるため、それ以前のバージョンの Windows には適していません。

モードレス ダイアログ ボックス

  • 頻繁に繰り返し実行される継続的なタスクに使用します。
  • 変更が直ちに有効になるように、即時コミット モデルを使用します。
  • モードレス ダイアログの場合は、ウィンドウを閉じるためにダイアログで明示的な [閉じる] コマンド ボタンを使用します。 どちらの場合も、ウィンドウを閉じるためにタイトル バーの [閉じる] ボタンを使用します。
  • モードレス ダイアログ ボックスをドッキング可能にすることを検討してください。 ドッキング可能なモードレス ダイアログにより、配置の柔軟性が高まります。

screen shot of a dockable, modeless dialog box

Microsoft Office で使用されているモードレス ダイアログ ボックスの一部はドッキング可能です。

複数のダイアログ ボックス

  • 1 つのオーナー選択ダイアログから、一度に複数のオーナー付き選択ダイアログを表示しないでください。 複数表示すると、コミット ボタンの意味をユーザーが理解しにくくなります。 他の種類のダイアログ ボックス (質問ダイアログなど) は、必要に応じて表示してもかまいません。
  • 関連する一連のダイアログについては、可能であればマルチページ ダイアログを使用することを検討してください。 明確に関連していない場合は、個別のダイアログを使用します。

マルチページ ダイアログ ボックス

  • 次のような関連する一連のページがある場合は、個別のダイアログ ボックスの代わりにマルチページ ダイアログ ボックスを使用します。
    • 単一の入力ページ (省略可能)
    • 進行状況ページ
    • 単一の結果ページ

タスクは別の場所から起動された可能性があるため、入力ページは省略可能です。 これにより、結果として得られるエクスペリエンスは安定性が高く、シンプルで軽量な感じになります。

screen shot of a progress bar

screen shot of 'no problems found' message

この例の [Windows Network Diagnostics] (Windows ネットワーク診断) は、進行状況ページと結果ページで構成されています。

  • 入力ページが標準ダイアログの場合は、マルチページ ダイアログを使用しないでください。 この場合は、標準ダイアログを一貫して使用することがより重要になります。
  • [次へ] ボタンや [戻る] ボタンは使用せず、3 ページを超えないようにしてください。 マルチページ ダイアログ ボックスは、フィードバックがある単一ステップのタスク用です。 これらはウィザードではありません。ウィザードは複数ステップのタスクに使用されます。 ウィザードは、マルチページ ダイアログ ボックスと比較して直結しておらず、軽量ではありません。
  • 入力ページで、タスクを開始するのに具体的なコマンド ボタンまたはコマンド リンクを使用します。
  • 入力ページと進行状況ページには [キャンセル] ボタン、結果ページには [閉じる] ボタンを使用します。

開発者: マルチページ タスク ダイアログは、TDM_NAVIGATE_PAGE メッセージを使用して作成できます。

プレゼンテーション

ダイアログ ボックスの検索とアクセスを簡単にする、ダイアログをソースに明確に関連付ける、複数のモニターで適切に動作させるには、次のようにします。

  • 最初は、ダイアログをオーナー ウィンドウに重ねて "真ん中" に表示します。 後続の表示については、そのほうが便利であると思われる場合は、最後に表示された場所 (オーナー ウィンドウに対する相対位置) に表示することを検討してください。

diagram of dialog box centered on window behind it

最初はダイアログをオーナー ウィンドウに重ねて真ん中に配置します。

  • ダイアログがコンテキスト依存の場合は、起動元のオブジェクトの近くに表示します。 ただし、オブジェクトがダイアログで覆われないように (可能な場合は下方向と右方向にオフセットして) 配置します。

diagram of dialog box offset down and to the right

オブジェクトのプロパティがオブジェクトの近くに表示されます。

  • モードレス ダイアログの場合は、見つけやすいように最初はオーナー ウィンドウに重ねて表示します。 ユーザーがオーナー ウィンドウをアクティブにすると、モードレス ダイアログが隠されてしまうおそれがあります。
  • 必要に応じて、ダイアログ全体がターゲット モニター内に表示されるように最初の配置場所を調整します。 サイズ変更可能なウィンドウがターゲット モニターよりも大きい場合は、サイズを縮小して収まるようにします。
  • ダイアログを再表示する際には、最後にアクセスしたときと同じ状態で表示することを検討してください。 閉じる際に、使用したモニター、ウィンドウのサイズ、位置、状態 (最大化するか復元するか) を保存します。 再表示する際に、適切なモニターを使用して、保存したダイアログのサイズ、位置、状態を復元します。 また、これらの属性をユーザーごとにプログラム インスタンス間で保持することを検討してください。
  • サイズ変更可能なウィンドウについては、これを下回るとコンテンツが使用できなくなるサイズがある場合は、その最小のウィンドウ サイズに設定します。 より小さなサイズでコンテンツを使用できるように、表示方法を変更することを検討してください。

screen shot of centered media player buttons

この例では、ウィンドウが標準形式に対して小さくなりすぎると、Windows メディア プレーヤーの形式が変更されます。

  • Always on Top (常に手前に表示する) 属性は使用しないでください。
    • 例外: ダイアログ ボックスに必須のモーダル操作が実装されているが、オーナー ウィンドウにアクセスするには一時的にその操作を中断する必要がある場合にのみ使用します。 たとえば、ドキュメントのスペルチェック中に、ユーザーはたまにスペル チェック ダイアログ ボックスを離れ、ドキュメントにアクセスしてエラーを修正することがあります。

詳細と例については、「ウィンドウの管理」を参照してください。

タイトル バー

  • ダイアログ ボックスにはタイトル バー アイコンがありません。 タイトル バー アイコンは、プライマリ ウィンドウセカンダリ ウィンドウを視覚的に区別するために使用されます。
    • 例外: プライマリ ウィンドウ (ユーティリティなど) を実装するためにダイアログ ボックスが使用され、それゆえにタスク バーに表示される場合は、タイトル バー アイコンが表示されます。 この場合は、最初に識別情報を簡潔に配置して、タスク バーに表示するタイトルを最適化します。
  • ダイアログ ボックスには、常に [閉じる] ボタンがあります。 モードレス ダイアログには、[最小化] ボタンがあることもあります。 サイズを変更できるダイアログには、[最大化] ボタンがあることもあります。
  • [閉じる] ボタンを無効にしないでください。 [閉じる] ボタンがあると、ユーザーが不要なウィンドウを閉じて、制御下に置くことができます。
    • 例外: 進行状況ダイアログについては、有効な状態に到達したり、データの損失を防いだりするためにそのタスクが必須である場合は、[閉じる] ボタンを無効にできます。
  • タイトル バーの [閉じる] ボタンは、ダイアログ ボックス内の [キャンセル] ボタンまたは [閉じる] ボタン と同じ効果を持つ必要があります。 決して [OK] と同じ効果を与えてはいけません。
  • タイトル バーのキャプションとアイコンがウィンドウの上部付近で既に目立つように表示されている場合は、タイトル バーのキャプションとアイコンを非表示にして冗長性を回避できます。 ただし、Windows で使用するために、内部的に適切なタイトルを設定する必要があります。

相互作用

  • 表示されるときは、ユーザーが起動したダイアログ ボックスに常に入力フォーカスを合わせる必要があります。 プログラムで起動されるダイアログ ボックスについては、ユーザーが別のウィンドウと対話している可能性があるため、入力フォーカスを合わせないでください。 このような対話が誤ったダイアログ ボックスに指定されると、意図しない結果が生じる可能性があります。

  • ユーザーが最初に対話する可能性が最も高いコントロールに初期入力フォーカスを割り当てます。通常はこれが最初の対話型コントロールです (ただし常にそうであるとは限りません)。 最初の入力フォーカスをヘルプ リンクに割り当てないでください。

  • キーボード ナビゲーションの場合、タブ オーダーは論理的な順序で (通常は左から右、上から下に) フローする必要があります。 通常、タブ オーダーは読み取り順序に従いますが、次の例外を設けるようにしてください。

    • 最も一般的に使用されるコントロールをタブ オーダーで先に配置します。
    • ヘルプ リンクはダイアログ ボックスの最下部、タブ オーダーではコミット ボタンの後に配置します。

    順序を割り当てるときは、ユーザーは意図した目的のためにダイアログ ボックスを表示すると想定してください。たとえば、ユーザーが選択ダイアログを表示する目的は選択することであって、見直して [キャンセル] をクリックするためではありません。

  • Esc キーを押すと、常にアクティブなダイアログ ボックスが閉じます。 これは、[キャンセル] や [閉じる] があるダイアログ ボックスに当てはまります。また、結果を元に戻すことができないため、[キャンセル] が [閉じる] に変更されている場合でも同様です。

アクセス キー

  • 可能な場合は常に、すべての対話型コントロールやそのラベルに一意のアクセス キーを割り当てます。読み取り専用テキスト ボックスは対話型コントロールである (ユーザーがスクロールしてテキストをコピーできる) ため、アクセス キーの恩恵を受けることができます。 アクセス キーを次に割り当てないでください。

    • [OK] ボタン、[キャンセル] ボタン、[閉じる] ボタン。 これらのアクセス キーには Enter キーと Esc キーが使用されます。 ただし、[OK] または [キャンセル] を意味するものの、ラベルが異なるコントロールには、必ずアクセス キーを割り当ててください。

      screen shot of delete file dialog box

      この例では、肯定のコミット ボタンにアクセス キーが割り当てられています。

    • グループ ラベル。 通常、グループ内の個々のコントロールにはアクセス キーが割り当てられるため、グループ ラベルには必要ありません。 ただし、アクセス キーが不足している場合は、個々のコントロールにではなく、グループ ラベルにアクセス キーを割り当てます。

    • F1 でアクセスできる汎用のヘルプ ボタン

    • リンク ラベル。 多くの場合、一意のアクセス キーを割り当てるにはリンクが多すぎます。また、リンクを示すために使用されるアンダースコアによって、アクセス キーのアンダースコアが隠れてしまうことがよくあります。 代わりに Tab キーを使用してリンクにアクセスしてください。

    • タブ名。 タブは、Ctrl + Tab キーと Ctrl + Shift + Tab キーを使用して循環されます。

    • "..." というラベル付きの参照ボタン。 これらの [参照] ボタンには、アクセス キーを一意に割り当てることはできません。

    • ラベル付けされていないコントロール (スピン コントロール、グラフィック コマンド ボタン、ラベルのない段階的表示コントロールなど)。

    • ラベルなしの静的テキストや対話型でないコントロールのラベル (進行状況バーなど)。

  • 可能な場合な常に、標準のアクセス キー割り当てに従って、よく使用されるコマンドにアクセス キーを割り当てます。 一貫性のあるアクセス キーの割り当てが常に可能とは限りませんが、特に頻繁に使用されるダイアログ ボックスに関してはぜひ割り当てることをお勧めします。

  • 最初にコミット ボタンのアクセス キーを割り当てて、標準のキー割り当てになるようにします。 標準のキー割り当てがない場合は、最初の単語の最初の文字を使用します。 たとえば、[はい] と [いいえ] のコミット ボタンのアクセス キーは、ダイアログ ボックスの他のコントロールに関係なく、常に "Y" と "N" にする必要があります。

  • アクセス キーを見つけやすくするには、ラベルの前半に表示される文字にアクセス キーを割り当てます。キーワードがラベルの後半に表示される場合でも、最初の文字が理想的です。

  • 幅が広い文字を優先します (w、m、大文字など)。

  • 特有の子音または母音を使用します (終了 (Exit) の場合は "x" など)。

  • 次のような、下線が見えづらくなる文字は使用しないでください (最も問題のある文字から順に列挙します)。

    • 幅が 1 ピクセルのみの文字 (i、l など)。
    • ディセンダーのある文字 (g、j、p、q、y など)。
    • ディセンダーのある文字の横の文字。

その他のガイドラインと例については、「キーボード」を参照してください。

進行状況ダイアログ

実行時間の長いタスクの場合は、そのタスクの実行中にユーザーが別の作業を行うと想定してください。 無人で実行するようにタスクを設計します。

  • 完了まで 5 秒以上かかる操作の場合は、ユーザーに進行状況のフィードバックを伝えるダイアログ ボックスを、その操作をキャンセルまたは停止するコマンドとともに表示します。
    • 例外: ウィザードとタスク フローについては、タスクが同じページに留まり (別のページに進まない)、ユーザーが待っている間に他に何もできない場合にのみ、進行状況を伝えるのにモーダル ダイアログを使用します。 それ以外の場合は、進行状況ページまたはインプレース進行状況を使用します。
  • 操作が実行時間の長いタスク (30 秒以上) であり、バックグラウンドで実行できる場合は、ユーザーが待っている間にプログラムを引き続き使用できるように、モードレス進行状況ダイアログを使用します。
  • モードレス進行状況ダイアログには:
    • タイトル バーに [最小化] ボタンがあります。
    • タスクバーに表示されます。
  • オーナー ウィンドウが閉じられている場合でも引き続き実行されるように、モードレス進行状況ダイアログを実装します。

screen shot of copy dialog box with progress bar

この例では、オーナー ウィンドウが閉じられている場合でも、ファイルのコピーは続行されます。

  • 操作の完了に数秒以上かかる場合、または完了しない可能性がある場合は、操作を停止するコマンド ボタンを配置します。 キャンセルすることで環境が (副次的効果を残さずに) 以前の状態に戻る場合は、ボタンのラベルを [キャンセル] にします。それ以外の場合は、部分的に完了した操作がそのまま残ることを示すために、ボタンのラベルを [停止] にします。 ある時点で環境を以前の状態に戻すことができなくなる場合は、操作の途中でボタンのラベルを [キャンセル] から [停止] に変えることができます。

screen shot of dialog box with cancel button

この例では、問題の診断を停止しても副次的効果はありません。

  • 操作が完了するまでに数分以上かかり、ユーザーが作業を終わらせることができなくなる場合は、操作を一時停止するコマンド ボタンを配置します。 このようにしても、タスクを完了するかユーザーの作業を終わらせるかの選択をユーザーに強いることはありません。
  • タスクを開始する前に、できるだけ多くの情報を収集します。
  • 回復可能な問題が検出された場合は、ユーザーにタスクの最後に見つかったすべての問題に対処してもらいます。 それが現実的でない場合は、問題が発生するたびにユーザーに対処してもらうようにします。
  • 回復可能なエラーの結果としてタスクを破棄しないでください。

screen shot of dialog box with try again button

この例では、Windows エクスプローラーにより、回復可能なエラーが発生した後にユーザーがタスクを続行できます。

  • 進行状況バーを赤に変えて問題があることを示します。

screen shot of progress bar and try again button

この例では、ファイルのコピー中にリムーバブル ディスクが取り外されました。

  • 結果がユーザーにとって明白である場合は、正常に完了した時点で進行状況ダイアログを自動的に閉じます。 それ以外の場合は、問題を報告するためのみにフィードバックを使用します。
    • 簡単なフィードバックを表示するには、進行状況ダイアログにフィードバックを表示し、[キャンセル] ボタンを [閉じる] ボタンに変更します。
    • 詳細なフィードバックを表示するには、進行状況ダイアログ ボックスを閉じて、情報ダイアログを表示します。

完了のフィードバックに通知を使用しないでください。 進行状況ダイアログまたはアクションの成功通知のいずれかを使用し、両方は使用しないでください。

残り時間

  • 時間には次の形式を使用します。 以下の形式のうち、最大時間単位がゼロでない最初の形式から始め、最大時間単位がゼロになったら次の形式に変更します。

進行状況バー:

関連情報がコロン形式で表示される場合:

残り時間: h 時間 m 分

残り時間: m 分 s 秒

残り時間: s 秒

画面領域が限られている場合:

残り h 時間 m 分

残り m 分 s 秒

残り s 秒

それ以外:

残り h 時間 m 分

残り m 分 s 秒

残り s 秒

タイトル バー:

残り hh:mm

残り mm:ss

残り 0:ss

このコンパクトな形式では、タスク バーで切り捨てられないように、最も重要な情報が最初に表示されます。

  • 推定は正確に行う一方で、正しい精度で提示してください。 最大単位が時間の場合は、分 (重要な場合) を提示しますが、秒は提示しません。

誤った例:

hh 時間 mm 分 ss 秒

  • 推定を最新の状態に保ちます。 残り時間を見積もりを少なくとも 5 秒ごとに更新します。
  • 残り時間に焦点を当ててください。これがユーザーが最も重視する情報であるためです。 経過時間が役に立つシナリオの場合 (タスクが繰り返される可能性が高いなどの場合) にのみ、合計経過時間を提示します。 推定残り時間が進行状況バーに関連付けられている場合、その情報は進行状況バー自体によって伝達されるため、完了率のテキストは提示しないでください。
  • 正しい文法にします。 数値が 1 の場合は、単数形の単位を使用します。

誤った例:

1 分 1 秒

  • 文スタイルの大文字を使用します。

詳細と例については、「進行状況バー」を参照してください。

アイコンとグラフィックス

グラフィックス

  • 見た目をよくするために空間を埋める以外に目的がない場合は、サイズの大きなグラフィックスを使用しないでください。 代わりに外観をシンプルに保ちましょう。

誤った例:

screen shot of dialog box with a large graphic

この例では、サイズの大きなグラフィックは目的にかないません。

タイトル バー アイコン

  • ダイアログ ボックスにはタイトル バー アイコンがありません。
    • 例外: プライマリ ウィンドウ (ユーティリティなど) を実装するためにダイアログ ボックスが使用され、そのためにタスク バーに表示される場合は、タイトル バー アイコンが表示されます。

本文アイコン

  • デザイン パターンに基づいて本文アイコンを選択します。
パターン 本文アイコン
質問ダイアログ
プログラム、機能、オブジェクト、警告アイコン (データやシステム アクセスが失われる可能性がある場合)、セキュリティ警告、またはなし。
選択ダイアログ
なし。
進行状況ダイアログ
なし (ただし、アニメーションがある可能性あり)。
情報ダイアログ
なし。
  • 誤った例:

screen shot of dialog box with warning icon

この例では、データやシステム アクセスが失われる可能性のない質問に対して、警告アイコンが誤って使用されています。

  • ユーザーがプログラムの機能を視覚的に認識するのをサポートするためにアイコンを使用することを検討してください。 この手法は、アイコンが簡単に認識可能で、プログラム内のいくつかの場所で使用される場合に最も効果的です。

screen shot of favorites dialog box with star icon

この例では、黄色の星アイコンはお気に入りを表します。 このアイコンは簡単に認識可能で、お気に入りを表すために Windows 全体で一貫して使用されます。

  • ユーザーが対象のオブジェクトを認識するのをサポートするためにアイコンを使用します。

screen shot of dialog box with powerpoint icon

この例のオブジェクトのアイコンは、ユーザーが開いているまたは保存されているファイルの種類を認識するのに役立ちます。

  • アイコンは、機能を一目見てすぐにわかるものにするために使用することを検討してください。

images of arrows showing how to position monitor

この例では、これらのアイコンは、ユーザーが機能の効果を視覚化するのに役立ちます。

  • アプリケーションのブランド化のために [バージョン情報] ボックス ダイアログでアイコンを使用します。

screen shot of about dialog box with windows logo

この例では、アプリケーションを識別してブランド化するために、[バージョン情報] ボックスでビットマップを使用しています。

脚注アイコン

  • 脚注がある場合は、脚注の主題を要約するために脚注アイコンを使用することを検討してください。

screen shot of dialog box with footnote icon

この例では、脚注アイコンは、質問にセキュリティへの影響があることを示しています。

  • 本文アイコンを繰り返す脚注アイコンは使用しないでください。
  • エラーまたは情報の標準アイコンは使用しないでください。 エラーの状態は本文アイコンを介して伝達する必要があり、脚注は常に情報を伝えるためのものであるため、情報アイコンは冗長になります。 ただし、標準の警告アイコンと黄色のセキュリティ シールドを使用して、危険な結果をユーザーに警告することができます。

詳細と例については、「アイコン」を参照してください。

コミット ボタン

注:

  • これらのガイドラインは、コマンド リンクを使用する質問ダイアログには適用されません。そのパターンではボタンではなくコマンド リンクが使用されるためです。
  • [実行] と [実行しない] はそれぞれ主な指示に対する肯定の応答と否定の応答です。

全般

  • デザイン パターンに基づいてコミット ボタンを選びます。
Label
パターン
コミット ボタン
質問ダイアログ (ボタンを使用)
簡潔なコマンド セット ([はい]/[いいえ]、[はい]/[いいえ]/[キャンセル]、[実行]/[キャンセル]、[実行]/[実行しない]、[実行]/[実行しない]/[キャンセル]) のいずれか。
質問ダイアログ (リンクを使用)
キャンセルする。
選択ダイアログ
  • モーダル ダイアログ: [OK]/[キャンセル] または [実行しない]/[キャンセル]
  • モードレス ダイアログ: ダイアログ ボックスとタイトル バーの [閉じる] ボタン
  • 作業ウィンドウ: タイトル バーの [閉じる] ボタン
進行状況ダイアログ
(副次的効果を残さずに) 環境を以前の状態に戻す場合は [キャンセル] を使用します。それ以外の場合は、[停止] を使用します。
情報ダイアログ
惜しいです。
  • [適用] を除くすべてのコミット ボタンにより、ダイアログ ボックス ウィンドウが閉じられます。

  • コミット ボタンに確認を求めないでください。 不必要にそうすると、非常に煩わしくなるおそれがあります。 例外:

    • このアクションは破壊的である可能性があります。
    • このアクションは他のアクションと明らかに相容れません。
    • 間違っている場合、このアクションにより、ユーザーに代わってデータ、時間、労力の大幅なロスにつながるおそれがあります。

    その他のガイドラインと例については、「確認」を参照してください。

  • コミット ボタンを無効にしないでください。 例外:

  • ダイアログ ボックスの下部 (脚注領域の上) にある 1 行のコミット ボタンを右揃えにします。 コミット ボタン ([OK] など) が 1 つのみの場合でも、これを行います。

    誤った例:

    screen shot of message with centered ok button

    この例では、[OK] ボタンが間違って中央に配置されています。

  • コミット ボタンを次の順序で表示します。

    1. [OK]/[実行する]/[はい]
    2. [実行しない]/[いいえ]
    3. キャンセル​​
    4. [適用] (存在する場合)
    5. [ヘルプ] (存在する場合)
  • 関連するコミット ボタンが多数ある場合は、分割ボタンを使用して統合します

  • コミット ボタン (ウィンドウを閉じるボタン) やその他すべてのコマンド ボタン ([詳細] など) から明確に分離します

主な指示に応答する

  • [OK] や [はい]/[いいえ] などの汎用のラベルの代わりに、主な指示に対する具体的な応答である肯定のコミット ボタンを使用します。 ユーザーは、ボタン テキストのみを読んで、オプションを理解できる必要があります。 例外:

    • 設定がないダイアログ (情報ダイアログなど) には [閉じる] を使用します。 設定があるダイアログには [閉じる] を使用しないでください。

    • "具体的な" 応答 ([保存]、[選択] など) がまだ汎用的である場合は、[OK] を使用します。 具体的な設定または設定のコレクションを変更する場合は、[OK] を使用します。

    • 主な指示のない従来のダイアログ ボックスでは、[OK] などの汎用のラベルを使用できます。 多くの場合、このようなダイアログ ボックスは具体的なタスクを実行するように設計されていないため、具体的な応答はできません。

    • 一定のタスクでは、ユーザーが情報に基づいて意思決定を行うためには、慎重によく考えて読むことが求められます。 これは確認において一般的です。 このような場合は、汎用のコミット ボタン ラベルを意図的に使用して、ユーザーが早まった決定を下さないよう、主な指示を読むことを強制できます。

      正しい例:

      screen shot of message with yes and no buttons

      この例では、[はい] と [いいえ] のコミット ボタンを使用することで、少なくとも主な指示を読むようユーザーに強制しています。

  • または、肯定のコミット ボタン ラベルに "anyway (そのまま、かまわずに)" という言葉を追加することで、ダイアログ ボックスに続行しない理由が表示されており、続行する前にユーザーがダイアログを慎重に読む必要がある理由を示すことができます。

    正しい例:

    screen shot of message and uninstall anyway button

    この例では、コミット ボタンのラベルに "anyway (そのまま、かまわずに)" が追加されており、ユーザーが慎重に続行する必要があることが示されています。

  • 否定のコミット ボタンに、主な指示に対する具体的な応答の代わりに、[キャンセル] または [閉じる] を使用します。 多くのユーザーは、ダイアログ ボックスが表示されると、タスクを実行する必要がないことに気付きます。 [キャンセル] または [閉じる] が特定の応答に再びラベル付けされた場合、ユーザーはすべてのコミット ボタンを慎重に読んで、取り消すにはどうすればよいかを判断する必要があります。 [キャンセル] と [閉じる] のラベルを一貫して使用すると、簡単に見つけることができます。例外:

    • [はい]/[キャンセル] は使用しないでください。 常に [はい]/[いいえ] をペアとして使用します。
    • [キャンセル] ではあいまいな場合は、具体的な応答を使用します。
  • コンテンツ領域のテキストを使用して、汎用のラベルを特定の意味にマップしないでください。 代わりに、特定のコミット ボタン ラベルを使用するか、ラベルが長い場合はリンクを使用する質問ダイアログを使用します。

    誤った例:

    screen shot of message with unclear use of buttons

    この例では、[OK] が "続行" にマップされ、[キャンセル] が "ページに残る" にマップされています。

[はい] ボタンと [いいえ] ボタン

  • [はい] ボタンと [いいえ] ボタンよりも具体的な応答を優先して使用します。 [はい] と [いいえ] を使用することには問題はありませんが、具体的な応答のほうが理解が早くなるため、意思決定を効率的に下すのに役立ちます。 ただし、通常確認には [はい] ボタンと [いいえ] ボタンがあり、ユーザーが確認に応答する前に少し考える必要が出てきます。

  • [はい] ボタンと [いいえ] ボタンは、"はい" または "いいえ" で質問に回答する場合にのみ使用します。 主な指示は、"はい" または "いいえ" で回答すると自然になる質問として表現する必要があります。 "はい" または "いいえ" で回答する質問に、[OK] と [キャンセル] は使用しないでください。

    誤った例:

    Screenshot that shows a message with an 'OK' for a yes-no question.

    正しい例:

    screen shot of message with yes for same question

    よりわかりやすくするには:

    screen shot of message with run for same question

    これらの例では、[はい] と [いいえ] は、"はい" と "いいえ" の質問に対する適切な回答ですが、具体的な回答にするともっとわかりやすくなります。

  • コミット ボタンの文言を具体的にすると長すぎる場合やおかしく見える場合は、主な指示を "はい" または "いいえ" で回答する質問に変えることを検討してください。 または、主な指示に対する応答が長い (5 単語以上) 場合は、コマンド リンクを使用できます。

    誤った例:

    screen shot of message with wordy button labels

    正しい例:

    screen shot of message with yes/no button labels

    正しくない例の具体的な文言は長すぎるため、正しい例では [はい] と [いいえ] が使用されています。

  • [いいえ] の応答の意味がわかりにくい場合は、[はい] ボタンと [いいえ] ボタンを使用しないでください。 その場合は、代わりに具体的な応答を使用します。

[OK] ボタン

  • モーダル ダイアログで [OK] をクリックすることは、値を適用し、タスクを実行して、ウィンドウを閉じることを意味します。

  • 質問に回答するのに [OK] ボタンを使用しないでください。

  • Enter が [OK] ボタンの既定のアクセス キーであるため、[OK] にはアクセス キーを割り当てないでください。 そうすることで、他のアクセス キーを割り当てやすくなります。

  • [OK] ボタンに正しくラベルを付けます。 [OK] ボタンには、"OK" というラベルを付けてください。"Ok" や "Okay" にはしないでください。

  • エラーや警告には [OK] ボタンを使用しないでください。 問題は決して OK ではありません。 代わりに [閉じる] を使用します。

    誤った例:

    screen shot of message with ok button

    この例では、[OK] の代わりに [閉じる] を使用する必要があります。

  • モードレス ダイアログ ボックスでは [OK] ボタンを使用しないでください。 モードレス ダイアログでは、代わりにタスク固有のコミット ボタン ([検索] など) を使用する必要があります。 ただし、一部のモードレス ダイアログ ボックスでは、[閉じる] ボタンのみが必要です。

[キャンセル] ボタン

  • [キャンセル] をクリックすることは、すべての変更を破棄し、タスクを取り消して、ウィンドウを閉じ、副次的効果を残さずに環境を以前の状態に戻すことを意味します。 入れ子になった選択ダイアログ ボックスの場合、オーナーの選択ダイアログで [キャンセル] をクリックすると、オーナー付きの選択ダイアログによって行われた変更も破棄されます。

  • ユーザーが変更を明示的に破棄できるように、[キャンセル] ボタンを指定します。 ダイアログ ボックスには明確な終了ポイントが必要です。 ユーザーがタイトル バーの [閉じる] ボタンを見つけることを当てにしないでください。

    • 例外: 設定のないダイアログ ボックスに [キャンセル] ボタンを指定しないでください。 [OK] ボタンと [閉じる] ボタンは、この場合の [キャンセル] と同じ効果があります。

    誤った例:

    screen shot of message with ok button only

    この例では、タイトル バーに [閉じる] ボタンしかないと、ユーザーに選択肢がないかのように表示されます。

  • 質問に回答するのに [キャンセル] ボタンを使用しないでください。

    誤った例:

    screen shot of message with ok for yes-no question

    この例では、"はい" または "いいえ" で回答する質問に応答するのに、[OK] と [キャンセル] を誤って使用しています。

  • Esc が [キャンセル] アクセス キーであるため、[キャンセル] にはアクセス キーを割り当てないでください。 そうすることで、他のアクセス キーを割り当てやすくなります。

  • モードレス ダイアログ ボックスで [キャンセル] ボタンを使用しないでください。 代わりに、[閉じる] を使用します。

  • [キャンセル] ボタンを無効にしないでください。 ユーザーは常にダイアログ ボックスをキャンセルできる必要があります。

    • 例外: 操作を取り消すことができない期間がある場合は、進行状況ダイアログで [キャンセル] ボタンを無効にできます。 ただし、より良い解決策は、このような操作を常に取り消し可能に設計することです。

[閉じる] ボタン

  • モードレス ダイアログ ボックスには [閉じる] ボタンと、キャンセルできないモーダル ダイアログを使用します。
  • [閉じる] をクリックすることは、ダイアログ ボックスのウィンドウが閉じることを意味し、既存の副次的効果が残ります。 [完了] は命令型の構造ではないので、使用しないでください。 入れ子になった選択ダイアログ ボックスの場合、オーナーの選択ダイアログで [閉じる] をクリックすると、オーナー付きの選択ダイアログによって行われた変更は保持されます。
  • ダイアログ ボックスの本文に明示的な [閉じる] ボタンを配置します。 ダイアログ ボックスには明確な終了ポイントが必要です。 ユーザーがタイトル バーの [閉じる] ボタンを見つけることを当てにしないでください。
  • タイトル バーの [閉じる] ボタンが、[キャンセル] または [閉じる] と同じ効果であることを確認します。
  • Esc が [閉じる] のアクセス キーであるため、[閉じる] にはアクセス キーを割り当てないでください。 そうすることで、他のアクセス キーを割り当てやすくなります。

[適用] ボタン

  • プロパティ シートやコントロール パネルではないダイアログ ボックスでは、[適用] ボタンを使用しないでください。 [適用] ボタンは、保留中の変更を適用しますが、ウィンドウは開いたままにします。 これにより、ユーザーはウィンドウを閉じる前に変更を評価できます。 ただし、このニーズがあるのはプロパティ シートとコントロール パネルだけです。

    誤った例:

    screen shot of dialog box with apply button

    この例では、選択ダイアログに [適用] ボタンが不必要に使用されています。

間接ダイアログ ボックスのコミット ボタン

注: 間接ダイアログ ボックスは、タスクの間接的な結果として、またはシステムやバックグラウンド プロセスに関する問題の結果として、コンテキストが不明な状態で表示されます。 間接ダイアログの場合、[キャンセル] ボタンはダイアログを取り消すようにも、タスク全体を取り消すようにも取ることができるため、あいまいです。

  • ユーザーがダイアログ ボックスとタスクの両方をキャンセルする必要がある場合のために、両方を実行するコミット ボタンを表示します。 ダイアログ ボックスを取り消すボタンに、主な指示に対する否定の応答のラベルを付けます。 タスク全体を取り消すボタンに [キャンセル] というラベルを付けます。 [キャンセル] を使用すると、そのダイアログ ボックスを多くのコンテキストで使用できます。

    正しい例:

    screen shot of dialog box with save/don't save

    この例では、グラフィックが保存されていない場合に、[新規] または [終了] コマンドの結果として、Windows ペイントによってこのダイアログ ボックスが表示されています。 [保存しない] は保存せずにダイアログを閉じますが、[キャンセル] は [新規] または [終了] コマンドを取り消します。

    誤った例:

    screen shot of dialog box with yes/no buttons

    この例では、このダイアログ ボックスが表示される原因となったタスクを取り消す (Office のショートカット バーを閉じる) 方法はありません。 このダイアログ ボックスには、[キャンセル] ボタンが必要です。

  • ユーザーがダイアログを取り消す必要があるが、タスクを取り消す必要がない場合は、主な指示に対する具体的かつ否定の応答のボタンを使用し、[キャンセル] ボタンは使用しません。

    screen shot of dialog box with run/don't run

    この例では、ActiveX コントロールをインストールする Web ページに移動した結果、このダイアログ ボックスが間接的に表示されています。 ここは [キャンセル] ではあいまいになるため、代わりに [実行しない] が使用されています。

詳細と例については、「コマンド ボタン」を参照してください。

  • 長いコマンドのセットを表示するには、コマンド ボタンやラジオ ボタンと [OK] ボタンの組み合わせの代わりに、コマンド リンクを使用します。 これにより、ユーザーは 1 回のクリックで応答できます。 ただし、このアプローチは単一の質問に対してのみ機能します。
  • 最も一般的に使用されるコマンド リンクを最初に提示します。 結果の順序は、だいたい使用される傾向が高い順になりますが、論理的なフローもあります。
    • 例外: すべてを実行する結果となるコマンド リンクは、最初に配置する必要があります。
  • コマンド リンクに詳細な説明が必要な場合は、補足説明を表示します。補足説明は、ユーザーがコマンドを選択する理由、またはコマンドが選択された場合の動作について説明します。
  • コマンド リンクの冗長な言い換えに補足説明は使用しないでください。 補足説明は、コマンド リンクを一目見てすぐにわかるものにできない場合にのみ使用してください。 1 つのコマンド リンクに補足説明を表示しても、すべてのコマンドに対して補足説明を表示する必要があるわけではありません。

screen shot of dialog box with text noting options

この例では、補足説明でオプションの 1 つの影響について説明します。

  • 動詞で終わる文言を使用し、句点は付けません。
  • コマンドが強く推奨される場合は、ラベルに "(推奨)" を追加することを検討してください。 補足説明ではなく、必ずリンク ラベルに追加してください。
  • コマンドが高度な知識を持つユーザーのみを対象とする場合は、ラベルに "(高度)" を追加することを検討してください。 補足説明ではなく、必ずリンク ラベルに追加してください。
  • 常に [キャンセル] ボタンを明示的に指定します。 この目的のためにコマンド リンクを使用しないでください。

誤った例:

screen shot of dialog box with don't exit link

この例では、ダイアログ ボックスで [キャンセル] ボタンではなくコマンド リンクが使用されています。

詳細と例については、「コマンド リンク」を参照してください。

今後この <項目> を表示しない

  • 代替手段がない場合にのみ、ユーザーにダイアログ ボックスが繰り返し表示されないように、[今後この <項目> を表示しない] オプションを使用することを検討してください。 ユーザーが本当に必要な場合は常にダイアログを表示するか、そうでない場合は単に削除することをお勧めします。
  • この具体的な文言を、<項目> を特定の項目に置き換えて使用します。 たとえば、[今後このリマインダーを表示しない] のようにします。 ダイアログ ボックス全般に言及する場合は、[今後このメッセージを表示しない] を使用します。
  • オプションの下に "選択した内容は将来既定で使用されます" という文を追加して、ユーザー入力が将来の既定値に使用されるときは明確に示します
  • 既定でそのオプションを選択しないでください。 ダイアログ ボックスの表示が必要なのが本当に 1 回だけの場合は、確認することなくそのようにします。 このオプションをユーザーの邪魔をする口実には使用せず、既定の動作がユーザーの邪魔にならないようにしてください。

誤った例:

screen shot of message asking unnecessary question

この例では、メッセージは 1 回だけ表示する必要があります。 確認する必要はありません。

  • ユーザーごとに設定を保持します。
  • ユーザーがオプションを選択して [キャンセル] をクリックすると、このオプションが有効になります。 この設定はメタオプションであるため、副次的効果を残さない標準のキャンセル動作には従いません。 ユーザーが今後ダイアログを表示したくない場合は、キャンセルする可能性が最も高い点に注意してください。
  • ユーザーがこれらのダイアログ ボックスを復元することが必要になる可能性がある場合のために、プログラムの [オプション] ダイアログ ボックスに、メッセージを復元するコマンドを提供します。

後で確認します

  • 次の場合にのみ、ダイアログ ボックスを閉じるこのオプションを提供します。
    • ダイアログ ボックスは間接的であるため、ユーザーは別のタスクに集中する可能性がある。
    • ユーザーは応答する必要がありますが、すぐに応答する必要はないため、作業を続行する可能性がある。
    • 質問に回答するには十分な検討または労力が必要であり、より多くの時間があればより適切な意思決定を行える可能性がある。
    • ダイアログ ボックスまたはオプションが後で自動的に表示される (ユーザーが実際に後で確認できる)。
  • 誤った例:
  • screen shot of message with ask me later option
  • この例の質問は単純であるため、[後で確認する] オプションを追加すると、かえってわかりにくくなってしまいます。
  • それ以外の場合は、ユーザーがすぐに応答すると想定し、ただし [キャンセル] または [閉じる] を使用してダイアログ ボックスを普通に閉じることができるように設定します。 厳密に使用する場合、このオプションが使用されるケースはあまりありません。

詳細/簡易

  • ターゲット ユーザーが一般的に必要としない高度なオプションやあまり使用されないオプション、コマンド、詳細を表示または非表示にするには、詳細/簡易の段階的表示ボタンを使用します。 これにより、一般的な用途のダイアログ ボックスが簡略化されます。 ユーザーが見つけることができない可能性があるため、よく使用されるオプション、コマンド、情報は非表示にしないでください。

screen shot of dialog box with more options button

この例では、あまり使用されないオプションが既定で非表示になっています。

  • 表示する詳細が実際に存在しない限り、詳細/簡易コントロールを使用しないでください。 同じ情報を別の形式で言い換えるだけのことはしないでください。
  • ヘルプを表示するために詳細/簡易コントロールを使用しないでください。 代わりにヘルプ リンクまたは脚注を使用してください。
  • タスク ダイアログでは、詳細/簡易コントロールと [今後この <項目> を表示しない] を組み合わせて使用しないでください。 このように組み合わせると、見た目が不格好になります。
  • ラベル付けのガイドラインについては、「段階的表示」を参照してください。

脚注

  • 脚注は、ダイアログ ボックスの目的には不可欠ではないが、ユーザーの意思決定に役立つ場合に使用します。 ほとんどのユーザーは脚注をスキップし、ダイアログ ボックスに応答するために、十分な情報に基づいた意思決定を行うことができる必要があります。

screen shot of dialog box with clarifying footnote

この例では、脚注の情報は補足的であり、必須情報ではありません。

コントロールを無効化または削除することと、エラー メッセージを表示することの違い

  • あるコントロールが現在のコンテキストに適用されない場合は、次のオプションを検討してください。
    • ユーザーがコントロールを有効にする方法がない場合、またはユーザーが適用されないと見なし、その状態がそれほど頻繁には変化しない場合は、コントロールを削除します。 これにより、ダイアログ ボックスが簡略化され、ユーザーが見落とすことがなくなります。 コントロールが頻繁に表示されたり消えたりするのは迷惑です。
    • ユーザーが適用されると見なす場合や、その状態が頻繁に変化する場合は、コントロールを無効にします。ユーザーはそのコントロールが無効になっている理由を簡単に推測できます。 簡単に推測できる例として、入力が必要な空のテキスト ボックスが 1 つ存在する場合に、コミット ボタンを無効にすることが挙げられます。 テキスト ボックスや編集可能なドロップダウン リストで、あまり重要でないユーザー入力の問題を表示するのに、バルーンを使用できます。 ただし、バルーンで問題を説明できない場合や、複数のコントロールが関与する場合、推測することは簡単ではなくなります。
    • それ以外の場合は、コントロールを有効のままにしますが、正しく使用されていない場合はエラー メッセージを表示します。 この場合に無効にすると、ユーザーにとってコントロールが無効になっている理由を理解することが難しくなります。 ユーザーは、実験と推測のロジックを通じて、問題を特定せざるを得なくなります。 それよりも単純に、問題を明示的に説明するのに役立つエラー メッセージを提供することをお勧めします。
  • ヒント: コントロールを無効にすべきか、エラー メッセージを表示すべきかを判断できない場合は、表示する可能性があるエラー メッセージを作成することから始めてください。 ターゲット ユーザーがすぐには推測できない可能性が高い有用な情報がエラー メッセージに含まれている場合は、コントロールを有効のままにしてエラーを表示します。 それ以外の場合は、コントロールを無効にします。
  • コントロールを無効にする場合は、関連するすべてのコントロールも無効にします (ラベル、補足説明、コマンド ボタンなど)。 ただし、グループ ボックス、グループ ラベル、グループの説明がある場合は、それらを無効にしないでください。

screen shot of dialog box with dimmed controls

この例では、無効になっているテキスト ボックスのラベルも無効になっていますが、グループ ラベルとグループの説明は無効になっていません。

必要な入力

  • コントロールに情報を提供する必要があることをユーザーに示すには、次のオプションを検討してください。

    • 何も指し示すことなく、未入力の必須の入力項目をエラー メッセージで処理します。 このアプローチは、ほとんどの入力が省略可能な場合や、ユーザーがコントロールをスキップする可能性が低い場合に、読みづらさを解消できるので効果的です。結果として、エラー メッセージの数が少なくなります。

    • ラベルの先頭にアスタリスクを使用して、入力が必須であることを示します。 アスタリスクの内容は、次のいずれかの方法を使用して説明します。

      • コンテンツ領域の下部の脚注で "* 入力が必須" と明記する。
      • アスタリスクのヒントで "入力が必須" と明記する。

      この方法は、必須のコントロールがそれほど多くない場合は効果的ですが、ほとんどのコントロールが必須な場合はあまり機能しません。

      screen shot of text box labels with asterisks

      この例では、入力が必須であることを示すのにアスタリスクを使用しています。

    • すべてのコントロールに入力が必須である場合は、コンテンツ領域上部の適当な場所に、"すべての入力が必須" と明記します。 この方法により、この具体的なケースにおいて読みづらさを解消できます。

    • ラベルの後ろに "(オプション)" と付けることで、省略可能な入力項目であることを示します。 このアプローチは、入力がほとんど必須である場合には効果的ですが、そうでない場合はあまり効果的でありません。

  • 一貫性を保つには、プログラム全体で必須の入力項目を示すのに、同じメソッドを使用してください。 具体的には、必要に応じて入力が必須であるか省略可能であるかのいずれか一方を示し、同じプログラム内で両方を使用することは避けてください。

エラー処理

  • 有効なユーザー入力に制限されているコントロールを使用して、エラーを防ぎます。 また、適切な既定値を提供することで、エラーの数を減らすこともできます。

  • ユーザー入力をできるだけ早く検証し、入力ポイントのできるだけ近くにエラーを表示します。

  • ユーザー入力の問題には、モードレス エラー処理 (インプレース エラーまたはバルーン) を使用します。

    • テキスト ボックス内、またはテキスト ボックスがフォーカスを失った直後に検出された、あまり重大でない単一ポイントのユーザー入力の問題には、バルーンを使用します。 インプレース メッセージを表示するには、画面に使用可能な領域や動的レイアウトが必要ですが、バルーンには必要ありません。 バルーンは一度に 1 つのみ表示します。 重大な問題ではないため、エラー アイコンは必要ありません。 バルーンは、クリックされたとき、問題が解決されたとき、またはタイムアウト後に消えます。

      screen shot of 'incorrect character' message

      この例では、バルーンはコントロール下にある間に発生した入力の問題を示しています。

  • 遅延エラー検出にはインプレース エラーを使用します。これは通常、コミット ボタンをクリックして検出されたエラーです。 (即座にコミットされる設定にはインプレース エラーを使用しないでください)。一度に複数のインプレース エラーを表示できます。 通常のテキストと 16 x 16 ピクセルのエラー アイコンを使用して、可能な限り問題のすぐ隣に配置します。 インプレース エラーは、ユーザーがコミットし、他のエラーが見つからない限り消えません。

    screen shot of dialog box with two error messages

    この例では、コミット ボタンをクリックして見つかったエラーに対してインプレース エラーを使用しています。

  • モーダル エラー処理 (タスク ダイアログまたはメッセージ ボックス) は他のすべての問題に対して使用します (複数のコントロールが関与するエラー、コミット ボタンをクリックして見つかったコンテキストに依存しないエラーや入力以外のエラーなど)。

  • 入力の問題が見つかって報告された場合は、間違ったエラーが含まれる最初のコントロールに入力フォーカスを設定します。 必要に応じて、コントロールをスクロールして表示します。

詳細と例については、「エラー メッセージ」と「バルーン」を参照してください。

Help

  • ユーザー アシスタンスを提供する場合は、次のオプションを検討してください。優先順位が高い順に列挙しています。

    • 対話型コントロールにわかりやすいラベルを付けます。 ユーザーは、他のテキストよりも対話型コントロールのラベルを読む傾向にあります。
    • 静的テキスト ラベルを使用して、コンテキストに沿った説明を記入します。
    • 関連するヘルプ トピックへの具体的なヘルプ リンクを指定します。
  • ダイアログ ボックスのコンテンツ領域の下部にヘルプ リンクを配置します。 ダイアログ ボックスに脚注があり、ヘルプ リンクがそこに関連する場合は、脚注内にヘルプ リンクを配置します。

    screen shot of dialog box with help link

    この例では、ヘルプ リンクがダイアログ全体に適用されます。

    • 例外: ダイアログ ボックスが複数の設定グループに分かれており、別個のヘルプ トピックが (おそらくグループ ボックス内に) ある場合は、それらグループの下にヘルプ リンクを配置します。
  • 一般的またはあいまいなヘルプ トピック リンクや汎用のヘルプ ボタンは使用しないでください。 多くの場合、ユーザーは汎用のヘルプを無視します。

詳細と例については、「ヘルプ」を参照してください。

既定の値

  • すべてのダイアログ ボックスに既定のコミット ボタンを指定します。
  • 質問ダイアログの場合:
    • (データやシステム アクセスが失われるのを防ぐために) 最も安全で、最もセキュリティの高いオプションが既定となるように選択します。 安全性とセキュリティが要因でない場合は、最も可能性の高い応答または便利な応答を選択します。
      • 例外: コマンドを元に戻す簡単で明白な方法がない限り、破壊的な応答を既定値にしないでください。
  • 選択ダイアログの場合:
    • 最初の既定値には、各コントロールに (データやシステム アクセスが失われるのを防ぐために) 最も安全で、最もセキュリティの高い値を選択します。安全性とセキュリティが要因でない場合は、最も可能性や利便性の高いオプションを選択します。
    • それ以降の既定値には、それらの値が繰り返される可能性が高く、そうすることが安全性とセキュリティが保たれる場合は、以前に選択したオプションを再選択します。それ以外の場合は、最初の既定値を選択します。

screen shot of print dialog box

この例では、ユーザーは前回と同じ印刷設定を選択する可能性が最も高いと考えられます。 ただし、必要なコピー数が変更される可能性があるため、この設定は再選択されていません。

  • Windows Vista の最小画面解像度である 800 x 600 ピクセルに対応します。 サイズ変更可能なウィンドウについては、1024 x 768 ピクセルの画面解像度を使用してレイアウトを最適化できます。
  • スクロール バーの使用を回避し、データが切り捨てられることがないように、実際に役に立つ場面では必ずサイズ変更可能なウィンドウを使用します。 動的なコンテンツやリストが含まれるウィンドウは、サイズ変更可能なウィンドウの利点を最大限に享受できます。
  • 固定サイズのウィンドウは全体が表示される必要があり、作業領域内に収まるようにサイズを変更する必要があります。
  • サイズ変更可能なウィンドウは、より高い解像度に合わせて最適化できますが、表示するときに必要に応じて実際の画面解像度に合わせてサイズを小さくすることができます。
  • 内容に適した既定のウィンドウ サイズを選択します。 スペースを効果的に使用できる場合は、ウィンドウの初期サイズを大きくすることを恐れないでください。

テキスト

全般

  • 冗長なテキストを削除します。 タイトル、主な指示、補足指示、コンテンツ領域、コマンド リンク、コミット ボタンに冗長なテキストがないか探します。 一般に、指示と対話型コントロールに完全なテキストを残し、他の場所から冗長なテキストを削除します。
  • 肯定的な表現を使用してください。 ユーザーにとっては肯定の文言のほうが簡単に理解できます。

正しい例:

ファイルとプリンターの共有を有効にしますか?

誤った例:

ファイルとプリンターの共有を無効にしますか?

ただし、コマンドが否定の文言であった場合でも、文言を関連するコマンドと一致させる必要があります。たとえば、無効にするコマンドの確定には [無効にする] を使用します。

  • 必要に応じて、"ウィンドウ" という単語を使用してダイアログ ボックス自体を参照します。
  • 主な指示やコンテンツ領域で、ユーザーに何をすべきかを伝えるには二人称 ("あなた/あなたの") を使用します。 多くの場合、二人称は暗黙的に示されます。

例:

印刷する画像を選択してください

アカウントの選択

  • 主な指示に応答するコンテンツ領域のコントロールで、ユーザーがプログラムに何をすべきかを伝えるには一人称 ("私/私の") を使用します

例: 私のカメラにある写真を印刷する

ダイアログ ボックスのタイトル

  • タイトルは、ダイアログ ボックスの元のコマンド、機能、プログラムを識別するために使用します。
    • ユーザーが起動したダイアログの場合は、コマンド名や機能名を使用してダイアログを識別します。 例外:
      • 数多くの異なるコマンドによって表示されたダイアログ ボックスの場合は、代わりにプログラム名を使用することを検討してください。
      • そのタイトルが主な指示と重複している場合は、代わりにプログラム名を使用します。
    • プログラムまたはシステムによって起動された (そのためコンテキストが不明である) 場合は、プログラムまたは機能名を使用して識別し、コンテキストを提供します。
    • ダイアログで何をすべきかをタイトルで説明しないでください。それは主な指示の役割です。
  • コマンド ベースの名前には正確なコマンド名を使用してください。ただし、省略記号がある場合は含めないでください。 適切なタイトルを作成するために、必要に応じてコマンドのメニュー タイトルを含めることができます。 例: [挿入] メニューの [オブジェクト...] コマンドの場合は、[オブジェクトの挿入] というタイトルを使用します。
  • タスク バーにモードレス ダイアログ ボックスが表示される場合は、最初に識別情報を簡潔に配置することで、タスク バーに表示するタイトルを最適化します。 例: "66% 完了"、"残り 3 個"
  • タイトルに "ダイアログ" や "進行状況" という単語を含めないでください。 これは暗に示されているため、消しておくとユーザーがより簡単に監視できるようになります。
  • 句点なしのタイトルスタイルの大文字を使用します。

主要な命令

  • ダイアログで何をすべきかを簡潔に説明するには、主な指示を使用します。 主な指示は、具体的なメッセージ、命令指示、質問である必要があります。 優れた指示は、ダイアログを操作するメカニズムのみに焦点を当てる代わりに、そのダイアログを使用するユーザーの目的を伝えます。
  • 伝えることができる唯一のことが明白である場合は、主な指示を省略します。 このような場合、ダイアログ ボックスの内容は見てすぐにわかります。 たとえば、[ファイルを開く] や [ファイルを保存する] などの一般的なダイアログは、コンテキストとデザインによって目的が明白であるため、主な指示は不要です。
  • 主な指示を言い換えるコントロール ラベルは省略します。 この場合は、主な指示がアクセス キーを受け取ります。

許容できる:

screen shot of text box with redundant label

この例のテキスト ボックスのラベルは、主な指示を単に言い換えたものです。

よりわかりやすくするには:

screen shot of same text box with one label

この例では、冗長なラベルが削除されており、主な指示がアクセス キーを受け取ります。

  • 簡潔にし、完全な一文のみを使用してください。 主な指示を削り、重要な情報のみになるようにします。 さらに説明が必要な場合は、補足指示を使用します。
  • 可能な限り具体的な動詞を使用してください。 具体的な動詞 (例: 接続する、保存する、インストールする) は、一般的な動詞 (例: 構成する、管理する、設定する) よりもユーザーにとって有意義です。
  • 文スタイルの大文字を使用します
  • 指示が命令文の場合は、末尾に句点を付けないでください。 指示が質問の場合は、末尾に疑問符を付けます。
  • 進行状況ダイアログの場合は、進行中の操作を簡単に説明する動名詞句を使用し、末尾を省略記号にします。 例: 画像を印刷しています...
  • ヒント: 友人に伝える場合はどうするかを想像することで、主な指示を評価できます。 その主な指示で応答すると不自然であったり、役に立たなかったり、おかしく感じたりする場合は、指示を作成し直してください。

補足説明

  • 必要に応じて、オプションの補足指示を使用して、ページの理解や使用に役立つ追加情報を提示します。 より詳しい情報を提供したり、用語を定義したりできます。
  • プログラムまたはシステムによって表示されたダイアログ ボックス (そのためコンテキストが不明である) 場合は、補足指示を使用して、そのダイアログが表示された理由を説明します。 そのようなダイアログは通常、コンテキストが明確でありません。
  • 主な指示をわずかに文言を変えて繰り返すことはしないでください。 代わりに、追加する情報があまりない場合は、補足指示を省略します。
  • 完全な文、文スタイルの大文字を使用し、末尾に句点を付けます。
  • コマンド リンクの動作を明確に伝え、区別する簡潔なリンク テキストを選びます。 これは見てすぐにわかるものにし、主な指示に対応している必要があります。 ユーザーがリンクの本当の意味や他のリンクとの違いを見分ける必要があるものであってはなりません。
  • コマンド リンクは常に動詞で終わるようにします。
  • 文スタイルで大文字化します。
  • 末尾に句点を付けないでください。
  • 必要に応じて、完全な文と末尾に句点を使用した説明をさらに入力します。 ただし、このような説明を追加するのは、必要な場合に限定してください。1 つのコマンド リンクに説明が必要であるからといって、すべてのコマンド リンクに説明を追加しないでください。

詳細と例については、コマンド リンクに関するガイドラインを参照してください。

コミット ボタン

  • そのままで意味をなし、主な指示に対する応答となる、具体的なコミット ボタンのラベルを使用します。 ユーザーがラベルを理解するために他に何も読む必要がないことが理想です。 ユーザーは静的テキストよりもコマンド ボタンのラベルをはるかに読む傾向にあります。
  • コミット ボタンのラベルは動詞で終わるようにします。 例外は [OK]、[はい]、[いいえ] です。
  • 文スタイルで大文字化します。
  • 末尾に句点を付けないでください。
  • 一意のアクセス キーを割り当てます。
    • 例外: Enter と Esc がそれぞれのアクセス キーであるため、[OK] ボタンと [キャンセル] ボタンにはアクセス キーを割り当てないでください。 そうすることで、他のアクセス キーを割り当てやすくなります。

ドキュメント

ダイアログ ボックスを参照する場合:

  • プログラミングおよびその他の技術ドキュメントでは、ダイアログ ボックスをダイアログ ボックスとして参照します。 それ以外の場所では、ダイアログ ボックスをそのダイアログ ボックスのタイトルで参照します。 タイトル バーが非表示の場合は、主な指示を使用してダイアログを参照します。
  • ダイアログ ボックス全般を参照する必要がある場合、ユーザー ドキュメントではウィンドウを使用します。 単純な質問ダイアログや確認は、メッセージとして参照できます。
  • 大文字小文字を含め、正確なタイトルまたは主な指示のテキストを使用します。
  • 可能な場合は、タイトルの書式を太字のテキストに設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、タイトルを引用符で囲みます。

例: [Windows セキュリティ] で、[その他のオプション] をクリックします。