多くのオプションで選択を処理するにはどうすればよいですか？
Webアプリで、ユーザーが選択できるオプションのリストがあるとします。この場合、オプションの数がかなり少ない場合は、通常はドロップダウンを使用しますが、50のオプションがある場合、これにどのように異なるアプローチをする必要がありますか？または100？または1000？
おそらく、2つのペインによるアプローチと検索を組み合わせますか？
検索ボックスに入力すると、UIはクライアント側で動的にフィルタリングします。すべてのオプションを見つけることができるので、検索のみよりも好きです。
ボーナスポイントについては、通常の選択/複数のコントロールから オンザフライで作成 できます。
いくつかのアイデア：
- コンボボックス（またはオートコンプリートを使用した何らかの検索）
- オプションをグループに分割し、ユーザーが最初にグループを選択できるようにし、次にリストからオプションを選択します。この場合、オプションは小さくなります。
さて、ユーザーが数千のオプションから選択できるアプリがある場合、私の最初の応答は、あなたが何かを間違って設計したということでしょう。ズームアウトして、非常に多くのオプションにつながる情報アーキテクチャを検討し、それに対して何ができるかを確認してください。ユーザーは本当にこれらすべての選択肢が必要ですか？あなたは彼女のためにいくつかを取り除くか、いくつかの賢明なデフォルトを選ぶことができますか？選択のパラドックス問題にどのように対処しますか？
しかし、より現実的には、情報をカテゴリに分割して、そのように表示してみてください。あなたがどのような情報のために設計していたのかを知っていれば、それが役立つかもしれません。それは多くの場合、使用できる視覚化やコントロールの種類に影響を与えるからです。
タイムゾーンを検討してください。あなたは本当に具体的で、個々のタイムゾーンを提供することができ、ユーザーが消化できるようにするためにいくつかのハードワークをしなければならないという膨大なリストにつながります。または、ほとんどの場所に最も近いタイムゾーンのみを選択することもできます。これにより、少数の例外的なユーザーが除外される可能性がありますが、それらの99％をカバーします。
イベントの時間を選択する場合も同様です。特定であることは、ユーザーが分単位で選択できることを意味します。 60項目のドロップダウンメニュー？または、時間を5分ごとに分割することもできます。突然、ユーザーは12のオプションから選択するだけでよく、ユースケースに十分に特定できます。
その多くのオプションでは、どのタイプの複数選択も面倒です。 1つの間違ったクリックで30分が経過したと考えてください。
このような矢印の付いた2つのボックスを使用する必要があります
jSの数行で行うのはそれほど難しくありません
すべての要素が論理的にソートされたドロップダウンを使用します。
例-タイムゾーンリストはオフセットに従って並べられ、国のリストはアルファベット順になっています。
さらに、ユーザーが値を入力できることを確認すると、正しい値に自動提案/ジャンプされます。それらを論理的にグループ化します。名前だけの場合は、最初の文字を選択してから、項目のサブセットを適合させることができます。項目を論理的に分類できれば、たとえば、組織内の人々で、部門や地域などにうまく収まるのであれば、もっと良いでしょう。
いくつかのレベルの深さを持つこともできます。