2つの項目の選択肢を提供し、両方を選択することがオプションである場合、チェックボックスまたはラジオボタンを使用する方が良いですか？
ここに示す2つのオプション。両方のタイプを使用できます。どちらにも長所と短所があります。どっちがいいですか？
チェックボックスを使用して一貫性を保つ
ラジオボタンは通常、相互に排他的なオプションを表現します（これのどちらかOR that）なので、アイテムを含むが同時に除外するオプションを指定すると一貫性がなくなります。
チェックボックスとは異なり、それは1つだけ選択してください、それ以上でも以下でもありません。チェックボックスを使用して複数のアイテムを選択します（this AND that）がそうです。また、noneを選択できます。
新しいオプションを追加する必要がある場合があることを覚えておいてください。ラジオボタンを使用する場合、「両方」は意味がなくなり、このコントロールを再設計する必要があります（また、大幅な改善でない限り、ユーザーは変更を嫌うを覚えておいてください）。問題ではないチェックボックスを使用します。「両方」オプションは、それ自体では何かを表現しないため、より多くの認知的負荷があります、それは別のアイテムへの参照なので、-state直接表示されません。さらに、+ 1要素をUIに追加します。
これを改善する方法は、古典的な単一選択の質問の場合と同様に、「顧客+アイテム」または「すべて」というラベルに明示的に名前を付けることです。この場合、「Answer D：「以前のすべての答えは正しい」または「AとCは正しい」。
とにかく、答えが相互に排他的でない場合は、ユーザーのショートカットとして「すべて」チェックボックスを追加できます選択状態の可視性を失うことなく。 Gmail Inbox のようなテーブルのようなコンポーネントで使用される同様のアプローチがあり、「すべて選択」チェックボックスがあります。どちらも要件に適合できるユースケースがあり、それぞれに長所と短所があり、混乱を少なくするためにユーザーテストを実際に行う必要があります。非常に特殊な使用例については この質問 を参照してください。
他のさまざまな回答に記載されているように、適格なオプションとその組み合わせを明示することに加えて、ラジオボタンが望ましい別の使用例があります。
オプションが概念的に互いに独立していて、両方のオプションを選択することがオプションの単なる追加を意味する場合、2つのチェックボックスで問題ありません。ただし、両方のオプションを選択すると、結果がどういうわけかマージオプションになる場合、3つのラジオボタンの方が適しています。
これは「ソフトな」定義であり、確かに境界線の場合があります。ただし、2つの例で見られる微妙な違いについて説明します。
- 何かを注文すると、オンラインストアの忠実な顧客として最大2つのギフトが提供される場合があります。 「ギフト1」と「ギフト2」という2つのチェックボックスをそれぞれ取得した場合、両方のチェックボックスをオンにすると、2つの小包が取得されると予想されます。一方、「ギフト1」、「ギフト2」、「両方」の3つのラジオボタンから選択し、「両方」を選択した場合、両方のギフトを含む1つの小包が届くと思います。
- いくつかの休日の手配を予約するときに、「フライト」と「ホテル」の両方のチェックボックスをオンにすると、旅行サイトがそれぞれ個別に予約し、2つの別々のチケット/バウチャーを取得します。 「フライト」、「ホテル」、「両方」の3つのラジオボタンから「両方」を選択すると、フライトとホテルの両方を含む完全なパッケージが取得されることになります。
具体的な例として、旅行ウェブサイト Expedia は、「クリック＆ミックス」パッケージに対して、3つの相互に排他的なトグルボタンを提供しています。
- フライト+ホテル
- フライト+ホテル+レンタカー
- フライト+レンタカー
これは、Flight + Hotel + Rental Carを選択すると、Flight + Hotelを予約してFlight + Rental Car（この特定のケースでは、これにより2つのフライトが残されることを無視しても）。 フライト+ホテル+レンタカーは、一般的な旅行者のセットと旅行の一般的な日付範囲でのみ機能する複合オファーであり、複合パッケージとして販売されます。
Noneが適格であるという注記：チェックボックスを使用しても、これは通常問題にはなりません。 なしは、特定のコンテキストでの無効性を非常に直感的にユーザーに伝えることができる非常に特殊な状態です。注文するアイテムを選択するときに、注文するアイテムを選択しないと注文プロセスを続行できないという事実に混乱することはほとんどありません。したがって、Okボタンを無効にするか、オプションが選択されていない場合にOkをクリックするとエラーメッセージが表示されることは、ユーザーの期待に反しません。したがって、Noneが有効な選択であるかどうかは、チェックボックスとラジオボタンの間の提示された決定における二次的な要因にすぎません。
一般に、チェックボックスの方が優れています。例外は、以下のすべてが当てはまる場合です。
- 「顧客とアイテムの両方」などを処理するのに十分な画面スペースがあり、2つのチェックボックスではなく3つのラジオボタンがある
- 当然、両方のチェックボックスをクリックするだけではなく、「該当するものすべてをクリックしますが、少なくとも1つはクリックする必要があります」というフレーズを置いても役に立たないWebインターフェイスに不慣れなユーザーをターゲットにしています。
- 「どちらでもない」はオプションではありません。その事実を明確にしたいとします。
NoneがオプションであるがBothはオプションでない場合、同じ議論ができることに注意してください。
良い答えがあり、代替案をまだ探しているなら：
手順1：お客様を表示し、ユーザーにSkipまたは選択
ステップ2：アイテムを表示し、ユーザーにSkipまたは選択
表示の順序はコンテキストによってのみ決定され、usabilityにも影響します。
次々に表示すると、Cognitiveloadが最小限に抑えられます行う選択。
ユーザーを保持するには[〜＃〜]しない[〜＃〜]推測、2番目のオプションはグレー表示されますが、transparent（どのようにモーダルウィンドウに似ています）ユーザーがユーザーに基礎となる画面コンテンツの表示を保持できるようにすることが期待されます）。
プログレッシブ開示 テクニックはこれにかなり適しています。
お役に立てれば。
2つ以上のアイテムがあり、それ自体でアイテムを選択することが合法で、他のすべてのアイテムの組み合わせが有効ではない場合、有効なアイテムのすべての組み合わせにラジオボタンを使用するかどうか、またはチェックボックスを使用しますが、一部の状態が無効である可能性があることを認識してください。 3つ以上のアイテムがある場合、ほとんどの場合、1つのアプローチが他のアプローチよりも明らかに優れています（ラジオボタンの選択肢が多すぎるか、チェックボックスの有効性条件が有効な組み合わせのリストよりも理解しにくいためです） ）。アイテムがちょうど2つある場合、フォームで他に何が行われているのかに応じて、どちらのアプローチも合理的です。
「なし」と「両方」の両方が有効な組み合わせである場合は、チェックボックスの方が適していると考えられます。 「なし」が有効な組み合わせではなく、有効なフォームのチェックボックスをクリックするとフォームが無効になる可能性があることを受け入れても、チェックボックスの方が優れている場合があります。ただし、有効なフォームをクリックしてフォームを（変更される可能性のある）有効な状態のままにする必要がある場合は、チェックされているアイテムのみをクリックすると、やや厄介な状況が発生します。 Xが最初にチェックされ、Yが最初にチェック解除され、ユーザーがXをチェック解除してYをチェックしたい場合、YがチェックされるまでXが何もしないのは厄介ですが、XがYをチェックするのも奇妙です。 Xをクリックすると、チェックボックスの状態は目に見えて変更されませんが、YをクリックするとXがオフになるようにフラグを設定すると、多くの場合望ましい動作が得られますが、奇妙です。おそらく、Xをクリックすると、チェックボックスがしばらく「暗く」なり、チェックボックスが暗くなっているときにYをクリックすると、チェックが外れますが、それはかなり珍しいことです。
「なし」が有効な選択肢であるが「両方」は有効でない場合、チェックボックスの状況は少しうまく機能します。ユーザーインターフェイスのガイドラインでは、このような動作に特に微笑むことはないかもしれませんが、チェックボックスをクリックするという行為が、新しい選択と互換性のないチェックボックスを自動的にオフにすることは珍しくありません。クリックされているチェックボックスがクリックの間、それ自体を強調表示する場合、影響を受けるすべてのチェックボックスも同様に動作するはずです。その振る舞いは現在のシナリオには適していないように見えますが、条件の表現が逆になっている可能性があります。
チェックボックスは、ユーザーが選択しやすい簡単な条件でより優先されます。ドロップダウンリストボックスに3つのオプションを指定することもできます。 Customer、ItemおよびBothも。
TLDR：要件によって異なります。
提供した2つのスクリーンショットの間には、まったく異なる機能があります。ラジオボタンの場合、1つ（1つのみ）を選択する必要があり、選択できます。ただし、チェックボックスについては、何も選択しないこともできます。
ユーザーが少なくとも1つのオプションを選択する必要があると仮定すると、ラジオボタンの方が適しています。ユーザーがオプションを自由に選択できると仮定すると、チェックボックスの方が適しています。
一般的なガイドラインについては、ラジオボタンは競合する選択肢がある場合にのみ使用するのが理想的です。最初の例の場合、これは正しくありません。私はそれを2つの単純な小さな形に書き直すことをお勧めします：
Customer: yes - no
Item: yes - no
チェックボックスを選択すると、現在の例で問題ありません。
ユーザーに視覚的なフィードバックを与えることは決して害にならないことに注意してください！どちらを選択しても（ラジオまたはチェック）、フォームの下に、選択した選択肢の簡単な概要が表示されます。
チェックボックスの例：
Wrap my order in giftpaper: yes
Include the order confirmation with the package: no
Sent me updates on the status of my order: yes
ギフトペーパーで注文を包むことを選択し、注文ステータスの最新情報を受け取りたい。パッケージには注文確認は含まれません。
このような解決策は、実装するのに少し手間がかかりますが、正しく実行された場合（適切な文の構成で）、平均的なユーザー/顧客が選択を検証するのが非常に簡単になります。
読みやすくするために、最初にすべてのポジティブをリストし、次にすべてのネガティブをリストする必要があります。それらを互換的に使用すると、ユーザー/顧客を混乱させる可能性があります。
現在、オプションa、b、またはその両方があります。オプション1の場合は3行、オプション2の場合は2行になります。大きな違いはありませんか。
あなたのサイトが拡大していて、サードパーティの小売業者を追加しているため、6か月後に別の商品を小売業者などのリストに追加するとします。
これで、オプション1を使用すると、7行になります-顧客;小売業者;品目;顧客と小売業者;顧客と品目;小売業者と品目;すべて3.オプション2では、2行から3行に増加します。
次に、サイトにレビューを追加することを決定し、それらを検索します。オプション2は、3行ではなく4行になります。オプション1は、計算するのが面倒な数です。
ほぼ等しい2つのオプションを決定する場合は、最終的に必要になる可能性があるため、スケーリング可能なオプションを選択しないでください。
@rewobsは、コントロールを選択する理由と方法について貴重な洞察を提供してくれました。
選択肢についてはすでに多くのことを書いて言っていますが、私が選択しなければならない場合は、「チェックボックス」を使用します。パラメータに基づいて、利用可能なオプションを1つまたはすべて選択するため（「上記のすべて」）（含めるのは適切ではないと考えます）
スペースの節約、革新的な相互作用、使いやすさの点で役立つコントロールを使用することもできます。試す選択2
従来のチェックボックスコントロールの改善されたバージョンと強化されたバージョンを提供します。
例を見てください を使用すると、いくつかの考えを引き起こすことができます。
質問と添付画像に基づいて、ユーザーにオプションを提供します。そして、私はこの種の要件については、チェックボックスがユーザーにとってより適切で直感的であると信じています。そして視覚的に、何かをチェックすることはオプションにもっと関連しています。
一方、ラジオボタンは、要件の切り替え（何かのオン/オフ）に適しています。私見では。