web-dev-qa-db-ja.com

無限スクロールリストでの「フロントエンド」ソート

Webアプリのメンバーのリストがあり、ユーザーが閲覧するときの使いやすさとパフォーマンスを向上させたい。このリストは非常に長くなる可能性があります(500以上のメンバー)。パフォーマンスを向上させるために、無限スクロール+レイジーロードによるページ付けを実装しています。リスト全体を遅延読み込みし、一度に25行ずつ名前とアバターで行を埋め始めます。

問題:データベースは、リストをアルファベット順で直接ロードできないように設計されています。ソートは可能です全リストがロードされます。

つまり、リストがlazyloadingの場合、ユーザーはリストを参照できますが、並べ替えの前に数秒待つ必要があります。

ユーザーエクスペリエンスのこのギャップは、ユーザーにとって混乱を招き、予期しないものになる可能性があると思います。この問題にどのように取り組みますか?

ありがとう! :)

3
Diana

あなたの質問は次のとおりです。

ユーザーにとって、これらの技術的な制約で達成できる最も不愉快な体験は何ですか?

サーバーのリファクタリングがないと、優れたUXを保証できないようです。考慮して下さい。

許容可能な時間内にサーバー上のリスト全体をロードしてソートし、キャッシュに保持することは可能ですか?クライアントが次のページを要求する場合、キャッシュ内のソートされたリストから取得できます。

それ以外の場合は、リストを順不同で提供し、ソートされていないことをユーザーに伝えます。クライアント側での並べ替えは、データが増えると並べ替えが変わるため、混乱を招きます。

編集:あなたは完全なリストをクライアントにロードすることを検討すると述べました。

ユーザーは待機しますか?または、彼らは簡単に忍耐を失って去ることができますか?

最初がtrueの場合のみ、完全なリストのロードはオプションです(理想からはほど遠いですが)。リストの用途がわからないので、この点からソートは関係ないと思います。リストの検索やフィルタリングは、もっと理にかなっています。そして、リストはすでにロードされているので、非常に応答がよくなる可能性があります(うまくいかない場合は、開始/長時間の待機を埋め合わせてください)。

読み込みのフィードバックについて。サーバー側はあまり協調的ではないので、プログレスバーを持つことはできないと思いますか?可能であれば、お持ちください。それ以外の場合は、一般に知られている読み込みアニメーションを使用して、ユーザーが何かがビジーであることを確認します。また、予想される平均時間(測定または推定)と、必要な最大時間(オプションでタイマーを使用)も表示します。このように、人々は自分が忍耐強くなければならず、何かが壊れたとは思わないことを知っています。

1
jazZRo

ユーザーは待つのが好きではありません、それは彼らの思考の流れを壊し、欲求不満を作成します。待機が予想外の場合、欲求不満ははるかに大きくなります。

ほとんどのサイトでの並べ替えは非常に高速で、予想外の遅延によりユーザーに不安が生じます。

ユーザーが嫌うもう1つのことは不確実性です。何が起こっているのか、それがどのくらいの時間かかるのかを知りたいのです。プログレスバーを使用すると、少なくとも並べ替えを待つ間にユーザーが経験する不満を和らげます。進行状況バーには、ランダムなグラフィックアニメーションだけでなく、実際の進行状況が表示されます。

参考: 待つことの心理学

1
DesignerAnalyst

視覚的に表示しているデータフィールドがわからないので、私の答えは役に立たないかもしれませんが、フィルターの追加を検討しています。並べ替えは、既に読み込まれているものに最適ですが、フィルターは読み込みに関するいくつかのルールを提供できます。

1
zizus