web-dev-qa-db-ja.com

通常のページネーションと無限スクロール

私は現在出会い系サイトを作っています、私のページネーションの選択は伝統的なものの間です:

[<< Prev] [1] [2] [3] [Next >>]

[ Load More ]

2つ目は、TwitterやFacebookなどの人気サイトにある「もっと読み込む」バーまたはボタンです。どちらの方法でも、結果はページのリロードなしでajax経由で配信されます。

私はあなたがux人ではなく開発者であるので、このようなサイトにとってより適切でユーザーフレンドリーであるとあなたが思うことは何だと思いましたか?基本的に、ページの上部に多数のフィルターを備えた検索フォームがあり、ユーザーがオプションを選択してヒットを送信すると、結果がフォームの下の同じページに表示されます。

さらに多くのタイプのページネーションをロードする場合は、自動ロード(つまり、ユーザーがページの下部に到達すると、何もすることなく結果のロードを増やす)にするか、クリックするだけでより多くロードする方が良いでしょうか?

私は個人的に自動読み込みが面倒だと思っていますが、大多数の聴衆がそれについてどのように感じているのかわかりません。

64
Sammy

[ Load More ]は、ページネーションリンクのセットよりも「フレンドリー」ですが、重要なのは、表示できるデータがどれだけあるかを示すものがないことです。したがって、その情報を提供する何か他のものを追加する必要があります-利用可能であると仮定します。

一致の総数がわからない場合(@Ericsに感謝)、[ Load More ]が理想的です。

一致の総数がわかっている場合は[ Load More ]プラス一致の合計数の表示は問題ありません。通常、人々は一致の最初の数ページの「ページ」からの結果のみに関心があるためです(ここでGoogle検索結果が思い浮かびます)。

次の質問に回答する必要があります。ユーザーは、一致する可能性のあるページが3(または5)ページあることを知っている必要がありますか、それとも[ Load More ]彼らがa)マッチを見つけるか、b)退屈するまで?

前者の場合は、この合計が必要です。ページネーションを使用するには、後者の場合は、[ Load More ]

最終的には、自動読み込みを使用するかどうかは個人的な好みだと思います。個人的には、ページの一番下までスクロールして、まだ表示されていないデータの量が表示されることを期待しているので、迷惑ですが、ユーザーには表示されない場合があります。

37
ChrisF

私はあなたと同じ意見です。私は無限のスクロールが好きではありません。タフで、時間とともに、これは変わるかもしれません。

Jeff Atwoodは彼のブログ投稿 The End of Pagination で、

何よりも、ユーザーは必要なものを見つけるためにいくつかのアイテムを見る必要がないので、ページネーションを無意味にするよう努めるべきです。

したがって、私のアドバイスは、最終的にどのような選択をしても、ユーザーが簡単にプロファイルページを閲覧したり、結果ページに戻ったり、新しいプロファイルページを閲覧したり、結果に戻ったりすることです。また、別のブラウジング習慣を試します。このシナリオでは、タブを1つだけ開いて、またはプロファイルページを確認するときに新しいタブを開きます。 (これにより2つの質問が開きます。1つ目は、中クリックで新しいページにプロファイルリンクを開くのが簡単なことです。 この種の動作 に注意してください。2つ目は、新しいタブでプロファイルを開いたら、結果ページにリンクしますか?この場合、ブラウザの戻るボタンを押すことはできません。)

ジェフ・アトウッドは、無限のページネーション、または無限スクロールの欠点のいくつかも指摘しています。

  • スクロールバー。ユーザーの道徳的コンパスであり、「どれだけ多くあるのか」ということです。それは事実上無限なので、無限のページネーションでは機能しません。その重要なフィードバックを提供する別の方法が必要になります。おそらくページの下部にドッキングされた単純なロード済みテキストの割合としてです。
  • 無限のページネーションはディープリンクを壊すべきではありません。 「ページ」の概念がなくても、ユーザーはリスト内の特定のアイテムに明確かつ明確にリンクできる必要があります。
  • ブラウザーの[進む]または[戻る]ボタンをクリックすると、おそらく pushState を使用して、エンドレススクロールストリームでのユーザーの位置が保持されます。
  • ページネーションは悪いユーザー体験かもしれませんが、それはウェブスパイダーにとって不可欠です。従来のページングスキーム、または Sitemap でWeb検索エンジンに対応することを怠らないでください。
  • リスト内の新しいアイテムを動的にロードするときに目に見えるフィードバックを提供して、ユーザーが新しいアイテムが来ており、ブラウザーがハングしていないこと、およびまだ一番下に到達していないことを通知できるようにします。
  • アイテムが無限のコンテンツの川を下にスクロールしてもアイテムが表示され続けるため、ユーザーがフッター(またはヘッダー)に到達できなくなることに注意してください。そのため、静的なヘッダーとフッターに移動するか、新しいコンテンツを自動的にロードする代わりに、明示的な「さらに読み込む」ボタンを使用します。
22

私はそれをこのように考えています:

  • ユーザーにノンストップでより多くのページを表示したい場合は、自動ページ付けを使用してください(手動でクリックした後、コンテンツの最後に追加するだけではありません)。表示されるページのしきい値を設定したり、表示されていない結果に制限したり、このモードに対応する設定をユーザーに提供して、情報の過負荷を防ぐことができます。 n番目のしきい値に達する前に手動の[さらに読み込む]ボタンを使用しないでください。追加の利点を提供することなく、このメソッドには従来のページ付けの欠点が生じます。定期的なhistory.pushStateを実行して、ページが遅くなったりクラッシュしたりした場合に、ユーザーが最後に表示された結果から続行できるようにすることができます。
  • 最初のいくつかのページだけに注意を集中させたい場合(ある種のプロモーションシステムが設置されている場合)、または検索アルゴリズムの自然な結果である場合(後の結果の関連性は低くなります)、サーバーをオフロードするか、簡単に戻る可能性があります。結果の特定のサブグループ(特定の日付周辺など)は、古典的なページ分割の時間です。

いずれにせよ、ユーザーがより好みのものを選択するためのパーソナライズされたオプションを追加して、デフォルト設定で(一時的な)A/Bテストを使用して、ユーザーが実際に好きなものを確認することを妨げるものはありません。

5
DitherSky

どちらの方法でも、結果はページのリロードなしでajax経由で配信されます。

考慮すべきことの1つは、ページ付けルートを使用する場合、ユーザーが戻るボタンを使用する傾向があることです。 「ねえ、2ページのその人をもう一度見に行きましょう...」のような結果がajax経由で追加された場合、ブラウザの[戻る]ボタンは自動的に前の結果に移動しません。

**

http://danwin.com/2013/01/infinite-scroll-fail-etsy/

私の答えを投稿してから数日後にこれが見つかりました。 etsyで無限スクロールが失敗した理由についての興味深い読み。プレゼンテーション/スライドはまだチェックアウトしていませんが、予定しています。

4
Jeremy A

ユーザーがリストを見ているときにユーザーが解決しようとする可能性がある問題を考慮する必要があります。彼は私たちがTwitterやFacebookストリームで行うようにブラウジングしてから、「もっと読み込む」を使用していますか。彼は後でもう一度見たいと思うかもしれない特定の情報を見つけようとしていますか?あなたはページネーションに行くべきです-ここでこれらすべての賢い人々によってすでに指摘された理由のために。 :-)

3
Steffen Kastner

多くの人が無限スクロールについて考えていないことの1つは、基本的にフッター領域にあるUI要素に到達できないことです。

あなたのサイトの多くの/すべてのページにまたがる便利なリンクを備えた太いフッターがある場合、無限のスクロールは不快な体験を作成します。ユーザーは一番下までスクロールし、1〜2秒フッターを表示してから、新しい結果セットを表示します。

それはかくれんぼのゲームに変わり、一部のユーザーにとっては非常にイライラすることがあります。

2
Charles Wesley

今日、パフォーマンスの向上にページングの古い概念が追加されたため、インターネットではページ付けがより一般的になっています。しかし、インターフェイスの調査によると、アプリケーション、マシンのパフォーマンス、プログラミングによっては、無限スクロール、またはより魅力的であるだけでなく[さらに読み込む]が優れたユーザーエクスペリエンスを提供できるため、機能の向上に貢献しています。

利点:

  • ユーザーをサイトに長く留めておく
  • スクロールはクリックよりも優れています

短所:

  • ユーザーがクリックして戻ると、進行状況が失われ、ページの上部に戻ります
  • ユーザーは結果のあるアイテムの数を知りません

Infinitスクロールを使用しても、検索結果を即座に取得できない場合は、パフォーマンスを高く保つ必要があります。ページネーションに変更してください。ただし、適切なパフォーマンスを維持できる場合は、無限スクロールを使用できます。結果リストにフィルターを追加して、ユーザーにとって使いやすくすることができます。

重要なことは、アプリケーションで結果の関数を判別して、ページングまたは遅延ロードを使用する必要があるかどうかを知ることです。

これらのリンクが役立ちます: 124

1
Maisa Barros

あなたが出会い系サイトを作っているなら、ページネーションは1,2,3(それは退屈かもしれません)ではなく、load moreであるべきです。

[〜#〜] more [〜#〜]を求めている場合は参照してください。はい、もっと見る。結果の数を明らかにせずにユーザーに興奮を引き起こしています。ユーザーにとって、特に出会い系サイトでもっと見るのはいつも刺激的です

0
pzv

それはページの要素の閲覧や操作に費やした時間に依存すると思います。ユーザーからの予想されるおおまかな関与のみがある場合は、無限スクロールがより良い選択です。ただし、たとえば、その求人サイトの場合、ユーザーは抜粋などを読むのにある程度の時間を費やすことが予想されるため、ページ付けを優先する必要があります。

両方のユースケースの具体例:

  • Pinterest:ページ上の要素への軽い関与、無限スクロールはうまく機能します。
  • Google画像:危険な関与、ユーザーからの迅速なブラウジングが期待されます(画像に興味があるかどうかにかかわらず、非常に速く判断できます)。したがって、無限スクロールはうまく機能します。
  • 求人サイトを探す:各要素(求人の説明)への関与が深まるため、ページ付けがうまく機能します。

しかし、できる限りいつでもページネーションを好むのでしょうか?まあ、ページネーションは、ここで他の回答で述べたように、複数の利点を提供します。つまり、結果数の見積もり、特定のページへの迅速な閲覧、より良いSEOなどです。

ユーザーが同じ時間を費やしてページの要素を表示し、次のページが読み込まれるのを待っている場合は、無限スクロールを行うことをお勧めします。

無限スクロールも、従来のページネーション設定のすべての利点を含めるために、その実装に追いつくことを願っています。

0
Adnan Khan