いずれかまたは両方の2つのオプションから選択
何かがA、B、またはAとBの両方である選択基準があります。どちらも選択できません。これを構築する簡単な方法を見つけようとしています。不自然な例では、私のオプションは「スターター」、「メインコース」、または両方のコースです。レストランで注文する場合、どちらも持てません。
私はすでにいくつかのアプローチを考えています。
3つのオプションがあるラジオボタン：
- スターター
- メインコース
- スターターとメインコース
2つのチェックボックス（または[はい/いいえ]ボタン）
- スターター[はい/いいえ]
- メインコース[はい/いいえ]
スターター、メインコース、スターター、メインコースの3つのオプションがあるドロップダウン。
最初のものは正しい答えしかありませんが、「両方」のオプションは不格好に感じます。 2つ目はより明確ですが、ユーザーにとって2つの「タップまたはクリック」であり、選択なしをカバーするための検証が必要です。
3つのオプションのドロップダウンは、オプション1の不適切なバージョンのように感じられます。
私が見逃しているより良いアプローチがあるように私は感じています。理想的には、iOSインターフェース要素と一致するものを探しています。
ユーザーにとって最も簡単な方法で、このAまたはBまたは両方の選択をどのように処理できますか？
単純なA、B、およびA + Bを選択する場合は、あまり凝ったものにする必要はありません。ラジオボタンを使用することをお勧めします。
- これらは、1-of-Nの選択肢で即座に認識されるウィジェットです。
- 彼らはオプションを明確に綴っています。
- ユーザーは1回クリックするだけで、オプションを選択できます（チェックボックスは最大2つ）。ラジオボタンとチェックボックスはどちらも小さなコントロールなので、クリックを追加するとUXの摩擦が生じます。
- これらは、ユーザーが複合視覚インタラクションを認知的に処理することを要求しません（
Aをクリックし、次にBをクリックしてA+Bを取得します）。
注：
KLMモデリングは、処理時間の迅速でダーティなキャリブレーションを提供します。 この記事 は、ラジオとドロップダウンの処理時間を示しています。ドロップダウンは非表示のコンテンツの方向付けと読み取りのために追加の認知的負荷がかかるため、これは控えめに表現されている可能性があります。
@CodeMaverickは（コメントで） ' どちらかまたは両方にできる2つのオプションから選択 'から、次の現代的/モバイル向けのラジオボタンの図を提供しました。
![enter image description here]()
初めてのユーザーにとって最も簡単で直感的なのは、両方のチェックボックスをオフにしないようにするための検証付きの2つのチェックボックスです。その理由は、ユーザーがオプションを1つずつ読み取り、それぞれを順番に個別に判断するためです。彼らは、初回訪問時のクリック数を最適化しようとしているのではなく、認知負荷を最適化しようとしている。彼らが読み、「スターターとメインディッシュの両方」の3番目のオプションに到達するとき、以前に行ったオプションを再考する必要があります。 2つではなく3つの異なるものを読む必要があるため、3つのラジオボタンよりも優れています。また、3番目の項目を読むときは、すべてを包括的または考えなければなりません。私たちが考えるのは楽しいですが、素人の人々は、奇妙な 'A and B'を扱う認知過負荷に悩まされたくありません。
検証（制限し、少なくとも1つを選択する必要があることをユーザーに伝える）は、記述するコードが多いですが、ラジオボタンまたはドロップダウンの状況でも実行する必要があります。そうしないと、暗黙的でユーザーから見えなくなり、混乱を招きます。ユーザーに対して（彼らはなぜ何も選択できないのか理解できません）。
このUIは、あらゆる種類の数の制限（「7つのアイテムから少なくとも3つを選択する必要がある」）に簡単に一般化できますが、ラジオボタンには組み合わせの爆発があります。
経験豊富なユーザー（メニューの場合とは異なります）の場合、一部のコンテキストではシングルクリックが効率的ですが、メニューの場合、毎回異なる選択肢があると考えられます。
つのオプションがあるラジオボタン
この状況では、デフォルト値を簡単に選択できますが、ラジオボタンはモバイルでは最も一般的ではありません。通常、代わりに単一選択リストを見つけます。おそらく別の解決策がより良いコースです。
ドロップダウン
上記のオプションを実行するには、追加のクリックが必要であり、開くまで他の2つの可能性を非表示にします。多くのHIGは、1〜5個のオプションのラジオボタンを提案しています。 AppleのHIGから：
6つ以上のアイテムを表示する必要がある場合は、ポップアップメニューの使用を検討してください。ラジオボタンのグループに少なくとも2つのアイテムと最大で約5つのアイテムが含まれている場合が最適です。
2つのオプションがあるチェックボックス
これは簡単にできますが、チェックボックスを使用できます。ある種の「次へ」ボタンがあるとすると、ボタンは、1つのアイテムがチェックされるまで無効になります。
このプロセスの問題は、ユーザーが「次へ」ボタンを有効にする方法を理解する必要があることです。小さなテキストブロック（「スターターまたはメイン、あるいはその両方を選択する」）は、ユーザーがこれを理解するのに役立ちます。
よろしいですか？
これは最終的なユースケースには適合しないかもしれませんが、あなたの例は適合します。
スターターの注文プロセスを案内する「スターター注文」ボタンを提供できます。メインの注文プロセスに進む「メインの注文」ボタンを提供できます。メイン画面（これらのボタンを押したまま）に対するフィードバックは、ユーザーが以前に行ったことを通知します。
「注文を完了する」の3番目のボタンは、上記のプロセスの少なくとも1つが完了するまで無効になります。
簡単な3つの選択肢のラジオボタンを実行します。以下は、jQuery UIを使用して2分で実行した例です。
ラジオボタンでは、オプションを選択（または修正）するために1つのアクションが必要です。
チェックボックスを使用すると、両方を選択するには2つ、AをBに変更するには2つ必要です。
でも、もしデザートが写真に出てきたら、別のものを見るかもしれません。
私は、ラジオボックスを装ったチェックボックスがとにかく進むべき道だと思います。 2つの選択肢があります。ユーザーがアイテムをクリックして何も選択しない場合、ユーザーは「直感的に」もう一方を選択しています。美味しさがすべてです。 
ユーザーは、残りのアイテムをクリックして何時間もそこに座って、選択された他のアイテムを表示することができます。このやり取りに関わる人は、売り手の気分を払拭するための静かな習熟のオーラを持っているでしょう。
興味深い拡張された答えは、ユーザーが長いメニューの最後の項目の選択を解除したときにどうするかです。ほとんどの場合、施設（売り手）はグループの最も高価なアイテムを選択して応答しますが、これが最も賢明だと思います。 「直感的」と「指示」の関係がどれほど近いかに注意してください。リストの最初の項目を選択するのと比較してください。
「スターターとメインコース」をオプションとして使用することについて。それはあなた次第です。