web-dev-qa-db-ja.com

有効化/無効化-単一のチェックボックスまたは2つのラジオボタン？

私はかなり技術的なユーザー-エンジニアなどを対象とするシステムに取り組んでいます。システムはいくつかのウィンドウで構成され、それぞれがシステム内のオブジェクトを構成（作成/編集）するオプションをユーザーに提供します。各オブジェクトには多くの属性があり、サブオブジェクトの関連性に応じて異なるパネルに分散されます。各パネルは、一部が有効/無効タイプの属性のリストで構成されています。最後は通常、オブジェクトの一部の属性のオン/オフ状態を表します。

私の質問は次のとおりです。これらの有効化/無効化オプションの場合、推奨される方法は何ですか。1つのチェックボックスまたは2つのラジオボタンですか。または、それらの組み合わせは属性に依存しますか？

いくつかの例：

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

checkboxesradio-buttonsstates
8
Assimiz

私は、GUI標準と公式のW3C Web標準のルールを採用します。

  1. ラジオボタンは、相互に排他的な2つ以上のオプションのリストがあり、ユーザーが1つだけ選択する必要がある場合に使用されます。つまり、選択されていないラジオボタンをクリックすると、以前にリストで選択されていた他のボタンの選択がすべて解除されます。

  2. チェックボックスは、オプションのリストがあり、ユーザーが0、1、またはいくつかを含む任意の数の選択肢を選択できる場合に使用されます。つまり、各チェックボックスはリスト内の他のすべてのチェックボックスから独立しているため、1つのボックスをオンにしても他のチェックボックスはオフになりません。

  3. スタンドアロンのチェックボックスは、ユーザーがオンまたはオフにできる単一のオプションに使用されます。

Nielsen Norman Groupから チェックボックスとラジオボタン

10
Samuel M

ラジオボタンは、ユーザーに認知的負荷を追加し、追加の明確さを提供せずにインターフェイスを乱雑にします。

このアプローチを使用すると、明快さを向上させ、混乱をさらに減らすことができます。

Enable:
[] Administrative state
[] Graceful restart
[] Default route
[] Multiple paths
4
Eric Stoltz

チェックボックスグループは、デフォルトの状態ではなくオプションであることを意味します。ユーザーにデフォルトの状態を表示する場合、これは適切な方法ではありません。ラジオボタンを使用する最初のグループは、より良い使用法です。 iOS設定ページでは、トグルスイッチを使用して、何かが有効か無効かを示します。あなたが説明しているこのユースケースを示す最良の方法のようです。

1
thomasyung

サミュエルの答えを簡略化して言い換えるには：

twoオプションのうちoneの場合は、1つのチェックボックスを使用します。というか、バイナリの選択。

選択肢が[〜＃〜] x [〜＃〜]オプションのうちoneの場合は、ラジオボタンを使用します。

[〜＃〜] x [〜＃〜]オプションのうち[〜＃〜] y [〜＃〜]の場合、Xチェックボックスを使用します。これは実際には複数の選択オプションを持つ単一のオプションではなく、個別に選択できるオプションのseriesです。

いつものように、例外があります。むしろ合併症。 2つのオプションのうちの1つがある場合でも、ラジオボタンを使用することをお勧めします。オプションが「フライドポテトのおかず」の場合は、チェックボックスをオンにすることは理にかなっています。あなたはそれを欲するか、あるいはおかしが欲しくない。何かか無か。

しかし、オプションが「サイドディッシュサラダまたはフライドポテト」の場合...チェックボックスの意味はどれですか。 2つのラジオボタンのセットにより、どちらが選択されているかがより明確になります。追加の利点として、レストランがサイドディッシュとして揚げ物、サラダ、ガーリックブレッドを食べたい場合に、将来の拡張のためにより良いオプションを提供します。

しかし、あなたの例では、すべてのオプションは機能の有効化または無効化に関するものです。チェックボックスを使用してください。

1
PixelSnader