段階的表示コントロール
Note
この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。
段階的表示コントロールにより、ユーザーはデータ、オプション、コマンドなどの追加情報を表示または非表示にすることができます。 段階的表示は、重要な点に焦点を当てながら、必要に応じて追加の詳細を明らかにすることで、シンプルさを促します。
段階的表示コントロールの例。
これは適切なコントロールですか?
それを判断するには、以下の質問を考えます。
ユーザーは、すべてのシナリオではなく一部のシナリオで情報を見る必要があるのでしょうか。または、常にではなく一部のシナリオで情報を見る必要があるのでしょうか。 その場合、段階的表示を使用して情報を表示すると、ベースライン エクスペリエンスが簡素化され、ユーザーが情報に簡単にアクセスできるようになります。
この例では、Windows セキュリティ アプリは重要なセキュリティ状態を常に表示しますが、段階的表示を使用して要求に応じて詳細を表示しています。
情報が既定で表示されている場合、ユーザーは非表示にすることを選択する可能性がありますか。 ユーザーがより多くの領域を必要とするシナリオはありますか。 ユーザーはユーザー インターフェイス (UI) をカスタマイズする意欲が十分にありますか。 そうでない場合、段階的表示を使用せずに情報を表示してください。
誤った例:
この例では、ユーザーは情報を非表示にする必要はありません。
追加情報は高度、膨大な量、または複雑であるか、独立したサブタスクに関連していますか。 その場合、段階的表示コントロールを使用する代わりに、コマンド ボタンまたはリンクを使用して別のウィンドウに情報を表示することを検討してください。 (追加情報は、上級ユーザー向けの場合は高度な情報です。他の情報が読みにくかったりレイアウトしにくくなる場合は複雑です)。
この例では、ソフトウェアの名前と発行元に関する情報は主に上級ユーザーにとって意味があるため、別のウィンドウへのリンクが使用されています。
追加情報は、項目の機能や使用方法を説明する文または文の断片ですか。 その場合は、ツールヒントまたは情報ヒントの使用を検討してください。
追加情報は現在のタスクに関連していますが、現在表示されている情報とは独立していますか。 その場合は、代わりにタブを使用することを検討してください。 ただし、折りたたみ可能なリストはより柔軟で拡張性が高いため、タブよりもよく好まれます。
追加情報を表示または非表示にする操作は、本質的にデータ フィルターですか。 その場合、ドロップダウン リストまたはチェック ボックスを使って、リスト全体にフィルターを適用することを検討してください。
設計概念
段階的表示の目標は次のとおりです。
- 重要な点に焦点を当てながら、必要に応じて追加の詳細を表示することにより、UI を簡素化する。
- 乱雑さを軽減して UI の外観を簡素化する。
両方の目標は、ユーザーがクリックして詳細を表示する段階的表示コントロールを使用することで達成できます。 ただし、明示的な段階的表示コントロールを使用せずに外観を簡素化するという 2 番目の目標は、次の方法で達成できます。
コンテキストの詳細のみコンテキストで表示する。 たとえば、選択したオブジェクトまたはモードに関連するコンテキスト コマンドやツール バーを自動的に表示できます。
セカンダリ UI のアフォーダンスの重みを減らす。アフォーダンスは、オブジェクトの使用方法を示唆する視覚的なプロパティです。 ユーザーが操作できる UI を配置することがトレンドになっていますが、そのような UI をすべて "クリックして!" と叫ぶように描画すると、見た目が乱雑になりすぎます。 セカンダリ UI では、微妙なアフォーダンスを使用し、マウス オーバー時に完全な効果を実現する方がよい場合がよくあります。
この例では、"評価" フィールドは対話型ですが、マウスをポイントするまで表示されません。
前提条件が完了した後のみ、フォローアップ手順を表示します。 このアプローチは、ユーザーが自信を持って最初のステップを踏むことができる、使い慣れたタスクに最適です。
この例では、ユーザー名とパスワードのページには、最初はユーザー名とオプションのパスワード ボックスのみ表示されます。 ユーザーがパスワードを入力すると、確認ボックスとヒント ボックスが表示されます。
段階的表示は UI を簡素化する優れた方法ですが、次のようなリスクがあります。
- 見つけやすさが低下する。 ユーザーは、何かが表示されない場合は存在しないと想定する可能性があります。 ユーザーは、探しているものが見つからない場合、マウスを移動したりクリックしたりしない可能性があります。 ユーザーが [その他のオプション] などをクリックしない可能性は常に存在します。
- 安定性の欠如。 段階的表示は期待されるか、少なくとも自然に感じられなければなりません。 コントロールが予期せず表示または非表示になると、結果として得られる UI が不安定に感じられる可能性があります。
段階的表示コントロール
段階的表示コントロールは通常、その動作を説明する直接的なラベルなしで表示されるため、ユーザーはコントロールの外観のみに基づいて次の操作を実行できる必要があります。
- コントロールが段階的表示を提供することを認識します。
- 現在の状態が展開されているか折りたたまれているかを確認します。
- タスクを実行するために追加情報、オプション、またはコマンドが必要かどうかを判断します。
- 必要に応じて、元の状態を復元する方法を決定します。
ユーザーは試行錯誤で上記を判断できますが、そのような実験が不要になるように努めるべきです。
段階的表示コントロールのアフォーダンスはかなり弱いため、その視覚的なプロパティによって、弱いながらもその使用方法が示されます。 次の表は、一般的な段階的表示コントロールの外観を比較しています。
| コントロール | 目的 | 外観 | グリフが示す内容 |
|---|---|---|---|
シェブロン |
すべて表示: 完全または部分的に非表示のコンテンツの残りの項目を表示または非表示にします。 項目は、所定の位置に表示されるか (単一のシェブロンを使用)、ポップアップ メニューに表示されるか (二重のシェブロンを使用) のいずれかになります。 |
シェブロンは、アクションが発生する方向を指しています。 |
将来的な状態 |
矢印 |
オプションを表示: ポップアップ コマンド メニューを表示します。 |
矢印は、アクションが発生する方向を指しています。 |
将来的な状態 |
プラスとマイナスのコントロール |
コンテナーを展開: 階層間を移動するときに、コンテナーの内容を所定の場所に展開するか折りたたみます。 |
プラス記号とマイナス記号は指していませんが、アクションは常にその右側で発生します。 |
将来的な状態 |
三角形の回転 |
詳細を表示: 個々の項目の追加情報を表示または非表示にします。 コンテナーの展開にも使用されます。 |
回転する三角形は回転するレバーに似ているため、アクションが発生した方向を指します。 |
現在の状態 |
1 つだけ行うとしたら...
ユーザーは、見ただけで段階的表示コントロールの動作を正しく予測できる必要があります。 これを実現するには、適切な使用パターンを選択し、その外観、場所、動作を一貫して適用します。
使用パターン
段階的表示コントロールには、いくつかの使用パターンがあります。 一部のコントロールは、一般的なコントロールに組み込まれています。
シェブロン
シェブロンは、完全または部分的に非表示のコンテンツの残りの項目を表示または非表示にします。 通常、項目は所定の位置に表示されますが、ポップアップ メニューに表示することもできます。 配置すると、項目はユーザーが折りたたむまで展開されたままになります。
シェブロンは、次の方法で使用されます。
| 使用方法 | 例 |
|---|---|
| インプレース UI 関連付けられたオブジェクトが入力フォーカスを受け取り、スペース バーで単一のシェブロンがアクティブになります。 |
 これらの例では、インプレース一重シェブロンは、関連するコントロールの右側に配置されています。 |
| 外部ラベルを含むコマンド ボタン コマンド ボタンは入力フォーカスを受け取り、スペース バーで 1 つのシェブロンがアクティブになります。 |
 この例では、1 つのシェブロン ボタンにラベルが付いており、ラベルの左側に配置されています。 このパターンでは、ボタンのラベルがないと理解が難しくなります。 |
| 内部ラベルを含むコマンド ボタン コマンド ボタンは入力フォーカスを受け取り、スペース バーでアクティブになります。 |
 これらの例では、通常のコマンド ボタンには、意味を示す二重シェブロンが配置されています。 |
矢印
矢印にポップアップ コマンド メニューが表示されます。 ユーザーが選択を行うか、任意の場所をクリックするまで、項目は展開されたままです。
矢印ボタンが独立したコントロールの場合、入力フォーカスを受け取り、スペース バーでアクティブになります。 矢印ボタンに親コントロールがある場合、親コントロールは入力フォーカスを受け取り、ドロップダウン リスト コントロールと同様、Alt + 下方向キーと Alt + 上方向キーによって矢印がアクティブになります。
矢印は、次の方法で使用されます。
| 使用方法 | 例 |
|---|---|
| 別個のボタン 矢印は別のボタン コントロールにあります。 |
 これらの例では、右側に配置された別個の矢印ボタンがコマンド メニューを示しています。 |
| コマンド ボタン 矢印はコマンド ボタンの一部です。 |
 これらの例では、メニュー ボタンと分割ボタンの矢印がテキストの右側に配置されています。 |
プラスとマイナスのコントロール
プラスとマイナスのコントロールを展開するか折りたたむと、階層内を移動するときにコンテナーのコンテンツが所定の位置に表示されます。 項目は、ユーザーが折りたたまれるまで展開された状態を維持します。 これらはボタンのように見えますが、動作はインプレースです。
関連するオブジェクトが入力フォーカスを受け取ります。 プラス記号は右方向キー、マイナス記号は左方向キーでアクティブになります。
プラスとマイナスのコントロールは、次の方法で使用されます。
| 使用方法 | 例 |
|---|---|
| 折りたたみ可能なツリー コンテナーの内容を表示する複数レベルの階層。 |
![[動作] が選択されている Windows エクスプローラーのフォルダー ツリーを示すスクリーンショット。](images/progressive-disclosure-controls-image16.png) この例では、プラスとマイナスのコントロールは、関連付けられているコンテナーの左側に配置されます。 |
| 折りたたみ可能なリスト コンテナーの内容を表示する 2 レベルの階層。 |
 この例では、プラスとマイナスのコントロールは、関連付けられているリスト ヘッダーの左側に配置されます。 |
三角形の回転
回転する三角形は、個々の項目の追加情報を表示または非表示にします。 コンテナーの展開にも使用されます。 項目は、ユーザーが折りたたまれるまで展開された状態を維持します。
関連するオブジェクトが入力フォーカスを受け取ります。 折りたたまれた (右向きの) 三角形は右矢印キーでアクティブになり、展開された (下向きの) 三角形は左矢印キーでアクティブになります。
回転する三角形は、次の方法で使用されます。
| 使用方法 | 例 |
|---|---|
| 折りたたみ可能なツリー コンテナーの内容を表示する複数レベルの階層。 |
 この例では、回転する三角形は、関連付けられているコンテナーの左側に配置されます。 |
| 折りたたみ可能なリスト 追加情報を表示する 2 レベルの階層。 |
 この例では、回転する三角形は、関連付けられているリスト項目の左側に配置されます。 |
プレビュー矢印
シェブロンと同様、追加情報が表示または非表示になります。 項目は、ユーザーが折りたたまれるまで展開された状態を維持します。 シェブロンとは異なり、グリフにはアクションがグラフィカルに表現され、通常は何が起こるかを示す矢印が表示されます。
Microsoft Windows Media Player のこれらの例では、グリフに、実行されるアクションを示す矢印が付いています。
プレビュー矢印は、表示が複雑であったり、表示の種類が複数ある場合など、標準のシェブロンではコントロールの動作が適切に伝わらない状況に最適です。
ガイドライン
全般
使用方法に応じて段階的表示パターンを選択します。 各使用パターンの説明については、前の表をご覧ください。
段階的表示コントロールにはリンクを使用しないでください。 [使用パターン] セクションに示されている段階的表示コントロールのみを使用します。 ただし、リンクを使用して「ヘルプ トピック」に移動してください。
正しい例:
誤った例:
正しくない例では、リンクを使用して、その他のオプションを表示します。 リンクが別のページまたはダイアログ ボックスに移動する場合、またはヘルプ トピックを表示する場合は、この使用方法が適切です。
相互作用
直接ラベルが付いていないシェブロンや矢印については、ツールヒントを使用してその機能を説明します。
この例では、ヒントはラベル付けされていないシェブロン コントロールの効果を示しています。
ユーザーが項目を展開したり折りたたんだり場合、ユーザーが既定の状態で開始することを希望する可能性がない限り、状態を永続化して、次回ウィンドウが表示されたときに有効になるようにします。 ウィンドウごと、ユーザーごとに状態を永続化します。
すべての展開されたコンテンツを折りたたむことができ、その逆も可能であること、また逆の操作が明確であることを確認します。 そうすることで、操作がスムーズになり、フラストレーションが軽減されます。 逆の操作を明確にする最善の方法は、コントロールを同じ固定された場所に保持することです。 コントロールを移動する必要がある場合、視覚的に区別できる領域内の同じ相対位置に保持します。
誤った例:
![シェブロンのある [置換] ボタンのスクリーンショット](images/progressive-disclosure-controls-image24.png)
![シェブロンのない [置換] ボタンのスクリーンショット](images/progressive-disclosure-controls-image25.png)
この例では、シェブロンの付いた [置換] ボタンをクリックすると、[置換後の文字列] テキスト ボックスが表示されます。 これが完了すると、置換エキスパンダーが置換コマンドになるため、元の状態を復元する方法はありません。
「使用パターン」セクションに記載されている段階的表示パターンに適したアクセス キーのみを使用してください。 Enter キーを使用して段階的表示をアクティブ化しないでください。
プレゼンテーション
段階的表示以外の目的で三角形の矢印を使用しないでください。
誤った例:
この例は段階的表示パターンではありませんが、ここで矢印を使用すると、コマンドがポップアップ ウィンドウに表示されることを示しています。
正しい例:
この例では、代わりに行頭文字が正しく使用されています。
現在のコンテキストに適用されない段階的表示コントロールを削除 (無効にしない) します。 段階的表示コントロールは常にその約束を果たす必要があるため、提供する情報がなくなったら段階的表示コントロールを削除してください。
誤った例:
この例では、適用されない段階的表示コントロールが誤って無効になっています。
シェブロン
一重シェブロンを使用して、所定の位置で表示または非表示にします。 ポップアップ メニューを使用して表示または非表示にするには、二重シェブロンを使用します。 ただし、内部ラベルを持つコマンド ボタンには、常に二重シェブロンを使用する必要があります。
正しい例:
誤った例:
正しくない例では、二重シェブロンはインプレース段階的表示に使用されています。
正しい例:
![二重シェブロンの [その他のコマンド] ボタンのスクリーンショット](images/progressive-disclosure-controls-image31.png)
この例では、二重シェブロンは、内部ラベルを持つコマンド ボタンであるため、インプレース段階的表示に使用されます。
シェブロンとそれに関連付けられているコントロールの間に視覚的な関係を提供します。 インプレース シェブロンは関連付けられた UI の右側に配置され、右揃えになるため、シェブロンと関連付けられたコントロールの間にはかなりの距離が生じることがあります。
正しい例:
この例では、インプレース シェブロンとそれに関連付けられている UI の間に明確な関係があります。
誤った例:
この例では、インプレース シェブロンとそれに関連付けられている UI の間に明確な視覚的な関係がないため、空間に浮いているように見えます。
矢印
[戻る]、[進む]、[移動]、または [再生] と混同される可能性がある矢印グラフィックスは使用しないでください。 ニュートラル背景では、単純な三角形の矢印 (茎のない矢印) を使用してください。
正しい例:
これらの矢印は明らかに段階的表示コントロールです。
正しくない (段階的表示の場合):
これらの矢印は、段階的表示コントロールには見えません。
正しくない (戻る、進む):
これらの矢印は段階的表示コントロールのように見えますが、そうではありません。
サイズと間隔のお勧め設定
段階的表示コントロールに推奨されるサイズ設定と間隔。
Labels
- 外部ラベルが付いたコマンド ボタンのシェブロンの場合:
- 一意のアクセス キーを割り当てます。 ガイドラインについては、「キーボード」をご覧ください。
- 文スタイルの大文字を使用します。
- ラベルは、フレーズとして作成し、句読点は使用しないでください。
- ボタンをクリックしたときの効果を説明するようラベルを作成し、状態が変わったらラベルを変更します。
- サーフェスに常に何らかのオプション、コマンド、または詳細が表示される場合、次のラベル ペアを使用します。
- その他のオプション/オプションを減らす。 オプション、あるいはオプション、コマンド、詳細の組み合わせに使用します。
- その他のコマンド/コマンドを減らす。 コマンドにのみ使用します。
- その他の詳細/詳細を減らす。 情報にのみ使用します。
- <オブジェクト名>の表示を増やす/減らす。 フォルダーなど、他の種類のオブジェクトに使用します。
- それ以外の場合:
- オプションを表示/非表示。 オプション、あるいはオプション、コマンド、詳細の組み合わせに使用します。
- コマンドを表示/非表示。 コマンドにのみ使用します。
- 詳細を非表示/表示。 情報にのみ使用します。
- <オブジェクト名>を表示/非表示。 フォルダーなど、他の種類のオブジェクトに使用します。
- コマンド ボタンのシェブロンに内部ラベルが付いている場合、標準のコマンド ボタン ガイドラインに従ってください。
ドキュメント
段階的表示コントロールを参照する場合:
コントロールに固定ラベルがある場合、そのラベルのみでコントロールを参照します。コントロールを説明しようとしないでください。 大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーの下線は含めないでください。
コントロールにラベルがないか固定されていない場合、コントロールの種類 (シェブロン、矢印、三角形、プラス/マイナス ボタン) でコントロールを参照します。 必要に応じて、コントロールの場所についても説明します。 ページ スペース コントロールなど、コントロールが動的に表示される場合、コントロールを表示する方法を説明することにより参照を開始します。
例: フォルダー内のファイルを表示するには、フォルダー名の先頭にポインターを移動し、フォルダーの横にある三角形をクリックします。
ボタンではない他の段階的表示コントロールと対比する場合を除き、コントロールをボタンとして参照しないでください。
ユーザーの操作を説明するには、クリックを使用します。 明確にする必要がある場合、"クリック..." を使用して展開または折りたたみます。
可能な場合は、太字のテキストを使用してラベルを書式設定してください。 それ以外の場合、混乱を防ぐため、必要な場合にのみラベルを引用符で囲みます。
例 :
- (シェブロンの場合) ファイル サイズを確認するには、[詳細] をクリックします。
- (矢印の場合) すべてのオプションを表示するには、[検索] ボックスの横にある矢印をクリックします。
- (プラス/マイナスの場合) 画像を表示するには、[画像] をクリックします。