web-dev-qa-db-ja.com

少なくとも1つを選択して通信する良い方法はありますか?

少なくとも1つのオプションを選択する必要があることをユーザーに簡潔に伝えるための既知の良い方法があるかどうか疑問に思っています。

  • チェックボックスは、ユーザーが0以上のアイテムを選択できることを伝えます。
  • ラジオボタンは、ユーザーが選択できるアイテムは1つだけであることを伝えます。

ユーザーが少なくとも1つのオプションを選択する必要があることを伝えるための既存の規則を見つけることができませんでした-「少なくとも1つ選択してください」と明示的に述べる以外に。

私は2つの潜在的な解決策を考えましたが、他の人の考え、および他の解決策があるかどうかを知りたいと思いました。

オプション1:ラジオボタンとチェックボックスを組み合わせる

  • ゼロのアイテムを選択すると、チェックされていないすべてのラジオボタンが表示され、ユーザーはオプションを選択する必要があることを示します(このオプションは、デフォルトの選択を行うことができない初期状態にのみ使用できます)。
  • 1つのアイテムを選択すると、選択したアイテムがチェックされたラジオボタンとして表示され、他のオプションはチェックされていないチェックボックスとして表示されます。ラジオボタンをオフにすることはできません)。
  • 2つ以上の選択がある場合、選択されたすべてのオプションがチェックされたチェックボックスになり、選択されていないオプションはチェックされていないチェックボックスになります-ユーザーが任意のオプションを選択解除できることを示します。

オプション2:チェックボックスとエラーを使用する

  • すべてがチェックボックスとして機能します
  • ユーザーがすべてのチェックボックスを選択解除できるようにする
  • チェックボックスが0になったらすぐに、エラーメッセージを表示してグループを強調表示します(例:色を赤に変更するか、その周りに赤いボックスを描画します)。
  • 注:このオプションは、少なくとも1つ選択する必要があることを伝えるテキストをユーザーが事前に表示できる場合におそらく最適です。

Image showing check boxes, radio buttons, and various potential ways to visually represent the ability to choose at least one

ボーナスポイント-最初の質問に答え、それ以上の回答

  • ボーナスポイントビジュアルインターフェース(HTML)を使用しないユーザーがアクセスしやすいことを示す方法についても説明します。
  • ボーナスポイント「最低2を選択」、「3から5を選択」、「選択せいぜい7インチなど(これに回答する場合は、質問のタイトルを変更する必要があるでしょう)。 [〜#〜]注[〜#〜]「0または1」はすでにカバーされているようです ここ - ここ および ここ
31
allenretz

この問題を解決する通常の方法は、検証(または、入力したエラー)を使用することです。

チェックボックスとラジオボタンが何であるかを理解しているユーザーを混乱させるので、1つのフィールド内にコントロールタイプを混在させることはお勧めしません。

ユーザビリティの観点からは、システムの状態をユーザーに伝えることを目的とする必要があります。そのため、選択された項目が0個が無効である場合、これが無効であることをユーザーに示すことは役立ちます。

「該当するものすべてにチェックを付ける」などのこれらの種類のコントロールのガイダンスを参照するのが一般的であるため、主観的には「少なくとも1つ選択する」よりも適切な表現にすることができます「ユースケースによって異なります。

エラーメッセージが表示されたり消えたりするタイミングや、検証がクライアント側、サーバー側、またはその両方であるかどうかなど、ここでの答えを決定するために必要ないくつかの微妙な問題があります(トップヒント、おそらく両方である必要があります)。

アクセシビリティの観点からは、ariaタグを使用して、メッセージが純粋に視覚的なものである場合のエラーを示す必要があります。特にaria-invalidを使用してユーザーエージェントにエラーを通知する必要があります https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute

ボーナスポイントとして、「7以内」などのより複雑なシナリオの検証は、実際にビジネスロジックをユーザーに与えることを目指しています。これは問題ありませんが、これは通常、プログラムで生成およびテストできる検証を通じて通常達成されます。

38
dougajmcdonald

質問フィールドを動的に追加できる場合、別の解決策はそれを段階に分割することです:

1)最初にラジオボタンでヌル状態の質問をします。

2)複数選択が必要なオプションが選択されている場合は、次の質問にユーザーを誘導します。

例:

A.

既存の条件はありますか?

????はい ????番号

「はい」を選択した場合にのみ表示されます。

どの状態ですか? (該当するものをすべて選択。)

☐ABC

☐Efg

☐Xyz

☐その他:____________

B..

あなたはどの郡にお住まいですか?

???? Abc ???? Xyz ????どちらでもない

「どちらでもない」以外のオプションが選択されている場合にのみ表示されます。

あなたはどの都市/地域に住んでいますか?

☐ABC

☐Efg

☐Xyz

☐未採用エリア

上記のリストは、選択した郡に対して完全なものになります。

C.

ユーザーがピーナッツバターサンドイッチが好きであることがすでにわかっていると仮定します。

ピーナッツバターサンドイッチのお気に入りのトッピングは何ですか。

????ゼリー????はちみつ ????ピーナッツバターのみ????その他:____________

「その他」以外のオプションが選択されている場合にのみ表示されます。

ピーナッツバターと[トッピング]サンドイッチを食べる食事はどれですか。

☐朝食

☐昼食

☐夕食

☐スナック

ユーザーが私たちがさらに調査したいオプションの1つを食べることはすでにわかっているので、ユーザーはこれらの食事の1つで食べたことを知っているので、少なくとも1つを選択する必要があります。


これを検証と組み合わせて、誤って1つを選択し忘れていないことを確認する必要があります。

11
called2voyage

チェックボックスとラジオボタンの使用に制限されていない場合、少なくとも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。上記の例の場合、入力ラベルが「どの自動車メーカーからの購入を検討しますか?」である場合、ユーザーは複数のオプションを選択できることがユーザーに示されます。

4
Sebbs