チェックボックスまたはラジオボタン：1つまたはゼロの選択肢のみ
ユーザーが一連の多肢選択式の質問に答える必要があるクイズタイプのWebアプリケーションを構築しています。ラジオボタンとチェックボックスのどちらを使用するかを決定する必要があります。
ラジオボタンとチェックボックスの標準的な規則に精通しています。
ラジオボタンは、相互に排他的な2つ以上のオプションのリストがあり、ユーザーが1つだけ選択する必要がある場合に使用されます。つまり、選択されていないラジオボタンをクリックすると、以前にリストで選択されていた他のボタンの選択がすべて解除されます。
チェックボックスは、オプションのリストがあり、ユーザーが0、1、またはいくつかを含む任意の数の選択肢を選択できる場合に使用されます。つまり、各チェックボックスはリスト内の他のすべてのチェックボックスから独立しているため、1つのボックスをオンにしても他のチェックボックスはオフになりません。
ただし、私の特定のアプリケーションでは、ユーザーはオプションを1つだけ選択するか、まったく選択しない場合があります（つまり、ユーザーは複数のオプションを選択することはできません）。言い換えると、ユーザーがskip彼女が関連性がないと考える質問は完全に問題ありません。
関連する詳細-すべての質問が単一のスクロールするページに一度に表示されます（つまり、「次へ」または「スキップ」ボタンはありません。ユーザーは下にスクロールして、自分に関連する質問に答え、それらをスキップしますそうではありません。
だから-私は3つのオプションを考えることができます：
ラジオボタンを使用して、「選択なし」、「関連なし」などのラベルが付いた各質問に追加の選択肢を含めます。
チェックボックスとJavaScriptを使用して、2番目のチェックボックスを選択した場合、最初のチェックボックスが選択解除されるようにします。
ラジオボタンとJavaScriptを使用して、選択の選択を解除できるようにします（たとえば、もう一度クリックすると、SurveyMonkey.comがこれを行います）。
オプション＃1の大きな問題は、多くの混乱と不必要な残骸が追加され、リストがスキャンされにくくなることです（つまり、回答していない質問を確認することが難しくなります）。また、たとえそうであっても、質問を完全にスキップするように見えます問題ありません。
オプション＃2の大きな問題は、複数のオプションを選択できることを誤解を招くように提案することです。
オプション＃3の大きな問題は、非表示の動作が含まれることです（たとえば、選択したラジオボタンをクリックして選択を解除するなど）。
これはかなり一般的な要件でなければならないので、ベストプラクティスは何なのかと思います。
どちらでもない。
- クラシックラジオボタンは、必須の単一選択を対象としています。ラジオボタンはクリックするのが難しく、ラベルをクリックできるかどうかがはっきりしない（または一貫していない）ため、私はラジオボタンがあまり好きではありません。
- クラシックチェックボックスは、単一のオン/オフを選択するためのものです。
ボタングループは、選択肢が1つまたはゼロの状況で使用されることがあります。
![button group]()
しかし、あなたの場合...
- ページ上に多くの質問があるため、ボタングループの境界を視覚的に処理することは困難です（乱雑に）。
- ユーザーが回答の選択を解除できるようにする必要があるため、クラシックラジオボタンは適切なオプションではありません。 「無回答」の選択肢を追加すると、不必要な認知負荷が生じる可能性があります。
- チェックボックスは機能しますが、それらがどのように関連しているかを明確にする必要があります（つまり、1つをクリックすると別の選択が解除されます）。
これへのアプローチ...
ハイブリッドを使用することです。次に、2つのコントロールの例を示します。
- 大きい/使いやすい。
- ユーザーが（a）もう一度クリックしてオプションの選択を解除できることをユーザーが理解できるようにするために、クラシックラジオボタンやチェックボックスのように見えないように意図的に設計されています。 （b）1つの回答をクリックして別の回答の選択を解除したときに驚くことはほとんどありません。
- 一緒にグループ化され（異なるフォント、インデント）、回答グループに空間的なグループ化/孤立化を提供し、それらが関連していることを明確にします。
- 質問の長いページを落ち着かせるという点ではかなりうまくいきます。
チェックボックスは選択解除のアフォーダンスをよりよく伝えるので、私は左の方を好みます。チェックシンボルは肯定的な肯定に関連付けられることが多いため、質問に偏りが生じる可能性があることに注意してください。
これは、「上記のいずれでもない」オプションを試みているようです。リストの最後にある単純なラジオボタンオプションで十分です。物事を複雑にする必要はありません。
例えば.
次のうちどれが動物ですか？
（ ） 木
（ ） 車
（）電波
（o）上記のいずれでもない
ボタンに各選択肢を配置し、ボタンに独特のくぼんだ画像とくぼみのない画像を許可することを検討しましたか？オプション3で説明するようにJavascriptをコーディングすると、ユーザーは提供されたオプションの1つから0を選択できます。一方、ボタンを使用すると、隠された動作がより直感的になります。
ユーザーがボタンを使用して1つの質問から別の質問/ページに移動することを想定しているので、コールは「次へ」です。
チェックボックス/ラジオボックスが選択されていないときまで、ボタンの名前を「スキップ」に変更するだけです。ユーザーが少なくともオプションを選択するとすぐに、ボタンは「次へ」に変わります。
注：ラジオ/チェックボックスには、標準の規則のみを使用してください。
これで問題が解決することを願っています。そして、私が何かを誤解した場合、plzは私に教えます。
Typeformと同じように実装できます。答えたくない質問をスクロールしてスキップし、ラジオボタンとチェックボックスのデフォルトの動作を維持します。