プログレッシブ漏えいの制御

注意

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

段階的な開示制御を使用すると、ユーザーはデータ、オプション、コマンドなどの追加情報を表示または非表示にすることができます。 進歩的な開示は、必要に応じて追加の詳細を明らかにしながら、不可欠な に焦点を当てることで、シンプルさを促進します。

進歩的な開示制御の例。

注意

レイアウト、メニュー、ツール バーに関連するガイドラインは、別の記事で示されています。

これは適切なコントロールですか?

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

• ユーザーは、一部のシナリオで情報を表示する必要があるが、すべてのシナリオでは表示されないか、または一部のシナリオで情報を表示する必要がありますか? その場合、段階的な開示を使用して情報を表示すると、ベースライン エクスペリエンスが簡略化される一方で、ユーザーは簡単に情報にアクセスできます。

  

  この例では、Windows セキュリティ アプリは重要なセキュリティ状態を常に表示しますが、プログレッシブ開示を使用してオンデマンドで詳細を表示します。

• 情報が既定で表示されている場合、ユーザーは非表示にすることを選択する可能性がありますか? ユーザーがより多くの領域を必要とするシナリオはありますか? ユーザーはユーザー インターフェイス (UI) をカスタマイズする意欲が十分にありますか? そうでない場合は、段階的な開示を使用せずに情報を表示します。

  正しくない:

  

  この例では、ユーザーは情報を非表示にする意欲がありません。

• 追加情報は高度、実質的、複雑、または独立したサブタスクに関連していますか? その場合は、プログレッシブ開示コントロールを使用する代わりに 、コマンド ボタン または リンク を使用して、別のウィンドウに情報を表示することを検討してください。 (上級ユーザー向けの場合は、追加情報が高度です。他の情報の読み取りやレイアウトが困難になる場合は複雑です)。

  

  この例では、ソフトウェアの名前と発行元に関する情報は、主に上級ユーザーにとって意味があるため、別のウィンドウへのリンクが使用されます。

• 追加情報は、アイテムの機能や使用方法を説明する文または文フラグメントですか? その場合は、 ヒント またはヒントの使用を検討してください。

• 追加情報は現在のタスクに関連していますが、現在表示されている情報とは無関係ですか? その場合は、代わりに タブ を使用することを検討してください。 ただし、折りたたみ可能なリストは、多くの場合、より柔軟でスケーラブルであるため、タブよりも望ましいです。

• 追加情報を表示または非表示にすることは、基本的にデータ フィルターですか? その場合は、ドロップダウン リストまたはチェック ボックスを使用して、フィルターをリスト全体に適用することを検討してください。

設計概念

段階的開示の目的は次のとおりです。

• 必須に重点を置き、必要に応じて追加の詳細を明らかにすることで、UI を簡略化します。
• 煩雑さの認識を減らすことで、UI の外観を簡略化します。

どちらの目標も、段階的な開示コントロールを使用して達成できます。ここで、ユーザーがクリックして詳細を表示します。 ただし、明示的なプログレッシブ開示コントロールを使用せずに外観を簡略化するという 2 番目の目標を達成するには、次の方法があります。

• コンテキスト内でのみコンテキストの詳細を表示します。 たとえば、選択したオブジェクトまたはモードに関連するコンテキスト コマンドまたはツール バーを自動的に表示できます。

• セカンダリ UI のアフォーダンスの重みを減らします。アフォーダンス は、オブジェクトの使用方法を示すビジュアル プロパティです。 この傾向は、ユーザーが操作できる UI を配置することですが、このようなすべての UI を "クリックしてください" と叫ぶよう描画すると、視覚的な乱雑さが多すぎます。 セカンダリ UI の場合、多くの場合、微妙なアフォーダンスを使用し、マウス オーバーに完全な効果を与える方が良いです。

  

  この例では、[評価] フィールドは対話型ですが、マウスポインターを置くまでは表示されません。

• 前提条件が完了した後にのみ、フォローアップ手順を表示します。 このアプローチは、ユーザーが自信を持って最初の手順を実行できる使い慣れたタスクで最もよく使用されます。

  

  この例では、ユーザー名とパスワード ページには、最初にユーザー名とオプションのパスワード ボックスのみが表示されます。 ユーザーがパスワードを入力すると、確認ボックスとヒント ボックスが表示されます。

段階的な開示は UI を簡素化する優れた方法ですが、次のリスクがあります。

• 検出可能性の欠如。 ユーザーは、何かが表示されない場合は存在しないと想定する場合があります。 ユーザーが探しているものが表示されない場合は、マウスポインターを合わせたりクリックしたりすることはできません。 ユーザーが [その他のオプション] などをクリックしない可能性は常にあります。
• 安定性の欠如。 進歩的な開示が期待されるか、少なくとも自然に感じる必要があります。 コントロールが予期せず表示され、消えると、結果の UI が不安定になる可能性があります。

段階的な開示制御

プログレッシブ開示コントロールは、通常、その動作を説明する直接ラベルなしで表示されるため、ユーザーはコントロールの視覚的な外観だけに基づいて次の操作を実行できる必要があります。

• コントロールによって段階的な開示が提供されることを認識します。
• 現在の状態が展開されているか折りたたまれているかを確認します。
• タスクを実行するために追加情報、オプション、またはコマンドが必要かどうかを判断します。
• 必要に応じて、元の状態を復元する方法を決定します。

ユーザーは上記を試行錯誤で判断できますが、このような実験を不要にしてみてください。

進歩的な開示コントロールは、かなり弱い アフォーダンスを持っています。つまり、ビジュアルプロパティは弱いものの、それらがどのように使用されているかを示唆します。 次の表は、一般的なプログレッシブ開示コントロールの外観を比較したものです。

コントロール	目的	外観	グリフは を示します
シェブロン	すべて表示: 完全または部分的に非表示にされたコンテンツの残りの項目を表示または非表示にします。 項目は、(1 つのシェブロンを使用して) 所定の位置に表示されるか、ポップアップ メニュー (二重シェブロンを使用) に表示されます。	シェブロンは、アクションが発生する方向を指します。	将来的な状態
矢印	オプションの表示: ポップアップ コマンド メニューを表示します。	矢印は、アクションが発生する方向を指します。	将来的な状態
プラスとマイナスのコントロール	コンテナーを展開する: 階層間を移動するときに、コンテナーコンテンツを展開または折りたたみます。	プラス記号とマイナス記号は指しませんが、アクションは常に右側に表示されます。	将来的な状態
回転する三角形	詳細を表示する: 個々のアイテムの追加情報を表示または非表示にします。 また、コンテナーを展開するためにも使用されます。	回転する三角形は回転レバーに似ているので、アクションが発生した方向を指します。	現在の状態

1 つだけの操作を行う場合...

ユーザーは、検査だけで進歩的な開示コントロールの動作を正しく予測できる必要があります。 これを実現するには、適切な使用パターンを選択し、外観、場所、および動作を一貫して適用します。

使用パターン

プログレッシブ開示コントロールには、いくつかの使用パターンがあります。 一部のコントロールは、一般的なコントロールに組み込まれています。

シェブロン

シェブロンは、完全または部分的に非表示のコンテンツ内の残りの項目を表示または非表示にします。 通常、項目は所定の位置に表示されますが、ポップアップ メニューに表示することもできます。 配置されている場合、アイテムはユーザーが折りたたまれるまで展開された状態を維持します。

シェブロンは、次の方法で使用されます。

使用法	例
インプレース UI 関連付けられたオブジェクトは入力フォーカスを受け取り、1 つのシェブロンはスペース バーでアクティブになります。	これらの例では、インプレースシングルシェブロンは、関連するコントロールの右側に配置されます。
外部ラベルを含むコマンド ボタン コマンド ボタンは入力フォーカスを受け取り、スペース バーで 1 つのシェブロンがアクティブになります。	この例では、1 つのシェブロン ボタンにラベルを付け、ラベルの左側に配置します。 このパターンでは、ボタンのラベルがないと理解が難しくなります。
内部ラベルを含むコマンド ボタン コマンド ボタンは入力フォーカスを受け取り、スペース バーでアクティブになります。	これらの例では、通常のコマンド ボタンには、意味を示す二重シェブロンが配置されています。

矢印

矢印にポップアップ コマンド メニューが表示されます。 アイテムは、ユーザーが選択を行うか、任意の場所をクリックするまで展開された状態を維持します。

矢印ボタンが独立したコントロールの場合は、入力フォーカスを受け取り、スペース バーでアクティブになります。 矢印ボタンに親コントロールがある場合、親は入力フォーカスを受け取り、ドロップダウン リスト コントロールと同様に、Alt + 下方向キーと Alt + 上方向キーを使用して矢印がアクティブになります。

矢印は次の方法で使用されます。

使用法	例
個別のボタン 矢印は別のボタン コントロールにあります。	これらの例では、右側に配置された個別の矢印ボタンがコマンド メニューを示しています。
コマンド ボタン 矢印はコマンド ボタンの一部です。	これらの例では、メニュー ボタンと分割ボタンのテキストの右側に矢印が配置されています。

プラスとマイナスのコントロール

プラスとマイナスのコントロールは、階層間を移動するときにコンテナーの内容を表示するために展開または折りたたみます。 アイテムは、ユーザーが折りたたまれるまで展開された状態を維持します。 これらはボタンのように見えますが、動作はインプレースです。

関連付けられたオブジェクトは、入力フォーカスを受け取ります。 プラス記号は右方向キー、マイナスは左方向キーでアクティブになります。

プラスとマイナスのコントロールは、次の方法で使用されます。

使用法	例
折りたたみ可能なツリー コンテナーの内容を表示する複数レベルの階層。	この例では、プラスとマイナスのコントロールは、関連付けられているコンテナーの左側に配置されます。
折りたたみ可能なリスト コンテナーの内容を表示する 2 レベルの階層。	この例では、プラスとマイナスのコントロールは、関連付けられているリスト ヘッダーの左側に配置されます。

三角形の回転

回転する三角形は、個々のアイテムの追加情報を表示または非表示にします。 コンテナーの展開にも使用されます。 アイテムは、ユーザーが折りたたまれるまで展開された状態を維持します。

関連付けられたオブジェクトは、入力フォーカスを受け取ります。 折りたたまれた (右向きの) 三角形は、右方向キーを使用してアクティブになり、左方向キーを持つ展開 (下向き) 三角形がアクティブになります。

回転する三角形は、次の方法で使用されます。

使用法	例
折りたたみ可能なツリー コンテナーの内容を表示する複数レベルの階層。	この例では、回転する三角形は、関連付けられているコンテナーの左側に配置されます。
折りたたみ可能なリスト 追加の情報を表示する 2 レベルの階層。	この例では、回転する三角形は、関連付けられているリスト アイテムの左側に配置されます。

プレビュー矢印

シェブロンと同様に、追加情報が表示または非表示になります。 アイテムは、ユーザーが折りたたまれるまで展開された状態を維持します。 シェブロンとは異なり、グリフにはアクションのグラフィカルな表現があり、通常は何が起こるかを示す矢印が付きます。

Microsoft Windows メディア プレーヤー のこれらの例では、グリフには、発生するアクションを示す矢印があります。

プレビュー矢印は、開示が複雑な場合や複数の種類の開示がある場合など、標準のシェブロンがコントロールの動作を適切に伝達しない状況に最適です。

ガイドライン

全般

• 使用法に基づいてプログレッシブ開示パターンを選択します。 各使用パターンの説明については、前の表を参照してください。

• プログレッシブ開示コントロールにはリンクを使用しないでください。 [使用法パターン] セクションに示されているプログレッシブ開示コントロールのみを使用します。 ただし、リンクを使用して ヘルプ トピックに移動してください。

  正確:

  

  正しくない:

  

  正しくない例では、その他のオプションを表示するためにリンクが使用されています。 この使用方法は、リンクが別のページまたはダイアログ ボックスに移動した場合、またはヘルプ トピックを表示した場合に正しいです。

相互作用

• 直接ラベル付けされていないシェブロンと矢印の場合は、ツールヒントを使用して実行内容を説明します。

  

  この例では、ツールヒントはラベルのないシェブロン コントロールの効果を示します。

• ユーザーがアイテムを展開または折りたたむ場合は、ユーザーが既定の状態で開始する可能性がない限り、次回ウィンドウが表示されるときに有効になるように状態を保持します。 状態をウィンドウごと、ユーザー単位で保持します。

• 展開されたすべてのコンテンツを折りたたむことができるか、逆の操作が明らかであることを確認します。 これにより、探索が促進され、フラストレーションが軽減されます。 逆操作を明確にする最善の方法は、コントロールを同じ固定位置に保持することです。 コントロールを移動する必要がある場合は、視覚的に異なる領域内の同じ相対位置にコントロールを保持します。

  正しくない:

  

  

  この例では、[置換] ボタンをシェブロンでクリックすると、[ 置換 後の文字列] テキスト ボックスが表示されます。 これが完了すると、Replace エキスパンダーが Replace コマンドになるため、元の状態を復元する方法はありません。

• 「使用パターン」セクションに記載されているように、プログレッシブ開示パターンに適したアクセス キーのみを使用します。 Enter キーを使用してプログレッシブ開示をアクティブ化しないでください。

プレゼンテーション

• 進歩的な開示以外の目的で三角形の矢印を使用しないでください。

  正しくない:

  

  この例は段階的な開示パターンではありませんが、ここに矢印を使用すると、コマンドがポップアップ ウィンドウに表示されることを示しています。

  正確:

  

  この例では、代わりに行頭文字が正しく使用されています。

• 現在のコンテキストで適用されないプログレッシブ開示コントロールを削除 (無効にしない) します。 進歩的な開示コントロールは常に約束を果たすべきなので、提供する情報が多くない場合は削除してください。

  正しくない:

  

  この例では、適用されないプログレッシブ開示コントロールが誤って無効になっています。

シェブロン

• 1 つのシェブロンを使用して、インプレースで表示または非表示を切り替えます。 二重シェブロンを使用して、ポップアップ メニューを使用して表示または非表示を切り替えます。 ただし、内部ラベルを持つコマンド ボタンには、常に二重シェブロンを使用する必要があります。

  正確:

  

  正しくない:

  

  正しくない例では、二重シェブロンがインプレース プログレッシブ開示に使用されています。

  正確:

  

  この例では、二重シェブロンは、内部ラベルを持つコマンド ボタンであるため、インプレース プログレッシブ開示に使用されます。

• シェブロンとそれに関連付けられているコントロールの間に視覚的な関係を提供します。 インプレース シェブロンは、関連付けられた UI の右側に配置され、右揃えになっているため、シェブロンとそれに関連付けられているコントロールの間にはかなりの距離が存在する可能性があります。

  正確:

  

  この例では、インプレース シェブロンとそれに関連付けられている UI の間に明確な関係があります。

  正しくない:

  

  この例では、インプレース シェブロンとそれに関連付けられている UI の間に明確な視覚的な関係がないため、空間に浮かんでいるように見えます。

矢印

• Back、Forward、Go、Play と混同される可能性がある矢印グラフィックスは使用しないでください。 ニュートラル背景に単純な三角形の矢印 (茎のない矢印) を使用します。

  正確:

  

  これらの矢印は明らかに進歩的な開示コントロールです。

  不正解です (段階的な開示の場合):

  

  これらの矢印は、段階的な開示コントロールとは見えません。

  不正解 (Back、Forward の場合):

  

  これらの矢印は段階的な開示コントロールのように見えますが、表示されません。

推奨されるサイズ設定と間隔

段階的な開示コントロールに推奨されるサイズ設定と間隔。

ラベル

• 外部ラベルが付いたコマンド ボタンのシェブロンの場合:
  • 一意の アクセス キーを割り当てます。 ガイドラインについては、「 キーボード」を参照してください。
  • 文形式の大文字と小文字を使用します。
  • ラベルを語句として記述し、終了句読点を使用しません。
  • ボタンをクリックした場合の効果を説明するようにラベルを記述し、状態が変わったらラベルを変更します。
  • サーフェスに常にいくつかのオプション、コマンド、または詳細が表示される場合は、次のラベル ペアを使用します。
    • オプションの数を増やす/減らします。 オプション、オプション、コマンド、および詳細の組み合わせに使用します。
    • コマンドの数を増やす/減らします。 コマンドにのみ を使用します。
    • 詳細/詳細の数を減らします。 情報のみに使用します。
    • オブジェクト名>の数を増やす/減らします<。 フォルダーなど、他のオブジェクトの種類に使用します。
  • それ以外の場合:
    • オプションの表示/非表示を切り替えます。 オプション、オプション、コマンド、および詳細の組み合わせに使用します。
    • コマンドの表示/非表示を切り替えます。 コマンドにのみ を使用します。
    • 詳細の表示/非表示を切り替えます。 情報のみに使用します。
    • オブジェクト名の表示/非表示を切り替 <えます>。 フォルダーなど、他のオブジェクトの種類に使用します。
• 内部ラベルが付いたコマンド ボタンのシェブロンについては、標準の コマンド ボタン のガイドラインに従ってください。

ドキュメント

プログレッシブ開示コントロールを参照する場合:

• コントロールに固定ラベルがある場合は、そのラベルのみでコントロールを参照します。コントロールの説明を試みないでください。 大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーのアンダースコアは含めないでください。

• コントロールにラベルがない場合、または固定されていない場合は、その種類 (シェブロン、矢印、三角形、プラス/マイナス ボタン) でコントロールを参照します。 必要に応じて、コントロールの場所についても説明します。 ページ領域コントロールなど、コントロールが動的に表示される場合は、コントロールを表示する方法を説明して参照を開始します。

  例： フォルダー内のファイルを表示するには、フォルダー名の先頭にポインターを移動し、フォルダーの横にある三角形をクリックします。

• ボタンではない他のプログレッシブ開示コントロールと対比しない限り、コントロールをボタンとして参照しないでください。

• ユーザー操作を説明するには、クリックを使用します。 わかりやすくするために必要な場合は、click... を使用します。展開または折りたたみを行います。

• 可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。

例 :

• (シェブロンの場合)ファイル サイズを確認するには、[ 詳細] をクリックします。
• (矢印の場合)すべてのオプションを表示するには、[ 検索 ] ボックスの横にある矢印をクリックします。
• (プラス/マイナスの場合)画像を表示するには、[ 画像] をクリックします。