少なくとも1つのオプションを選択する必要があることをユーザーに簡潔に伝えるための既知の良い方法があるかどうか疑問に思っています。
- チェックボックスは、ユーザーが0以上のアイテムを選択できることを伝えます。
- ラジオボタンは、ユーザーが選択できるアイテムは1つだけであることを伝えます。
ユーザーが少なくとも1つのオプションを選択する必要があることを伝えるための既存の規則を見つけることができませんでした-「少なくとも1つ選択してください」と明示的に述べる以外に。
私は2つの潜在的な解決策を考えましたが、他の人の考え、および他の解決策があるかどうかを知りたいと思いました。
この問題を解決する通常の方法は、検証(または、入力したエラー)を使用することです。
チェックボックスとラジオボタンが何であるかを理解しているユーザーを混乱させるので、1つのフィールド内にコントロールタイプを混在させることはお勧めしません。
ユーザビリティの観点からは、システムの状態をユーザーに伝えることを目的とする必要があります。そのため、選択された項目が0個が無効である場合、これが無効であることをユーザーに示すことは役立ちます。
「該当するものすべてにチェックを付ける」などのこれらの種類のコントロールのガイダンスを参照するのが一般的であるため、主観的には「少なくとも1つ選択する」よりも適切な表現にすることができます「ユースケースによって異なります。
エラーメッセージが表示されたり消えたりするタイミングや、検証がクライアント側、サーバー側、またはその両方であるかどうかなど、ここでの答えを決定するために必要ないくつかの微妙な問題があります(トップヒント、おそらく両方である必要があります)。
アクセシビリティの観点からは、aria
タグを使用して、メッセージが純粋に視覚的なものである場合のエラーを示す必要があります。特にaria-invalid
を使用してユーザーエージェントにエラーを通知する必要があります https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
ボーナスポイントとして、「7以内」などのより複雑なシナリオの検証は、実際にビジネスロジックをユーザーに与えることを目指しています。これは問題ありませんが、これは通常、プログラムで生成およびテストできる検証を通じて通常達成されます。
質問フィールドを動的に追加できる場合、別の解決策はそれを段階に分割することです:
1)最初にラジオボタンでヌル状態の質問をします。
2)複数選択が必要なオプションが選択されている場合は、次の質問にユーザーを誘導します。
例:
A.
既存の条件はありますか?
????はい ????番号
「はい」を選択した場合にのみ表示されます。
どの状態ですか? (該当するものをすべて選択。)
☐ABC
☐Efg
☐Xyz
☐その他:____________
B..
あなたはどの郡にお住まいですか?
???? Abc ???? Xyz ????どちらでもない
「どちらでもない」以外のオプションが選択されている場合にのみ表示されます。
あなたはどの都市/地域に住んでいますか?
☐ABC
☐Efg
☐Xyz
☐未採用エリア
上記のリストは、選択した郡に対して完全なものになります。
C.
ユーザーがピーナッツバターサンドイッチが好きであることがすでにわかっていると仮定します。
ピーナッツバターサンドイッチのお気に入りのトッピングは何ですか。
????ゼリー????はちみつ ????ピーナッツバターのみ????その他:____________
「その他」以外のオプションが選択されている場合にのみ表示されます。
ピーナッツバターと[トッピング]サンドイッチを食べる食事はどれですか。
☐朝食
☐昼食
☐夕食
☐スナック
ユーザーが私たちがさらに調査したいオプションの1つを食べることはすでにわかっているので、ユーザーはこれらの食事の1つで食べたことを知っているので、少なくとも1つを選択する必要があります。
これを検証と組み合わせて、誤って1つを選択し忘れていないことを確認する必要があります。
チェックボックスとラジオボタンの使用に制限されていない場合、少なくとも1つの選択が必要なときに、ListBox(別名複数選択リスト)がよく使用されます。ユーザーに役立つリマインダー/プロンプトを複数選択できるようにすることができます。
HTMLでは、それは(from W3Schools )として表されます
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
追加して編集:ユーザーが複数選択できることをコンテキストから明らかにした場合、明示的な「1つ以上の選択」ヒント/リマインダーは不要になる可能性があります1。上記の例の場合、入力ラベルが「どの自動車メーカーからの購入を検討しますか?」である場合、ユーザーは複数のオプションを選択できることがユーザーに示されます。