オプションの数が大きく異なる可能性がある場合のラジオボタンまたはドロップダウンリストの使用
私はいくつかのモジュールで構成されるWebアプリケーションを設計しています。これらのモジュールのいくつかについて、ユーザーはモジュールに表示するデータのソースの数/ソースを選択できる必要があります。
元々はラジオボタンを使用することにしました。データソースごとに1つのラジオボタンと、モジュール内のすべてのデータソースを表示するためのラジオボタンが1つあります（ユーザーが1つだけまたはすべてを表示できることが要件です）。
ただし、利用可能なデータソースの量は1からxまでさまざまです（xはユーザーによって異なります）。ユーザーが3つのデータソースしか持っていない場合、ラジオボタンは適切に機能しますが、ユーザーは20のデータソースを利用できます。
データソースの量が7未満の場合はユーザーにラジオボタンを表示し、7を超える場合はドロップダウンリストを使用することを検討しました（ユーザーに返されるデータソースの数を確認できます）。これにより、不整合が発生する可能性があります。たとえば、ユーザーの1日が6〜10のデータソースを持つ場合。
別のオプションとして、単一のデータソースを選択するためのラジオボタンを表示し、このオプションのドロップダウンリストと、使用可能なすべてのデータソースを選択するためのラジオボタンを表示することもできます。
これを解決する最良の方法について何か提案はありますか？
一貫したUIは非常に重要です。あなたが説明したように、<7のラジオボタンと> = 7のドロップダウンがある場合、
- ソースの数が変わったときにUIが変わるだけでなく、
- しかし、UIはモジュールごとに異なる可能性があり、製品の使用をより困難/混乱させます。
ソースを変更するオプションが常に存在する必要がある場合は、一貫性を保つために、常にドロップダウンを使用することをお勧めします。
オプションが常に存在する必要があるとは限らない場合は、このアプローチをとります。
- ドロップダウンやラジオボタンはありません
- 新しいソースが追加されたとき、またはモジュールが初めて使用されるときに、ソースを変更することを提案します
- ソースの変更を提案するときは、次のようなスクロールリストを表示します。
![module source selector]()
可能な場合、インターフェースは、ユーザーが取らなければならない実際の決定を反映する必要があります。この場合、ユーザーは「すべて」または「単一のソース」のどちらを使用するかを決定する必要があります。そのため、ユーザーが理解しやすくなるので、その決定を分離することは良い方法です。
ただし、単一のソースのドロップダウンまたはラジオボタンを表示するかどうかの問題はまだ残っています。私はあなたが説明したものと同様のアプローチを取ることをお勧めします（つまり、特定の量の使用ドロップダウン、特定の量の使用ラジオボタンの下）、表示するオプションの量がデザインが処理できるものに基づいていることを確認してください。 7は電話には多すぎるかもしれませんが、デスクトップ/ラップトップの960pxグリッドにはちょうどいいです。
ドロップダウンの使いやすさの詳細は次のとおりです。 http://baymard.com/blog/drop-down-usability
ラジオボタンは、いくつかの標準的な選択肢にのみ適しています。あなたは説明しました：
1からxまで変化します（xは非常に大きい場合があります）
ドロップダウンリストでは、1つから数百のオプションを簡単に処理できます。値が1つしかない場合は、ドロップダウンのテキストボックスに自動入力するように設定します。
ラジオボタンを使用するための要件については触れません。値の数が判明する前の設計の初期設定のみです。ラジオボタンは省略し、ドロップダウンでjsutを実行します。不整合は非常にイライラすることがあります。
使用するUI入力メソッドの決定子としてオプションの数を制限すると、これらの要素のロジックが壊れます。
ドロップダウンメニューは単一選択または複数選択にすることができ、ユーザーを単一の選択に制限する場合は、ラジオボタンを使用してデフォルトの選択を設定する必要があります。
ドロップダウンメニューには、オプションの長いリストに関する問題があります。また、ユーザーが探しているものを認識し、永久にスクロールしてオプションを見つけ、選択する前にすべてのオプションを覚える必要があります。これらのタイプの問題のため、ドロップダウンに検索フィールドを追加するという新しい傾向があります。
ラジオボタンを使用すると、ユーザーがすべてのオプションを確認して、選択時にそれらを比較できるため、ユーザーの認知負荷が低くなります。
重要なのは、視覚的なノイズを避けるためにオプションを確実にレイアウトすることです。
また、ラジオボタンを使用するときにデフォルトでオプションを選択することも重要です。