web-dev-qa-db-ja.com

なぜラジオボタンとチェックボックスを使用する必要があるのですか?

チェックボックスとラジオボタンのすべての機能を選択/ドロップダウンで構築できます。これにより、インターフェイスの整列が向上し、GUI要素の種類が少なくなります。

では、なぜこれらの要素を使用する必要があるのでしょうか。

5
K..

チェックボックスと選択:

チェックボックス機能を複製するには(choose 0 or x out of n)、複数選択要素を使用する必要があります。 ほとんどのユーザーがmultiselect要素で複数の項目を選択する方法に気付かずに気付いていないことを示す多くの調査があります。


ラジオボタンとドロップダウンの比較:

それではどちらを使用するのですか?それは本当にあなたのシナリオに依存します。

シナリオ1: "この数百のリストから国を選択してください"

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

  • ラベルには、利用可能なオプションの種類が明確に示されています。
  • ドロップダウンは、インターフェースを整理する/ユーザーから不要な情報を隠すという意味で理にかなっています

シナリオ2:「アイスクリームは好きですか?」

mockup

bmmlソースをダウンロード

  • ドロップダウンは、ユーザーに対して重要な情報(「はい」または「いいえ」以外のオプションの存在)を非表示にします。
  • ドロップダウン(2垂直単位)によって節約されるスペースの量は無視できます。

tl; dr:ラジオボタンとドロップダウンのどちらを使用するかは、実際の使用例によって異なります。複数選択を使用するたびに、かわいい子猫は死にます。

17
vzwick

ラジオボタン:

++オプションが表示されます(ドロップダウン:表示するにはクリックする必要があります)
++オプションの選択に必要なのは1クリックのみです(ドロップダウン:2クリック)

チェックボックス:

++オプションが表示されます(ドロップダウン:表示するにはクリックする必要があります)
++誰もが複数選択する方法を知っています(ドロップダウン:ctrl/cmdキーを押す必要があります)

4
greenforest

オプションチェックボックスとラジオの数が少ない場合:

2
Sam Hasler

最初は、チェックボックスとラジオボタンによって選択肢が表示され、選択肢のセットを表示するための追加のアクションは必要ありません。

第二に、フォームはテキストの説明なしで表示され、1対多または多対多の選択を行う可能性があります。チェックボックスとラジオボタンは認識可能な基本的なパターンであるため、これらの要素には大きなアフォーダンスがあります。ドロップダウンと選択では、複数選択の可能性や追加のラベルを理解するために、追加の認知的努力が必要になります。

3番目に、ドロップダウンと選択肢は単一のチェックボックスの選択肢を正しく表示できません。通常、2つの選択肢(「はい」/「いいえ」)と、単純なクリックの代わりに多くのアクションが必要になります。

そして4番目に、selectはtextareasとして認識される可能性があり、ユーザーをさらに混乱させます。

したがって、それはそれほど単純ではなく、選択とドロップダウンで構成される視覚的な形式で作成された整列されたインターフェイスは、本質的な違いを示さず、はるかに使いにくくなります。

1

私の2セントを振り回すだけで、本当に私をいらいらさせるのは、「猫が欲しいですか?」のように2つのオプションしかないラジオボタンがある場合です。 -> "()はい()いいえ"。ここではチェックボックスの方がずっと意味があります(「[]猫が欲しい」)。

1
Ray V