web-dev-qa-db-ja.com

不確定な状態のチェックボックスをクリックすると、チェックボックスをオンにするか、オフにする必要がありますか?どうして?

以下に、不確定な状態の親チェックボックスを含むチェックボックスグループの例を示します。 Tall Thingsツリーの子ノードの一部が選択され、一部は選択されないため、Tall Thingsは不確定な状態で表示されます。

Indeterminate example

ユーザーが不確定なチェックボックスをクリックすると、どうなりますか?チェックボックスをオンにするか、オフにする必要がありますか?さらに重要なのはなぜですか?

3
Daniel De Laney

これは非常に一般的な問題であり、これを表示するには、次の3つの状態を使用します。

  • チェック済み(通常の「チェックマーク」記号)
  • 未チェック(空のボックス)
  • 部分的にチェック(いくつかの異なるアプローチのティック、通常は灰色のボックスまたは異なる不透明度または色の違い)

ライブアクションの例は Checkboxes で確認できます。

根拠は本当に簡単です:

  • ドロップダウンのすべてのサブアイテムが選択されている場合、ドロップダウンチェックボックスはcheckedステータスを使用します
  • ドロップダウンのサブアイテムのどれも選択されていない場合、ドロップダウンチェックボックスはuncheckedステータスを使用します
  • ドロップダウンのいくつかのサブアイテムが選択されている場合、ドロップダウンチェックボックスは部分的にチェックされたステータスを使用します

いくつかの視覚的なサンプル:

enter image description hereenter image description hereenter image description hereenter image description here

編集:

**ユーザーが不確定なチェックボックスをクリックすると、どうなりますか?チェックボックスをオンにするか、オフにする必要がありますか? **

これは3つの状態のケースであるため、提供されているライブサンプルとグラフィカルサンプルで示されているように、すべてをチェック/チェック解除する必要があります。

さらに重要なのはなぜですか?

上記の部分的なステータスのため、サブアイテムはメインツリーブランチ(部分的または全体的な状態)に影響を与えるため、メインブランチをチェックするとすべてのブランチに影響します

2
Devin

私はそれを「すべてチェック」と見なしました(その後のクリックですべてクリアされます)。ほとんどの人にとって最も意味のあるチェックオールの規約があるので、「最善の方法」はそのようにすることです。

最終的に、2つの直感的な選択肢は、「すべてをチェック」と「すべてをチェック解除」です。

どちらが良いですか?まあそれは両方の方法で議論することができると確信していますが、結局それは議論の余地があります。ユーザーは、どちらの結果も、そして希望の目標を達成するために何をすべきかを非常に素早く直感的に理解できます。

1
InfernalRapture