web-dev-qa-db-ja.com

何が良いですか:はい/いいえラジオ、または単純なチェックボックス?

私の会社のWebサイトの非常に大きなフォームでは、Yes / Noラジオボタンの組み合わせを使用する傾向があります。

enter image description here

私はそれを使用しないという1つの引数を考えることができますが、それはUX関連ではありません:nulltrueおよびfalseの2つではなく3つの状態を維持する必要がありますそれらのフィールド。

代わりに、UXに関して、チェックボックスを使用するための引数はありますか?

enter image description here

編集:3つのケースすべてをカバーする必要はありません。nullケースは単なる初期状態であり、「はい」または「いいえ」のいずれかを選択せず​​にフォームをさらに進むことは不可能であるため、メンテナンスが困難です言及。

103
wscourge

質問が必須かどうかによって異なります。ユーザーが質問に確実に回答したい場合は、ラジオボタンが必要です。空のチェックボックスを使用すると、ユーザーがこの質問を忘れたかどうかはわかりません。

234
denR89

正しい答えは1つではありませんが、コントロールはコンテキストによって異なります。

チェックボックスは混乱を最小限に抑えるのに適していますが、その使用は、説明された選択が明らかに反対の意味を持っている場合に限定されます(言及する必要はありません)。

[X] include subdirectories

ラジオボタンは、何かをより明確にする場合や、選択肢に個別の説明が必要な場合に適しています。

Overwrite files when copying (cannot be undone):

(•) Yes, overwrite   ( ) No

ラジオボタンは、選択を行わずに開始するのに最適なコントロールでもあります。

ドロップダウンメニュー(まだ2つの選択肢がある)は、ユーザーが通常変更すべきでない選択肢などに適しています。他の選択肢は表示されず、変更には2回のクリックが必要です。

Format drive for the following file system:   exFAT32 ▼

(開いた後、もう1つの選択肢はNTFSです)。

もちろん、これらだけが基準ではありません。同様のコントロールの一般的なクラスターが既にある場合は、それらを一致させるために別のクラスターを追加します。または、使用する主要なコントロールタイプを規定するのはレイアウトです。たとえば、一部のオプションは、テーブルに配置されているとより取得しやすくなります。また、選択肢に複数行のラベルまたはアイコンを追加する必要がある場合があります。これは、使用するコントロールを意味します。

したがって、選択はあなた次第であり、目標はUIを合理化することですが、重要な選択を明示的にすることや他のいくつかはユーザーの邪魔になります。

81
miroxlav

チェックボックスを使用する理由は次のとおりです。

  • 視覚的に簡潔です(ラジオボックスと画面​​スペースが大きくなります)
  • それは仕事を成し遂げるために最低限必要なものです
  • これはクラシックなUIウィジェットであり、人々はそれに精通しています(これはラジオボックスにも適用されます)
  • フォームの紙のバージョンは同じように見えます(一部の紙の調査ではラジオボックスを使用しています)

ラジオボックスは、州が2つ以上ある場合に適しています。たとえば、調査では{yes, no, I don't know, prefer not to say}yes以外のオプションのニュアンスを区別するため。

このインターフェースを作った前の世代の人々に、ラジオボックスの使用の根拠について尋ねると役立つでしょう。多分それには正当な理由があるかもしれませんが、それは文書化されていません。

22
ralien

すべてのユースケースを本当にカバーする必要がある場合:

  • チェックマークは2つのケースしかカバーできないため、機能しません。
  • ラジオボタンでカバーする必要がありますが、3番目のオプションがありません。 「言わないほうがいい」という言葉。誤って何かを選択すると現在の設定が壊れるので(ただし、その外観から、おそらくラジオボタンのチェックを外すことをサポートしていますか?)、これは良い習慣ではないと思います。

さらに洞察が必要な場合は、Norman Groupの この興味深い記事 のラジオボタンを読んでください。

14
rojcyk

チェックボックスは、選択を選択または確認するために使用されます。 「あなたは...を持っていますか?」という質問は選択肢を提供していないため、チェックボックスは質問には適用されません。質問だけを選択するようにも見えます。

したがって、選択肢を提示する必要があります-はいまたはいいえ。次に、チェックボックスを使用して選択肢を選択します。

6
Rob

@hsanの質問へのコメントは重要です。ユーザーが本当に「いいえ」を回答することを意図していることを確認する必要がある場合は、ユーザーが積極的に選択する必要があるため、フォームが送信されるまでフォームは送信できません。 。

このため、「選択してください」という最初のオプションが無効になっている選択コントロールが適切に機能します。 https://codepen.io/anon/pen/LaZzzP

<label for="mandatory-yes-no">Do you need the thing?</label>
<select id="mandatory-yes-no">
  <option disabled selected> Please select</option>
  <option> Yes </option>
  <option> No </option>
</select>

デフォルトの状態を有効な「選択」にすることで、ユーザーが見落としている、または考慮していないというリスクがあります。そのリスクが許容可能か望ましいかは状況によって異なります。

4
Beejamin

特定のケースでは、デフォルトで選択されている3番目の「N/A」オプションを追加する必要があるようです。

チェックボックスの使用とラジオの使用については、ユーザーが最初にフォームを入力したときにフィールドが「そのまま」の状態を維持する傾向がある場合に、チェックボックスが適切に機能すると思います。

例えば:

sample of multiple check boxes grouped together

UXデザイナーによる適切なグループ化により、これにより、ユーザーはフォームの関連しない領域をすばやくスキップできます。

ラジオボタンは、使用されていることを示す方法で、空白のままにできるチェックボックスよりも、選択が必要であることを強調しています。

4
mpr

他の多くの答えが言ったように、それは文脈に依存します

ただし、質問の内容だけでなく、ユーザーが質問とその回答についてどの程度考えてほしいかにもよります。ラジオボックスは次に進むためにいくつかのアクションを必要としますが、チェックボックスを上から見ることができます。

DenR89が言うように、チェックボックスが否定的に回答されたか、無視されたかは決してわかりません。時々これは大丈夫です。ユーザーが質問を理解し、正直な回答を提供したことを確認する必要がある場合があります。たとえば、自動車保険アプリケーションでは、ラジオボックスを次の用途に使用できます。

Do you own the car?
( ) Yes ( ) No

これを誤って想定することには法的な意味があるかもしれないので。ただし、次の場合は同じフォームのチェックボックスを使用できます。

[ ] Include breakdown cover

デフォルト(内訳カバーなし)はほとんどの人にとって適切であり、これを逃しても保険証券の有効性には影響しません。

非常に大きなフォーム

人々は非常に大きなフォームに飽き飽きしています。これらの場合は、ラジオボタンを使用することをお勧めします。ラジオボタンを使用すると、質問を読んで選択を迫られ、怠惰なユーザーがチェックボックスをスキップするのを防ぐことができます。

これは、yes/no/nullラジオボックスと単一のチェックボックスについて話しているときにのみ当てはまります。ラジオボックスが最初は「いいえ」の状態にある場合、それは本質的にチェックボックスと同じです。いくつかの質問を次のように置き換えることができる場合:

Do you have:
[ ] Thing 1
[ ] Thing 2
[ ] Thing 3
...

次に、これは完全に異なる質問です。

3
Kichi

私見では

ラジオボタン

  1. ユーザーは単一のオプションのみを選択できる必要があります

    (o)アヒル()グース()復讐のコンドル

  2. いいえ答えは答えではありません。前の例の3つのオプションのいずれかを選択(ラジオボタンをクリック)すると、選択のみを変更でき、選択を解除できません。

チェックボックス

  1. ユーザーは複数のオプションを選択できます

トッピング:[]スイスチーズ[x]ストレンジチーズ[]ミステリーミート[x]ソイレントグリーン

  1. いいえ答えは有効な答えです。つまり、前の例では、トッピングは不要と判断できます。
2
raubvogel

どちらも正しくありません。

ラジオとチェックボックスはどちらもlists用に設計されています。したがって、複数の形容詞(数/量)または名詞(オブジェクト1、2、3)のオプション(少なくとも2つの項目)が要求されるこのような場合に使用されます。

Which of the following do you have?
- Whatever 1
- Whatever 2
- Whatever 3

違いは、ラジオでは選択が1つのオプションのみに制限されるのに対し、チェックリストでは複数のオプションを選択できるということです(つまり、好きな色は何ですか(ラジオ)とどの色が好きですか(チェックリスト))。

リストではなくthisまたはthatステートメントであるため、ラジオやチェックボックスは必要ありません。代わりにボタンが必要です。これは、「これを削除してもよろしいですか?」などの質問に続くソフトウェアでよく見られます。または「このソフトウェアをインストールしますか?」

enter image description here

これはWebフォームであるため、HTMLラジオボタンを使用している可能性があります。オプションを「はい」または「いいえ」でのみ表示しているので、ラジオサークルを非表示にするために、コードを編集します これのように

2
Davbog