web-dev-qa-db-ja.com

ドロップダウンリストに入れるアイテムの最大推奨数はいくつですか?

グリッドデータをフィルターする検索可能なドロップダウンリストを導入しています。リスト内のアイテムの数は、1万から1万の範囲です。

アイテム数が多いほど、ビューの感じが悪くなります(パフォーマンスへの影響は言うまでもありません)。

では、ドロップダウンリストに追加できるアイテムの最大数はいくつですか(検索可能か、それ以外)。

14
CarneyCode

推奨はありません。ドロップダウンリストに入れるアイテムの最大数です。

最大数が7または12または200または10,000であると言う人は誰もいません。すべてのシナリオで、これは使用する最大値であると断言できます。

ドロップダウンリストとメニューには7 +/- 2を超えてはいけないという神話があります。これは、メモリがチャンクされるためですが、リストを本質的にスキャンできるため、そうではありません。 記憶リスト内のすべてのアイテム。

次の要素は、リストに一度に表示されるアイテムの数です。たとえば、10〜20個のアイテムがあるとします。これは理にかなっているように見えますが、リストが広いか、下にあるコンテンツをカバーしているか、および他のコンテンツがカバーされているときにユーザーがアイテムを選択できるかどうかにどのように影響するかによって異なります。

その後、スクロールバーが導入され、オプションのセット全体に対するウィンドウビューが比較的小さいため、選択の難しさが増します。したがって、一度に表示されるオプションの数に対するオプションの数の比率は、そこでの要素です。

その時点で、リストをスキャン可能にし、リストの前または後にアイテムを見た場所の記憶を助けるために、アイテムがどのようにソートされるかについても本当に気を使い始めます。したがって、典型的なシナリオは、住所を入力するときに国を選択することです。私たちは皆、このようなリストにある200ほどのアイテムに慣れ親しんでおり、ほとんどの場合それを適切に処理できますが、そのリストが並べ替えられていなかったとしたら、それは恐ろしい作業になるでしょう。

残念ながらそれは実際に自然の中で起こります-ハイアットホテルズからの180以上のオプションから航空会社を選択するように求めている途方もない例を次に示します。 「その他の航空会社(リストされていません)」のリストの不条理な位置に注意してください

enter image description here

それでも-並べ替えると、すべてのリストが等しくない-一部の数字は、特に数字が連続していて、単語がアルファベット順に不均等に分布している場合、一部の単語よりも簡単にスキャンされます。

この200程度を乗り越えたら、状況は悪くありません。 1から1000までの数値は機能しますが、一度に10しか表示できず、それを管理する小さなスクロールバーがある場合、世界中の1000の都市は望ましくありません。

その時点で、ユーザーがスクロールして対話することを望まなくなります。検索可能なオプションがはるかに支配的になります。ユーザーが期待されるで対話する方法に段階的な変更があります-ドロップダウンリストは静的なリストではなく、検索の結果を示す動的なリストです。

ドロップダウンをすべての可能なアイテムのリストではなく結果リストとして扱う場合、空はあなたの限界です-在庫全体があなたの指先にあります。ただし、最初に指摘するようにパフォーマンスの問題が発生するため、およびsomeが常に表示されるため、検索ボックスとして(静的リストではなく)提示するにする必要があります。この膨大なリストを上下にスクロールすることにしたユーザー。このような動的リストは、検索語句が入力されていない場合、allアイテムを含むのではなく、emptyとして表示されます。

要約すると、状況により異なります。これは、基になる画面コンテンツとドロップダウンコンテンツの間の視覚的な関係によって異なります。リストデータのスキャン可能性に依存します。アイテムの並べ替え状態と並べ替えキー範囲内の分布によって異なります。そもそも静的リストの内容が望ましいのかどうか疑問に思うはずです。

最後に-すべての状況が異なるため(そしてすべきであるため)、ユーザーにいくつかのオプションをA/Bテストして、そのような仮定を確認し、証拠に基づいた引数を自分で作成できるようにする必要がありますそして、これがそうするのが最善の方法だったという人たちもいます。


理想的な世界で何ができるかを考えてから、ドロップダウンリストを振り返って、ドロップダウンリストがどの程度不適切または古くなっているのかを確認するのに役立ちます。それがそのように感じられるなら、あなたはドロップダウンがそれを行うための最良の方法ではないことに気づきました。とにかく(たとえば、時間/コスト/ツールキットの制約により)ドロップダウンを使用し続ける場合は、優れたUXを提供するのではなく、いくつかのビジネスルールに基づいて決定しただけであり、それに耐えなければなりません。

結局のところ、最高のUXは無料ではありません。それはお金がかかります-それを乗り越えてください。

21
Roger Attrill

私は現在、約10年前に書かれた恐ろしい巨獣に取って代わるWebベースのアプリケーションを構築しており、同様の問題が発生しました。現在のバージョンでは、1000を超えるエントリがあるドロップダウンがいくつかあります。

上記のような特定のUXのヒントを提供することはできませんが、テキスト入力に基づいて選択の内容をフィルター処理できるようにすることで、ユーザーの問題をある程度減らすことができました- jQuery選択されたプラグイン (最後にこれを使用しませんでしたが)。

複数行の選択を使用することも役立ちます(私の場合は任意の10を選びました)。これにより、ユーザーは入力をそれほど行わなくてもコンテンツを視覚的にスキャンできます。また、高さが固定されており、内容がわかりにくくなりません。未満。

ただし、ユーザーが今何を探し始めるかわからない場合、これで問題が解決しない可能性がありますが、私の場合(イントラネットアプリケーション)、ユーザーは既にデータに精通しているため、非常にうまく機能します。これを裏付けるために、関連するユーザーワーキンググループによる改善の程度について非常に肯定的なフィードバックをいただきました。

Miller Column スタイルの出力など、バージョンを正常に機能させるために他のいくつかのオプションを検討しましたが、1つを正当化するための階層がなく、1つを課すつもりはありませんでしたそれのために。結局、カスタムjQuery fnはフィルタリングを実行し、約1000行のバージョンで本当にうまく機能します(私のアプリケーションはIE8でテストされており、大量のデータによる顕著な遅延はありません)。

3
spuds

一般に、ドロップダウンでユーザーが追加の作業を行い、重要なリスト(スクロールする必要があるなど)をスキャンする必要がある場合、ドロップダウンで 使いやすさの問題 が表示されることがあります。

しかしながら!

ドロップダウンの利点の1つは、誰もがドロップダウンを使用することです...ユーザーはそれらの使用方法を知っています。したがって、それは最高のエクスペリエンスを提供しない可能性がありますが、ユーザーはそれに遭遇したときに何をすべきかを知っている可能性があります。

私は通常、ドロップダウンは使いすぎだと思います。

2
James D

ほとんどの国のドロップダウンリストには300以上のエントリがあります。誕生年を選択すると、おそらく100以上のエントリがあります(それらを除外したくない Centenarians )。しかし、これらはよく知られたオプション用です。問題は、人々が探しているものがわからないときに発生します。一部の国のリストはイギリス、一部はイギリス、一部はイギリス/スコットランド/ウェールズ、一部はトップ近くにあるなど、国リストでもイギリスを国リストで検索するのは面倒です。

したがって、リストは数値またはアルファベット順に並べ替える必要がありますが、100のリストでも問題ありません。さらに、「 Typeahead 」の概念を使い始めることができます。

enter image description here

1
icc97

デスクトップ用(ユーザーの利便性のみを念頭に置いて)

リストが動的な場合は、自動提案を使用します。

リストが静的で小さい場合(最大10項目)、単純なドロップダウンを使用します

リストが静的であるが大きい場合、テキストのサイズに基づく

---短い長さ(最大20-25文字)の場合は、スクロール可能なドロップダウンを使用します

---長い場合(25〜30文字以上)、自動提案を使用します

モバイル用

自動提案と同じくらい軽量なものを使用してください。私の経験によれば、ドロップダウンはモバイルデバイスで使用するには少し重すぎます。

リストが3〜4アイテムと小さい場合は、ラジオボタンを使用します

0
ripu1581