ユーザーがリストから項目を選択できるようにするコントロールを作成しています。アイテムの数は大きく異なります-一握りから何百万まで。
オートコンプリート付きのドロップダウン機能は、賢明な選択のように思えました。アイテムが少ない場合、ユーザーは矢印をクリックして正しいものを選択できます。多くある場合、アイテムの名前を入力することで、正しいものをすばやく見つけることができます。
ただし、これだけでは不十分な場合もあります。数千のアイテムがある場合、ユーザーは探しているものを見つけるために、より高度な検索基準が必要になることがあります。現在、これは、追加の検索基準でダイアログを開くフィールドの次への検索ボタンとして実装されています。
ユーザーが条件を入力してSearch!ボタンをクリックすると、ドロップダウンに検索結果が表示されます。
残念ながら、このアプローチには問題があります。私が考えることができるいくつかは:
だから、私は提案を探しています。私がこれを逃した一般的な方法はありますか?高度なフィルターを再考する必要がありますか?これは視覚的な手がかりを追加するだけで改善できますか?
ドロップダウンを少し拡張して、ドロップダウンsensu strictoではなくペインとして扱うことができる場合は、もう1つ検討する必要があります。
右上の基準はフィルターで定義されたものの短い要約しか提示できないことを覚えておいてください。しかし、これはユーザーがそれを認識するのに十分でなければなりません。
アイデアは、ドロップダウンと一緒にフィルターを表示することです。
次のレイアウトを検討してください。
検索フィールドは明確に表示され、明確に区別され、フィルタリングされた結果はユーザーが選択するために下に表示されます。複数選択の場合、タグアプローチを使用できます。
どちらの例も、オープンソースのJavascriptプラグイン Chosen の一部です。
以下は、フィルタリングオプションと高度なフィルタリングオプションを含むドロップダウンの例です。
右側のフィルターアイコンは、高度なフィルタリングを切り替えます(この場合はファイルタイプ別)。フィルターアイコン(ボタン)の色を変更して、高度なフィルター処理の状態を区別できます(オフの場合は灰色、オンの場合は青)。