web-dev-qa-db-ja.com

5-6の選択肢:ラジオボタンまたはドロップダウン

私はPMS(不動産管理システム)を再設計しています。これはホテルのセットアップの画面です。現在、すべてのカテゴリ/タブにラジオボタンがあります。選択肢が6未満の場合は、ラジオボタンを使用して、ドロップダウンボタンではなくすべての選択肢を表示することをお勧めする「ルール」があることを知っています。 5つを超えるカテゴリ/タブがあり、1つの選択肢を選択する必要がありますが、私の問題に最適な解決策はわかりません。ラジオボタンとドロップダウンボタンのどちらを使うべきですか?他に何かアイデアはありますか?

22
Eva Soroniati

ガイドライン

Apple OSXヒューマンインターフェイスガイドライン (2012)では、オプションが5つ以上ある場合はドロップダウンを推奨しますが、 Microsoft Windows 10ユーザーエクスペリエンスガイドライン がある場合はドロップダウンを推奨します8つ以上のオプション。したがって、平均を取り、6.5オプション(肩をすくめる)未満の場合は、ラジオボタンをそのまま使用します。いずれにしても、境界線近く(少なくとも1冊のガイドラインでは)にいるため、おそらく何をしてもそれほど大きな違いはありません。

トレードオフの考慮事項

より正確(かつ複雑)にしたい場合は、ラジオボタンとドロップダウンの主要なトレードオフを考慮してください。

  • ラジオボタンには、ワンクリックでオプションを選択できるという利点があります(ドロップダウンから選択するには2回クリックする必要があります)。ユーザーのクリックを節約します。

  • ドロップダウンには一目でわかる値の利点があります(ユーザーは、リストをスキャンするのではなく、現在選択されているものを確認するために1か所を見るだけで済みます)。

したがって、トレードオフは、ユーザーがアイテムの値を変更する頻度と、単に読んでそのままにしておく頻度に依存します。

  • タスクに値のチェックのみが含まれることが非常に多い場合(たとえば、他の何かを設定する方法を知るため)、オプションは5つ未満でも、ドロップダウンの方が良い場合があります。

  • ユーザーがほとんど常にデフォルトを使用する場合、ドロップダウンは5つ未満のオプションでより良い場合があります。

  • 一方、ユーザーがほとんど常に値を変更する必要がある場合(デフォルトではめったに正しくありません)、オプションが8つ以上ある場合でもラジオボタンが必要になることがあります。

AppleとMicrosoftのガイドラインの違いは、ユーザーが値を変更する必要がある頻度に関するさまざまな仮定を反映している可能性があります。

数学を取得する

本当に正確にしたい場合は、 各クリックに約2秒かかる および 各一目で約0.1秒かかる と仮定し、ラジオボタンとドロップでタスクを実行する時間を計算します期待するユーザーの割合に応じて、値を変更します。オプションの数に対して最も速いものを選択してください。

本当に正確に取得したい場合は、プロトタイプでドロップダウンするか、ラジオボタンのユーザビリティテストを行って、平均時間を比較します。

その他の考慮事項

値を変更するユーザーの割合に加えて、他に考えるべきこと、または数学的に含めることを次に示します。

  • 使用頻度でオプションを並べ替えます。オプションが使用頻度で並べ替えられており、最初の5つのオプションがほぼ常に正しい場合は、5つ以上のオプションを持つラジオボタンを優先することができます。 ones、andユーザーは、適切なオプションが見つかれば検索を停止するオプションについて十分に理解しています。その場合、全リストのスキャンはそれほど頻繁には行われません。機能的には5つのオプションがあります。

  • 現在の選択の期待。ユーザーが現在の可能性のある値を予測でき、値がリストのどこにあるかを大まかに把握できる場合は、オプションが5つ以上あるラジオボタンを優先することができます(たとえば、リストを繰り返し表示したり、賢明にソートしたりしています)。その場合のスキャン時間は、アイテム数の線形ではなく、アイテム数のログ( Hick-Hyman law )によって異なるため、アイテム数を2倍にすることができます(たとえば、5から10)スキャン時間を少しずつ増やすだけです。

  • 他のオプションを表示することの有用性。ユーザーがオプションにあまり慣れていない場合、またはオプションがあいまいになる可能性があるため、ユーザーがすべてを表示する必要がある場合は、ラジオボタンを優先することができます。どちらを選択するかを正確に選択します。これは、ユーザーが最初にドロップダウンを開いてオプションを確認する必要がないため、ラジオボタンを使用する方が簡単です(場合によっては、とにかくデフォルトを維持することになります)。ドロップダウンを使用すると、ユーザーはすべてのオプションを確認する必要さえありません。この場合、これは悪いことです。

  • スペースの制限。一方、ラジオボタンを使用するとほとんどのユーザーがスクロールして強制的に取得できるようにページのスペースが非常に限られている場合は、ドロップダウンを優先することができます。他のアイテムに。ユーザーがスクロールする必要がある場合、少なくとも1回のクリックが追加され、ラジオボタンの主な利点が失われます。また、乱雑さの影響を過小評価しないでください。ユーザーがスクロールする必要がない場合でも、これらのラジオボタンはすべて、ページの他の要素から注意をそらす可能性があります。通常、選択されていないアイテムは、ページの他のフィールドやコントロールほど重要ではありません。

  • 安全カバー。値を変更すると危険な影響(セキュリティレベルの変更など)が生じる可能性がある場合は、ラジオボタン(またはチェックボックス)ではなくドロップダウンを使用することもできます。ワンクリックで変更できるという非常に便利な機能により、ラジオボタンやチェックボックスは、ユーザーが注意散漫になっているときに、誤ってクリックすることで誤って無意識に変更される可能性があります。代わりにドロップダウンを使用することは、物理的なトグルスイッチの上に安全カバーを付けるようなもので、偶発的な入力の可能性を減らします。ユーザーが意図的に値を変更している場合は、警告ボックスよりも混乱が少なくなります。

どちらでもない:リストボックス

ドロップダウンとラジオボタンの両方によく忘れられる1つの方法は、リストボックスです。これは、ラジオボタンとドロップダウンの間の妥協案です。

  • ラジオボタンのようにワンクリックで選択できますが、通常は場所を取りません。

  • 現在の選択が強調表示されます。これは、小さな塗りつぶされたラジオボタンよりも見つけやすい場合があります。

  • アイテムの数が多い場合はリストボックスをスクロールできるため、使用頻度の高いアイテムをワンクリックで選択できるようにし、使用頻度の低いアイテムを「スクロールせずに見える範囲」に配置して、スペースと重要性のバランスをとることができます。

  • ドロップダウンのように、リストボックスにはデータベーステーブルのオプションを簡単に入力できます(多くのプラットフォームでラジオボタンを使用するのは難しいことです)。

5つを超えるオプションがある場合は常に、ラジオボタンよりもリストボックスを検討する必要があります。

43

Checkboxes vs. Radio Buttons(Nielsen、2004) によると:

可能であれば、ドロップダウンメニューではなく、ラジオボタンを使用してください。 Radioボタンの 認知的負荷は、ユーザーが簡単に比較できるように、すべてのオプションが永続的に表示されます。ラジオボタンは、マウスを正確に動かすことが難しいユーザーにとっても操作が簡単です。 (スペースが限られていると、このガイドラインに違反するように強制される場合がありますが、可能な場合は常に選択肢が表示されるようにしてください。)

つまり、オプションを削除せずにスペースを節約するために ドロップダウンは賢い選択です です。しかし、ユーザーがすべてのオプションを事前に知っている可能性を排除し、 タスクごとのクリック数 *(ドロップダウンをクリックし、リストをスクロールし、最後にオプションとオプションを選択する)を増やしますラジオをクリックしてください)。

  • 注:より直感的なインターフェイスを構築するためのガイドラインとして、タスクあたりのクリック数を取り上げます。ただし、実際の「ルール」としての使用はお勧めしません。この件についての詳細は this および this を参照してください。

私はこのフォーラムで提案された他の可能性を見てきました。 @LarsTech ウィジェット間の以下の混合を提案 ラジオボタンで選択される可能性が最も高いオプションを保持しながら、スペースを節約します。スペースに問題があっても、ラジオボタンの有用性を認識している場合は、検討する価値があります。

enter image description here

9
armatita

ユーザーがデフォルトの選択をどの程度変更することを期待していますか?

  • ほとんどのユーザーがデフォルトオプションを使用し、ユーザーがそれを大幅に変更することを期待していない場合は、Dropdownを使用してデフォルトオプションを選択します。
  • ただし、ユーザーの選択肢に多くのばらつきがあり、すべてのオプションをすぐに表示する方が良い場合は、ラジオボタンを使用します。
0
Erkki Muuga

他のコメント者はいくつかの良い提案をしました。ただし、ラジオやドロップダウンよりもバリエーションや他のオプションを検討してくださいにすることをお勧めします。視覚的な識別からメリットを得るオプションを選択できる場合は、ラジオボタンのバリエーションを検討することもできますアイテムを表示し、ユーザーが直接選択できるようにする。オプションが範囲が固定されたスペクトルに沿っている場合、おそらくスライダーはまともなオプションでしょう

ドロップダウンはより垂直方向にコンパクトなレイアウトを提供しますが、すべてのオプションを表示できるため、ユーザー側の作業が少し少なくなります。ただし、それを行うことを決定した場合でも、ユーザーにインテリジェントデフォルトを提供することで、ユーザーの作業をさらに少なくすることができます。事前選択済み。

0
Mattynabib

モバイルとWebを一緒に設計する場合は、ドロップダウンを使用する方がはるかに便利です。通常、多くの電話には組み込みの処理機能があり、ユーザーにすぐに馴染みのある環境を提供します(ユーザーがデバイスを頻繁に切り替えている場合を除き、サイトを頻繁に切り替えている場合を除きます)。

私の携帯電話では、ラジオボタンを大きくしない限り、実際にラジオボタンをクリックするのに通常3〜7回かかります。ラジオボタン内にすべてのテキストを作成すると、小さな円だけでなく、テキストをクリックできるようになるだけでなく、人々がそうするのを忘れてしまうと、それを修正できます。ドロップダウンにはヒットボックスとして四角形全体があり、全画面の選択領域が表示されます。

0