web-dev-qa-db-ja.com

オプションのリストを表示する最良の方法

以下のようなオプションのリストがあるページがあります

  • 002-12345
  • 002-16516
  • 003-21565
  • 008-15168
  • 001-86841

現在、ボックス内に表示しており、ユーザーは上下にスクロールして、希望するアカウントを選択する必要があります。ユーザーが10,000個のアカウントを持っている場合、これは圧倒される可能性がありますが、このようなアカウントリストの100〜200ページが存在する可能性があります。ユーザーが005を選択する必要がある場合、ユーザーはそれに到達するために10ページをスクロールする必要があります。まあ、ユーザーにお気に入りを作って最初に表示してから、リストに残りを表示するように頼むことができます。これはクイック選択の改善ですが、他のアイデアは思いつきません。皆さんの提案はありますか?

写真で現在の様子を添付しました。

enter image description here

編集:@Mike Mがいくつかの素晴らしい質問をしたので、以下の情報を追加しました:デスクトップ、ユーザーがこのリスト内のいずれかのアカウントをクリックすると、ページにそのアカウントのステートメントが読み込まれます。テーブルの選択には、アカウント番号と名前の列のみが含まれ、ユーザーがアカウントを検索できる検索機能もあります。このテーブルを使用すると、理想的に選択しやすくなります。

1
Extelliqent

これを好転させる優れた方法は、質問することです。必要なものを見つけるにはどうすればよいですか。最適な体験になりたいですか?また、類似の製品/ソリューションはどのようにモデル化されていますか?

conversationalクエリを使用する方法と、relationalを使用する方法の2つがあります。 クエリ。

Reuters および Zoosk は、この良い例です。

enter image description here

大きな検索バーがあり、「どうすればすべてのパンケーキを食べられますか?」など、好きなように入力でき、サイトはそのクエリに一致しようとしますインテリジェントな方法で。それは会話型クエリです。この検索バーの下には、ユーザーがドリルダウンして必要なものに移動できるボタンがあり、relationalクエリを形成します:食べる->朝食- >パンケーキ->すべてのパンケーキ

うわー、それはたくさんのように聞こえます、え?しかし、これを設計に実装するのは簡単です。 text searchfiltersの2つを提供するだけです。

この人気のある例は、jQueryプラグイン datatable です。

enter image description here

ユーザーは大きく不気味なグリッドを見て、必要なものを正確に入力するか、必要なものが見つかるまで並べ替えたりフィルター処理したりできます。これら2つのメソッドがUIで共存できるようにすると、ユーザーが幸せになり、幸せになるはずです。

もう少し追加するだけです:私の愚かな頭脳は言うまでもなく行ったと感じましたが、問題に対処する方がよいかもしれません自動フィルタリングの機能と最善の方法常に素晴らしいnngrougには、その正確な主題について すばらしい記事 があります。

彼らの記事を少しまとめると、彼らが見つけたのは、フィルタリング中にユーザーの考え方を正確に予測することは難しいということです。そのため、以下を採用します。

  • フィルターの選択が完了したら、ユーザーに通知します。
  • フィルター周辺のアクティビティを検出します。 (マウスがフィルター領域を離れてメインの結果に移動する場合、ユーザーが結果の準備ができていることは良い兆候です)
  • 最後に選択してからの時間に基づいて結果を更新します。
2
invot

これは、私が以前に取り組んだ非常に類似したデザインの例です。ユーザーが必要なレコードに簡単にアクセスできるようにする3つの方法:

1-追加ソート、ユーザーにソートオプションを提供することは常に便利です。

2-フィルター!ユーザーが必要とする最も便利なフィルターを考えてください。

3-ユーザーが入力しているときにその場で応答するSearchテキストフィールドを提供します(つまり、ユーザーが「Can」と入力した場合、「それらにテキストを含めることができます)。

お役に立てれば!

enter image description here

2
Mo'ath