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

Nick Babichは開発者であり、技術愛好家であり、UX Planetブログで無限スクロールに関するメモを書いたUX / UIスペシャリストに愛されています。



「コンテンツには何を選択すればよいですか：無限スクロール、またはページネーション？」一部のデザイナーは、プロジェクトで何を使用するかを決定する前に、2つの方法の間でロープを引っ張っています。 それぞれの方法には、独自の長所と短所があります。 この記事では、プロジェクトでどちらを使用するかを簡単に決定できるように、2つの手法の概要を説明します。

無限のスクロール

無限スクロールは、ユーザーが大量のコンテンツをスクロールして、その終わりが見えないようにする技術的な手法です。 このメソッドは、下にスクロールするときにページを更新するだけです。 とても魅力的に見えますが、この方法はどのサイトやアプリケーションにとっても理想的なソリューションではありません。



プラス1：ユーザーの関与とコンテンツの開示。

データマイニングの主な方法としてスクロールを使用すると、ユーザーがWebページに長くとどまり、コンテンツへの関与が増加するという事実につながる可能性があります。 ソーシャルネットワークの人気により、消費されるデータの量は増加します。 無限スクロールは、すべてのページを読み込むことなく、この大量の情報を効率的に表示する方法を提供します。

無限スクロールは、ニュースインターフェイスの重要な要素です。 ユーザーが特定の何かを探していないときは、多くのトピックを調べて好きなものを見つける必要があります。


オーシャンノーツPinterest

Facebookのニュースフィードを例として使用すると、無限スクロールの利点を理解できます。 コンテンツは頻繁に更新されるため、ユーザーはFacebookの書かれていない法律を理解しています。 ただし、無限スクロールの助けを借りて、Facebookはディスプレイ上のユーザーに対して可能な限り多くの情報を表示するために、可能な限りのことを行っています。 この場合、ユーザーはスクロールによって情報をスキャンし、このストリーム内を移動できます。


Facebookフィードを使用すると、更新された膨大な量のコンテンツを表示できます

プラス2：クリックするよりスクロールする方が良い。

ユーザーが押す/クリックするよりもスクロールを使用する方が便利です。 ホイールとタッチスクリーンを備えたマウスは、クリックするよりもスクロールをはるかに簡単にしました。 長い連続コンテンツの場合、たとえば、スクロールで移動する教科書は、テキストがいくつかの別々の画面とページに分割されているときにクリックするよりもはるかに快適です。



クリック/クリックするには：各コンテンツの更新には、追加のクリックとページタイムアウトが必要です。 スクロールするには：単一のシンプルなアクションでコンテンツを更新します。

プラス＃3：スクロールはモバイルデバイスに適しています。

画面が小さいほど、スクロールバーは長くなります。 ブラウザのモバイルバージョンを普及させることは、スクロールを支持するもう1つの重要な議論です。 スクロールは、タッチスクリーンから管理するときにシンプルで使いやすいです。 その結果、ユーザーは、使用するデバイスの種類に関係なく、真にレスポンシブなアプリケーションまたはサイトを楽しむことができます。



マイナス1：ページのパフォーマンスとデバイスリソース。

ページの読み込み速度は、ユーザーにとって最も重要なことです。 多くの研究により、ダウンロード速度が遅いと、サイトを離れたり、アプリケーションをアンインストールしたりすることが示されています。 そして、これは無限スクロールを使用している人にとっては悪いニュースです。 より多くのユーザーがページをスクロールダウンするほど、1つのページにより多くのコンテンツがロードされます。 その結果、コンテンツの更新速度はますます低下します。

別の問題は、デバイスの限られたリソースです。 iPadなどのリソースが限られている多くのデバイスでは、ダウンロード可能な情報が大量に流れるため、特に大量の画像を含むサイトの無限スクロールが遅くなり始める可能性があります。

マイナス2：オブジェクトの検索と場所。

無限スクロールの別の問題は、ユーザーがストリームの特定のポイントにいると、ブックマークを使用して位置を修正できず、後でこのポイントに戻ることができないことです。 サイトを離れると、ブラウジングを終了したポイントを失い、同じ場所に戻るにはもう一度スクロールする必要があります。 スクロール位置を修正できないことは、ユーザーに不便をもたらすだけでなく、結果として、全体的なインタラクションエクスペリエンスを台無しにします。

2012年、Etsyは無限スクロールの新しいインターフェイスの実装に多くの時間を費やし、この新しいインターフェイスが機能的に古いインターフェイスよりも著しく劣ることを発見しました。 購入数は減少していませんが、ウェブサイトの使用状況の指標は大幅に低下しています。今では検索をあまり頻繁に使用していません。


スクロールバーを備えたEtsyの検索インターフェイス。 現在のバージョンにはページネーションが含まれています

Dmitry Fadeevは次のように述べています。「人々は検索結果のリストに戻り、今見たばかりのオブジェクトをもう一度見て、リストの反対側にあるオブジェクトと比較したいと考えています。 無限スクロールは、これを行うことを妨げるだけでなく、リストを上下に移動することも難しくします。 ユーザーがページを閉じてから再度開くと、リストを再度スクロールして、すべての検索結果が読み込まれるのを待つ必要があります。 したがって、無限スクロールインターフェイスは実際にはページネーションよりも遅くなります。

マイナス3：スクロールバーの不一致。

別の厄介なことは、スクロールバーが実際のデータ量を反映しないことです。 終わりが近いことを完全に確信してスクロールダウンします。 これは、それ自体で、残っているものがほとんどないため、最後まで締めることをお勧めします。 しかし、それからさらに低くなり、突然バンドがロードされて倍になり、表示する必要があるだけの情報が追加されました。 ユーザーのアクセシビリティの観点から、ロード可能なスクロールバーは非常に悪いオプションです。


スクロールバーは、実際のページサイズを反映する必要があります。

マイナス4：フッターの欠如。

フッターには理由があります。フッターには、ユーザーが時々必要とするコンテンツが含まれています。 たとえば、ユーザーが何かを見つけられない場合、またはより多くの情報が必要な場合、通常はフッターを使用します。 しかし、スクロールバーは無限であるため、スクロールバー内の新しいデータはすべてロードされ、ダウンするにつれてロードされ、フッターは常に見えなくなります。



2012年にLinkedInがインターフェイスに無限スクロールを導入したとき、ユーザーはコンテンツバーの新しい部分をロードする前に画面の下部を見る機会がありました。

無限スクロールを実装するサイトでは、フッターをスクロールバーの下部に添付して常に使用できるようにするか、フッターに含まれる情報をページタイトルまたはサイドバーに転送する必要があります。


Facebookはすべてのリンクをフッターから右側のサイドバーに移動しました

別の解決策は、ダウンロードボタンを使用してコンテンツをオンデマンドでダウンロードすることです。 ユーザーがボタンをクリックするまで、新しいコンテンツは自動的にダウンロードされません。 これにより、ユーザーはフッターを追いかけるのではなく、フッターに簡単にアクセスできます。


Instagramには、ユーザーがフッターにアクセスできる[詳細をアップロード]ボタンがあります

ページネーション

ページネーションは、コンテンツを個別のページに分割するユーザーインターフェイスフレームワークです。 ページを下にスクロールして一連の数字が表示される場合、これはサイトまたはアプリケーションのページ番号です。



プラス1：良好な変換。

ページネーションは、ユーザーが情報の流れをスキャンして要約するだけでなく、結果のリストで特定の何かを検索するときに最適に機能します。

例としてGoogle検索を使用すると、ページネーションの利点を理解できます。 リクエストに応じて、最適な検索結果の選択には数秒または数時間かかる場合があります。 ただし、現在のGoogle形式での検索を停止する場合、検索結果の正確な数がわかります。 停止する場所、または表示する必要のある結果の数について決定できます。


Google検索結果

プラス＃2：コントロールの感覚。

無限スクロールは無限のゲームのようなものです。どれだけスクロールしても、最後まで到達しないという感覚が残ります。 ユーザーは利用可能な結果の正確な数を知っている場合、無限にスクロールするリストをさまよい回るのではなく、いつ停止するかについてより情報に基づいた決定を下すことができます。 David Cuirassの調査によると、「エンドポイントに到達すると、コントロールの感覚が得られます。」 この調査では、ユーザーが限られているが重要な結果を残している場合、これらの結果の中から必要なものかどうかを簡単に判断できることも明らかにしています。

また、ユーザーが結果の合計数を見ると（もちろん、データの合計量が無限でない場合）、必要なものを見つけるのにかかる時間を見積もることができます。

プラス3：要素の場所。

ページネーションインターフェイスを使用すると、ユーザーは要素の場所を視覚的に記憶できます。 ユーザーは正確なページ番号を覚えていない場合がありますが、目的のオブジェクトがどこで見られたかを大体知っているので、番号付きのリンクを使用して必要な場所にアクセスできます。



ページ分割されたユーザーは、クリックして以前の場所に戻るページを知っているため、ナビゲーションを制御します。

ページネーションは、サイトやオンライン販売アプリケーションでうまく機能します。 オンラインストアで何かを購入するとき、ユーザーは中断した場所に戻って購入を継続できるようにしたいと考えています。


MR Porterはページネーションを使用します

マイナス：追加のアクション。

ページ分割されたコンテンツの次の部分に移動するには、ユーザーはターゲットリンク（たとえば、「次へ」）を見つけ、マウスをポイントし、クリックして新しいページが読み込まれるのを待つ必要があります。


クリックしてコンテンツをダウンロードする必要があります。

ここでの主な問題は、ほとんどのサイトでユーザーに1つのページに非常に限られたコンテンツが表示されることです。 ダウンロード速度を犠牲にすることなくページを長くすると、ユーザーは1ページでより多くのコンテンツにアクセスでき、ナビゲーションボタンをあまり頻繁にクリックする必要がなくなります。

いつ無限スクロール/ページネーションを使用しますか？

無限のスクロールが効果的となる状況はわずかです。 ユーザー生成コンテンツ（Twitter、Facebook）またはビジュアルコンテンツ（Pinterest、Instagram）を表示するサイトおよびアプリケーションに最適です。 一方、ページネーションは、安全なオプションであり、ターゲットユーザーアクティビティ向けに設計されたサイトおよびアプリケーションに適したソリューションです。

グーグルは説明する良い例です。 ユーザーがテキストよりもはるかに高速に画像を表示するため、Google Imagesは無限スクロールを使用します。 検索結果の読み取りにはさらに時間がかかります。 これが、Google検索の結果が従来よりも個別のページとして表示される理由です。

おわりに

設計者は、いずれかの方法を選択する前に、無限スクロールとページングの長所と短所を比較検討する必要があります。 選択は、プロジェクトのコンテンツとそのコンテンツの表示方法によって異なります。 要約すると、無限スクロールは、ユーザーが特定のことに集中せずに無限に流れるデータストリームを消費するTwitterなどのサイトまたはアプリケーションでうまく機能します。 ページ分割されたインターフェイスは、ユーザーが特定の製品を検索しているときに検索結果を表示するのに適しています。表示される各アイテムのローカライズは重要です。

次の記事では、無限スクロールとページネーションの使用の最良の例を見ていきます。 どうぞお楽しみに！