web-dev-qa-db-ja.com

ドロップダウン対ラジオボタン

ユーザーは、アプリケーションで食品の種類(3つまたは4つから選択)を選択する必要があります。ケースの60〜70%でデフォルトの選択が使用されます。何が良いでしょう:ドロップダウンまたはラジオボタン?

64
tomas.jerabek

すべてのコンテキストに適用されるUIに意味のあるルールを与えることは不可能です。ガイダンスについては、プラットフォームのUXガイドラインを参照してください。

あなたが説明する状況では、どちらのウィジェットもおそらく妥当な選択です。ラジオボタンは、他の利用可能な選択肢(たとえば、抽象化または精度のレベルを明確にする)を強調したい場合、特にデフォルトの選択肢があまり有益ではない場合(たとえば、「標準メニュー」)に役立ちます。大量のデータ入力が予想され、ユーザーが事前に選択肢を知っている場合、ドロップダウンリストはキーボードで操作する方がいくらか簡単です。また、ユーザーが他の何か(「コンボボックス」)を入力できるようにすることもできます。大きな要素は画面の面積です。ラジオボタンと比較して、ドロップダウンリストボックスを使用してスペースを節約できることがよくあります。

本当にこれの底に行きたければ、あなたはあなた自身のユーザーでそれをテストしなければならないでしょうが、ほとんどの場合、それはおそらくそれほど重要ではありません。

40
Gala

無線。デフォルト値を事前に選択している場合、ユーザーはドロップダウンリストを開いて、他の選択肢を確認します(何かがより良いか、または新しい可能性があります)。ラジオボタンにはすべての選択肢が表示され、デフォルトの食品タイプを事前に選択できます。

39
igor

どちらも「両方」の答えはありませんでした。

enter image description here

16
LarsTech

私の経験則:

  • オプションがブールの場合:checkbox
  • オプションの数が2〜4の場合radios
  • オプションのテキストが多い場合:radios
  • オプションがたくさんある場合:ドロップダウン
  • 多くのオプションがある場合:検索付きドロップダウン、選択したとおり
14
Bobby Tables

UXムーブメントによるこのすばらしい記事によると、3〜4の選択肢しかないときに選択メニューを使用することはお勧めしません。

ユーザーが選択できるオプションが5つ未満の場合は、ラジオボタンを使用する必要があります。これにより、ユーザーはオプションを確認して1回クリックするだけでよいため、ユーザーは選択をより速く簡単に行うことができます。選択メニューでは、ユーザーはメニューをクリックし、オプションまでスクロールして、もう一度クリックする必要があります。選択メニューでは、ユーザーがクリックするまで他のオプションは非表示のままになります。オプションが5つ未満の場合は、ユーザーがすばやくスキャンできるように、ラジオボタンを使用してすべてをフォーム上に視覚的に配置することをお勧めします。

選択メニューを使用する(しない)方法の詳細については、前述の記事をご覧ください。 http://uxmovement.com/forms/stop-misusing-select-menus/

6
Davor

オプションの数が完全に制限されている場合は、ラジオボタンの方が適しています。現在、ラジオボタンのセットと「その他」のオプションを含むソリューションを設計しています。固定オプションのリストは常に同じですが、追加の選択肢がある可能性があります。これは、クライアントの希望に基づいています。

画面スペースがある場合は、説明しているソリューションの種類にラジオボタンを使用するのが適切なソリューションのようです。

3

ドロップダウンに使用できるオプションが3つ以上ある場合、例:はい/いいえ-ラジオボタンTrue/False-ラジオボタン男性/女性-ラジオボタン

オプションが増えていないことがわかっている場合は、ユーザーがシングルクリックで選択できるラジオボタンを使用できます。

多くのオプションがあり、動的である必要がある場合は、ドロップダウンを優先できます。

1
rajeash

回答オプションの数が2つ未満の場合、ドロップダウンボタンの使用は避けてください。これは、回答者がボタンをクリックして回答オプションを表示する必要があり、回答オプションが2つしかない場合に不快になる可能性があるためです。代わりに、3つまたは4つの回答オプションがある場合は、ラジオボタンを使用することをお勧めします。

0
Alicia Stark

UIデザインに関しては、すべてのケースが特別なケースであるため、常に実験して、実際のユーザーがデザインをどの程度理解しているかを確認する必要があります。ただし、以下の画像は、何が適切な選択であるかを最初に概算するのに役立ちます。

(そして この記事を読む ヤコブ・ニールセンによる)

Decision tree outlining which widgets to use in which situation

0
LKM