チェック ボックス
手記
このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。
チェック ボックスをオンにすると、ユーザーは明確に反対の 2 つの選択肢の間で決定を下します。 チェック ボックスのラベルは、選択した状態を示しますが、クリアされた状態の意味は、選択した状態の明確な反対である必要があります。 したがって、チェック ボックスは、オプションのオンとオフの切り替え、または項目の選択または選択解除にのみ使用する必要があります。
のスクリーン ショット
チェック ボックスの一般的なグループ。
手記
レイアウト に関連するガイドラインについては、別の記事で説明します。
これは適切なコントロールですか?
決定するには、次の質問を検討してください。
このチェック ボックスは、オプションのオンとオフの切り替え、または項目の選択または選択解除に使用されますか? そうでない場合は、別のコントロールを使用します。
選択された状態とクリアされた状態は明確で明確な反対の状態ですか? そうでない場合は、 ラジオ ボタンまたは ドロップダウン リスト を使用して、状態に個別にラベルを付けることができます。
グループで使用する場合、グループは独立した選択肢で構成され、どのユーザーから 0 個以上を選択できますか? そうでない場合は、オプション ボタンやチェック ボックス ツリー ビュー など、依存する選択肢のコントロールを検討してください。
グループで使用する場合、グループは依存する選択肢で構成され、どのユーザーから 1 つ以上を選択する必要がありますか? その場合は、チェック ボックスのグループを使用し、どのオプションも選択されていない場合にエラーを処理します。
グループ内のオプションの数は 10 以下ですか? 使用される画面領域はオプションの数に比例するため、チェック ボックスの数は 10 個以下にしてください。 10 個を超えるオプションの場合は、チェック ボックス リストを使用します。
ラジオ ボタンの方が適していますか? チェック ボックスは、オプションのオンとオフの切り替えにのみ適している場合は、ラジオ ボタンを使用して完全に異なるオプションを使用できます。 両方の解決策が可能な場合:
クリアされたチェック ボックスの意味が完全に明確でない場合は、ラジオ ボタンを使用します。
不正解:
横向きスクリーン ショット
この例では、[横] からの反対の選択肢が明確でないため、チェック ボックスは適していません。
正解:
2 つのラジオ ボタンスクリーン ショット
この例では、選択肢は反対ではないため、ラジオ ボタンの方が適しています。
チェック ボックスを使用できる場合でも、ウィザード ページのラジオ ボタンを使用して代替手段をクリアします。
十分な画面領域があり、その画面領域を十分に使用するには、オプションが十分に重要な場合は、ラジオ ボタンを使用します。 それ以外の場合は、チェック ボックスまたはドロップダウン リストを使用します。
不正解:
の比率ボタンを表示しない表示のスクリーン ショットこの例では、オプションはラジオ ボタンを使用するのに十分な重要ではありません。
正解:
メッセージする
この例では、チェック ボックスは、この周辺機器オプションの画面領域の効率的な使用です。
ウィンドウに他のチェック ボックスがある場合は、チェック ボックスを使用します。
このオプションでは、データではなくプログラム オプションが表示されますか? オプションの値は、コンテキストやその他のデータに基づくべきではありません。 データの場合は、チェック ボックス リストを使用するか、複数選択リスト します。
使用パターン
チェック ボックスには、いくつかの使用パターンがあります。
| 使い | 例 |
|---|---|
|
個々の選択肢 1 つのチェック ボックスを使用して、個々の選択肢を選択します。 |
ラベルする 1 つのチェック ボックスは、個々の選択に使用されます。 |
|
独立した選択肢 (0 個以上) 0 個以上の選択肢から選択するには、チェック ボックスのグループを使用します。 |
ラジオ ボタンなどの単一選択コントロールとは異なり、ユーザーはチェック ボックスのグループ内のオプションの任意の組み合わせを選択できます。
チェック ボックスのグループは、独立した選択肢に使用されます。 |
|
依存する選択肢 (1 つ以上) チェック ボックスのグループを使用して、1 つまたは複数の選択肢のセットから選択することもできます。 |
、1 つまたは複数の依存する選択肢の選択表す必要がある場合があります。 microsoft?windows にはこの種類の入力を直接サポートするコントロールがないため、最適な解決策は、チェック ボックスのグループを使用し、どのオプションも選択されていない場合にエラーを処理することです。
少なくとも 1 つのプロトコルを選択する必要があるチェック ボックスのグループが使用されます。 |
|
選択が混在 選択された状態とクリアされた状態に加えて、チェック ボックスには複数の選択が混在した状態になり、一部のオブジェクトではなく一部のオブジェクトに対してオプションが設定されていることを示します。 |
混合状態のチェック ボックス。 |
ガイドライン
全般
グループ関連のチェック ボックス。 必要に応じて複数のグループを使用して、関連するオプションを結合し、関連のないオプションを 10 以下のグループに分割します。
関連するチェック ボックスと関連のないチェック ボックスのスクリーン ショットを
関連する独立したオプションのグループの例。
グループ ボックスを使用してチェック ボックスのグループを整理し直、多くの場合、不要な画面が乱雑になります。
関連するオプションをグループ化したり、最も一般的なオプションを最初に配置したり、他の自然な進行に従ったりするなど、論理的な順序でのチェック ボックスを一覧表示します。 アルファベット順は言語に依存するため、ローカライズできないため、推奨されません。
水平方向にではなく、チェック ボックスを垂直方向に配置します。 水平方向の配置は読みにくいです。
正解:
垂直方向に配置されたチェック ボックスのスクリーン ショットを
この例では、チェック ボックスが正しく配置されています。
不正解:
この例では、水平方向の配置は読みにくいです。
3 番目の状態を表すために混合状態を使用しないでください。 混合状態は、すべての子オブジェクトではなく一部の子オブジェクトに対してオプションが設定されていることを示すために使用されます。 ユーザーは、混合状態を直接設定することはできません。つまり、混合状態は子オブジェクトのリフレクションです。 混合状態は、個々の項目の 3 番目の状態としては使用されません。 3 番目の状態を表すには、代わりにラジオ ボタンまたはドロップダウン リストを使用します。
不正解:
のスクリーン ショットこの例では、混合状態は、Theme サービスがインストールされていないことを示すことになっています。
正解:
3 つのオプションスクリーン ショット
この例では、ユーザーは 3 つの明確なオプションの一覧から選択できます。
[混合状態] チェック ボックスをクリックすると、選択されているすべての状態、すべてクリアされた状態、および元の混合状態が循環します。 許可のためには、設定が複雑であるか、ユーザーに不明な可能性があるため、元の混合状態を復元できることが重要です。 それ以外の場合は、混在状態を確実に復元する唯一の方法は、タスクを取り消してやり直す方法です。
進行状況インジケーターとしてチェック ボックスを使用しないでください。 代わりに、進行状況インジケーター コントロールを使用してください。
不正解:
進行状況スクリーン ショット
この例では、チェック ボックスが進行状況インジケーターとして正しく使用されていません。
正解:
部分的に塗りつぶされた進行状況バーのスクリーン ショットを
一般的な進行状況バーの例。
正しい選択状態を使用して無効になっているチェック ボックスを表示します。 ユーザーが変更できない場合でも、無効になっているチェック ボックスは情報を伝達するため、結果と一致する必要があります。
不正解:
この例では、オプションが無効になっているとセクションが読み上げられないため、[このセクションを常に読み上げる] オプションをオフにする必要があります。
チェック ボックスの選択を使用してしないでください。
- コマンドを実行します。
- 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を収集します。
- 選択したコントロールに関連する他のコントロールを動的に表示します (スクリーン リーダーはそのようなイベントを検出できません)。
この <項目を再度表示> しない
- [この <項目を再び表示しない] オプションを使用して>、より適切な代替手段がない場合にのみ、ユーザーが定期的なダイアログ ボックスを表示しないようにすることを検討してください。 ユーザーが本当にダイアログを必要としているかどうかを事前に判断してみてください。表示する場合は常にダイアログを表示し、表示しない場合はダイアログを削除します。
その他のガイドラインと例については、「ダイアログ ボックスの」を参照してください。
下位コントロール
下位コントロールをチェック ボックスとそのラベルの右側または下 (インデント、チェック ボックス ラベルでフラッシュ) します。 チェック ボックスのラベルをコロンで終了します。
チェック ボックス ラベルする
この例では、チェック ボックスとその下位コントロールは、チェック ボックス ラベルとそのアクセス キーを共有します。
依存する編集可能なテキスト ボックスとドロップダウン リストは、チェック ボックスのラベルを共有する場合は有効のままにします。 ユーザーがボックスに何かを入力または貼り付けると、対応するオプションが自動的に選択されます。 これにより、操作が簡略化されます。
ヘッダーとフッターのテキスト ボックスのスクリーン ショットを
この例では、ヘッダーまたはフッターを入力すると、オプションが自動的に選択されます。
オプション ボタンまたはその他のチェック ボックスを使用してチェック ボックスを入れ子にする場合は、高度なオプションが選択されるまで、これらの下位コントロール無効にします。 これにより、下位コントロールの意味に関する混乱が回避されます。
下位コントロールを、タブ オーダーのチェック ボックスと連続するチェック ボックスにします。
オプションを選択すると下位チェック ボックスの選択が意味する場合は、これらのチェック ボックスを明示的に選択してリレーションシップをクリアします。
不正解:
この例では、下位チェック ボックスは選択されていません。
正解:
この例では、下位チェック ボックスがオンになり、選択したオプションとのリレーションシップがオフになります。
代替手段で不要な複雑さが場合は、依存チェック ボックスを使用します。 チェック ボックスは独立したオプションにする必要がある一方で、ラジオ ボタンなどの代替手段によって不要な複雑さが増すことがあります。
正解:
この例では、ラジオ ボタンの使用は正確ですが、不要な複雑さが生まれます。
良い:
する
この例では、チェック ボックスの使用が簡単になり、ユーザーは複雑な関係ではなく目的のオプションを選択することに集中できます。
重要: このガイドラインは、非常にまれな状況にのみ適用します。依存関係を表示すると、明確さを加えることなく大幅に複雑になります。 前の例では、ユーザーが上付き文字と下付き文字の両方を選択しようとする可能性は低く、選択した場合は、排他的なオプションであることが簡単に理解できます。
既定値
- ユーザー オプションのチェック ボックスがオンになっている場合は、最も安全な状態 (データまたはシステム アクセスの損失を防ぐために) を設定 、既定で最も安全でプライベートな状態を設定します。 安全性とセキュリティが要因でない場合は、最も可能性の高い値または便利な値を選択します。
推奨されるサイズ設定と間隔
推奨されるチェック ボックスのサイズ設定と間隔の図
チェック ボックスのサイズ設定と間隔をお勧めします。
ラベル
チェック ボックスのラベル
すべてのチェック ボックスにラベルを付けます。
文形式の大文字を使用します。
ラベルを語句または命令文として記述し、終了句読点を使用しません。
- 例外: チェック ボックス のラベルが、その後の下位コントロールにもラベルを付ける場合は、ラベルをコロンで終了します。
選択したチェック ボックスの状態を説明するようにラベルを書き込みます。
チェック ボックスのグループの場合は、並列フレージングを使用し、すべてのラベルの長さを同じにしてください。
チェック ボックスのグループの場合は、オプション間の違いにラベル テキストをフォーカスします。 すべてのオプションに同じ入門テキストがある場合は、そのテキストをグループ ラベルに移動します。
正のフレージングを使用します。 チェック ボックスをオンにするとアクションが実行されないようにラベルをフレーズしないでください。
- 例外:この <項目> チェック ボックス 再度表示しないでください。
不正解:
この例では、オプションでは正のフレージングは使用されません。
ラベルを含むオプションのみを説明します。 メッセージやドキュメントでラベルを簡単に参照できるように、ラベルを簡潔にします。 オプションでさらに説明が必要な場合は、完全な文と終了句読点を使用して、の静的テキスト コントロールに説明を入力します。
手記
グループ内の 1 つのチェック ボックスに説明を追加しても、グループ内のすべてのチェック ボックスの説明を指定する必要はありません。 可能な場合はラベルに関連情報を入力し、必要な場合にのみ説明を使用します。 一貫性を保つためのラベルを単に修正しないでください。
チェック ボックス、ラベル、説明のする
この例では、チェック ボックス ラベルの下に説明テキストが追加されています。
オプションを強く推奨する場合は、ラベルに "(recommended)" を追加することを検討してください。 補足ノートではなく、必ずコントロール ラベルに追加してください。
複数行ラベルを使用する必要がある場合は、ラベルの上部をチェック ボックスに合わせます。
下位コントロール、それに含まれる値、または単位ラベルを使用して文やフレーズを作成しないでください。 文の構造は言語によって異なるため、このような設計はローカライズできません。
不正解:
この例では、テキスト ボックスがチェック ボックス ラベル内に正しく配置されていません。
チェック ボックスグループラベル
グループ ラベルを使用して、選択方法ではなく、グループの目的を説明します。 ユーザーがチェック ボックスの使用方法を知っていることを前提としています。 たとえば、"次のいずれかの選択肢を選択してください" と言ってはいけません。
各ラベルをコロンで終えます。
ラベルにアクセス キーを割り当てないでください。 そうする必要はありませんし、他のアクセス キーの割り当てを困難にします。
1 つ以上の依存する選択肢を選択する場合は、ラベルの要件について説明します。
正解:
この例では、ユーザーは 1 つの選択しかできないと考える場合があります。
良い:
ラベルの
を選択するこの例では、ユーザーが複数の選択を行うことができることは明らかです。
ドキュメンテーション
チェック ボックスを参照する場合:
大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーのアンダースコアやコロンは含めないでください。 単語のチェック ボックスを含めます。
チェック ボックスは、ローカライザーに対してあいまいであるため、オプション、チェック ボックス、または単一ボックスではなく、チェック ボックスとして参照してください。
ユーザーの操作について説明するには、select と clear を使用します。
可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
例: [下線 ] チェック ボックスをオンにします。