web-dev-qa-db-ja.com

ラジオボタンの代わりに選択ボックスを使用する必要があるのはいつですか?

選択ボックスは場所をとらず、多くのオプションに適しています。しかし、私の選択には、宇宙よりも深い影響がありますか?ユーザーがどちらか一方を好むことを示す調査はありますか?

Htmlには複数選択とチェックボックスの問題もあります。これについてもここで説明できますが、答えはおそらく同じになるでしょう。

53

ユーザーが利用可能な代替選択肢のすべてを知る必要がない場合、私はselectを使用します。 Autosuggestは長いリストに役立ちます。一般的に、彼らは自分が何を望んでいるかを知っており、スペースを節約します。例:カリフォルニアやニューヨークなどの「州」を選択します。ラジオボタンは使用しません。

選択肢が重要な場合、私はラジオボタンを使用します。ユーザーが選択していないものをユーザーに確認する場合。ラジオボタンを使用すると、選択範囲を広げたり、長いテキストを使用したりすることもできます。

経験則:長いリストであるか、選択肢がそれほど重要でない場合は、selectを使用します。

78
Glen Lipka

MS、Apple、Gnomeなどのユーザーインターフェイスガイドラインは、通常これについて非常に明確な提案をしています。

  • ラジオボタン:5つ未満の選択肢

  • 選択ボックス:6〜10個のオプション

  • スクロール可能なリスト:11以上のオプションまたは
    • リストへのドラッグアンドドロップをサポートする必要がある
    • 要素の数は異なります

さらに、スペースを節約する必要がある場合や、通常はデフォルトの選択で十分な場合に選択ボックスを使用できるため、ユーザーが選択を確認する必要はほとんどありません。

第三に、曜日、月などに使用できます。それは、あなたが知っているすべての選択肢を表示せずにどのような選択肢があるかということです。選択ボックスに「2月」と表示された場合、他のすべてのオプションがどのようになるかはほぼ推測できます。

あるGUI要素を別のGUI要素で使用する根拠

一般に、ユーザーはすべての選択肢をすぐに確認できるため、通常はラジオボタンが推奨されます。ただし、すべての選択肢を表示すると、ユーザーインターフェイスの貴重なスペースが大量に消費される可能性があります。そのため、ほとんどのガイドラインでは、選択肢が多い場合に他の選択方法を使用することを推奨しています。

例えば。 a スクロール可能なリストは、多くのスペースをとることなく、任意の数の選択肢を表示できます。欠点は、すべての選択肢を見ることができないことです。

選択ボックスは、ユーザーにすべての選択がそれほど重要ではないことを示すときに使用するという点で異なります。例えば。ユーザーが選択肢を推測できる場合、またはデフォルト設定を変更する必要がほとんどない場合。 選択ボックスは、主に設定が何であるかをユーザーに示すためにあります。ただし、選択肢が多い場合は選択ボックスでナビゲートするのが面倒になる可能性があるため、スクロール可能なリストをお勧めします。

13
Erik Engheim

スペースとオプションの数以外は、大きな違いはありません。ラジオボタンについて私が気に入っている点の1つは、ボタンを大きなボタンのようにスタイル設定できることです。これは、タッチインターフェイスに役立ちます。オプションが少ない場合は、小さなドロップダウンを押して小さなオプションを押すよりも、大きなボタンを押す方がはるかに簡単です。

複数選択とチェックボックスの関係では、私は複数選択を使用しないことを本当に好みます。マウスクリックと共にキーの組み合わせを使用する必要があるからです。多くのユーザーはショートカットがどのように機能するかを認識していないため、複数のオプションを選択できません。

12
LoganGoesPlaces

見落とされがちな2つの入力のもう1つの違い:ラジオボタンが選択されていない場合、フォーム送信時に渡されません。または、別の見方をすると、ラジオボタンには、オプションを選択しないオプションがあります。

ドロップダウン(選択ボックス)を使用すると、値のないオプション(空白、 "")がデフォルトになる場合がありますが、ユーザーがこのオプションをそのままにしておくと、「私の答えは空白です」と効果的に表示されます。フォームは「my_input_name:」に沿って渡されます。ラジオボタンを使用すると、ユーザーが明示的に選択できる「N/A」や「上記のいずれでもない」などのオプションを提供できるため、「-blank-」を選択するユーザーと質問をスキップ/選択するユーザーを区別できます。答えないこと(この区別は、NULL値で格納されたフィールドと空(空白)値で格納されたフィールドを区別するときに、低レベルのDBロジックでは実際のピクルになります)。

ラジオボタンのこの機能の裏側には、ラジオボタンについてしばしば忘れられる何かがあります。質問に答えることはできません。次のような無線フィールドセットがある場合:

性別男性女性 ()

ユーザーは質問をスキップでき、フィールドは空白として渡されません。しかし、ユーザーが男性を選択した場合、まあ今は立ち往生しています。回答を女性に変更するか、男性のままにすることができます。 (HTMLフォームの場合、ブラウザーコンソールの使用方法についても少し学ぶことができますが、それはUI/UX設計の範囲外であり、プログラミングとセキュリティに含まれます).

したがって、ラジオボタンのこの「引き戻しなし」機能を使用すると、ドロップダウンでは提供されないいくつかのオプションが作成されます。

  1. 「答えなかった」と「私の答えが空白である」を区別する能力
  2. 空白またはデフォルトのオプションを強制せずにすべてのオプションを提示する機能。ドロップダウンでは、オプションを空白にしてから、実際には有効なユーザーの選択ではないそのオプションを処理するか、ユーザーのオプション(リストの最初のオプションなど)を事前に選択する必要があります。ユーザーが選択を怠った場合(おそらく戻ってくるつもりだったか、表示されなかった可能性がある場合)、または空白のオプションがないために意図的に選択されないままにされている場合は、意図せずに送信されます。どちらの場合でも、「デフォルト」オプションが真の答えである場合とそうでない場合があるため、データの価値は低くなりました(信じられない場合は、データをクエリして、フィールドとフィールドのデフォルトオプションの行の比率を取得してください。別のオプションのある行です。デフォルトのオプションの場合、アラバマに住んでいると思われる人数に驚かされます)。

  3. フォーム検証、特に「必須」フィールドの処理をより適切に制御します。必須のドロップダウンフィールドなどはありません。空白のオプションが有効でないドロップダウンフィールドのみがあります。明らかに、状態のドロップダウンに空白のオプションを提供し、空白を状態を選択しないものとして扱うのが、空白のオプションを回避するためにフォームを吹き飛ばすよりも優れていますが、最大4〜5の回答を持つ質問の場合、それは実際にはオプションではない空白のオプションを含むドロップダウンを使用するよりも、オプションの完全なリストを提供し、空白と非選択を区別する必要がある場合。

ボーナス意見:

上記のアイデアと同じように、チェックボックスの代わりにドロップダウンを使用することも本当にばかげています。オプション「はい/いいえ」または「真/偽」のドロップダウンを使用すると、毎回目を丸くすることができます。 onlyドロップダウンを使用する理由は、3番目の空白オプションを提供し、それが有効な選択と見なされる場合です。そして、それでも、おそらくラジオボタンがより良い選択でしょう。

4
Anthony

私はこれについて対話について考えていただけで、ラジオボタンのもう1つの利点は、サポートテキストや可能な選択肢についての説明のために少し余分なスペースを提供できることです。

3
annemarie lock

selectボックス(チェックボックス)を使用して複数のオプションの選択を有効にするか、またはバイナリの選択を作成します。

ベストプラクティスセレクトボックスを使用する場合:

  1. ユーザーが80%以上の時間を選択するオプションのデフォルトを設定することを検討してください。
  2. メールマーケティングへのサインアップなど、デフォルトのオプトインは避けてください。

Radio Buttonsを使用して、2つ以上の相互に排他的なオプションから1つのアイテムを有効にします。

ベストプラクティスラジオボタンを使用する場合:

  1. ラジオボタンを使用してアクションを起動しないでください。
  2. 常に2つ以上のラジオボタンを使用する
1
Manoj Kumar

オプションが2つ以上になるまでは、通常ラジオボタンを使用することをお勧めします。 2回クリックするのではなく、1回クリックするだけで済みます。ラジオボタンは、サブオプションのネストにも適しています。

1
Tom R

選択肢が2、3しかない場合は、ラジオボタンが優先され、使いやすさと迅速な選択が実現します。ドロップダウン選択を使用すると、ユーザーはそのフィールドに到達するまですべての選択肢を見ることができません。

この質問は、チェックボックスと複数選択にも同様に適用できます。

0
ericslaw