ロングスクロール、または無限スクロールのWebサイトは、まさにそのとおりです。ページは「平均的な」Webサイトページよりもはるかに長いため、「無限に」スクロールします。これらのタイプのサイトは、ユーザーが作成したコンテンツを多く含むソーシャルメディアサイトやPinterestのようなサイト、および一部のニュースやブログサイトで人気があります。個人のウェブサイトやポートフォリオも、増加するためにロングスクロール技術を採用し始めています。ユーザーエンゲージメントと人々がサイトで過ごす時間の長さ。

無限スクロールは人気のある一般的なデザインパターンになっていますが、それでもいくつかの潜在的な落とし穴があります UIデザイナー 長いスクロールを使用するサイトを設計するときは注意する必要があります。長いスクロールデザインパターンを採用することが適切でないサイトの種類もあります。

ロングスクロールの目的と利点

ロングスクロールWebサイトの最大の利点の1つは、訪問者をサイトに長くとどまらせることです。より多くのコンテンツを消費するために意識的に決定する必要がない場合、クリックする可能性は低くなります。

これは、Facebook、YouTube、Netflix、および同様のサイトが、ユーザーが表示しているものが終了したときにビデオを自動再生する方法に似ていると考えてください。彼らは、訪問者が新しいビデオをクリックする努力をしなければならない場合、まったく別のサイトをクリックする可能性が高いことを知っています。ただし、動画が再生され続けると、視聴を続ける可能性が高くなります。

長いスクロールサイトが適切にコーディングされると、新しいコンテンツごとに新しいURLが読み込まれます。これは、サイトのページビューが増えることと同じであり、広告収入とサイトの全体的な価値を高めることができます。

他のUXの決定と同様に、フォーマットを決定する前に、実際にサイトを使用する人々の長所と短所を比較検討することが重要です。長いスクロールは、特定の種類のサイトに最適なオプションですが、他の状況では、ユーザーを苛立たせるだけです。 2つの違いを学ぶことが重要です。

ロングスクロールを使用する場合（および使用しない場合）

長いスクロールを検討する際に覚えておくべき重要なことは、どのような種類のサイトが設計されているかに関係なく、コンテンツがフォーマットを決定する必要があるということです。長いスクロールのWebサイトは、特定の種類のコンテンツには最適ですが、他の種類のコンテンツでは大きなUX障害が発生する可能性があります。

全体として、タスクおよび目標指向のサイトは、無限のスクロールデザインの恩恵を受けません（たとえば、eコマースサイトやチュートリアル、またはユーザーが明確な進歩を見たいと思うその他の教育サイト）。これらのタイプのサイトは、ユーザーに完了と達成の感覚を与える必要があります。これは、長いスクロールサイトでは達成するのが困難です。

たとえば、Etsyは、2012年に無限のスクロールデザインを試し、最終的には ページネーションに戻す 。彼らは、顧客が依然としてほぼ同じレートで購入している一方で、ユーザーエンゲージメントが大幅に低下していることを発見しました。実行された検索の数のようなものでさえ落ちました。

一部のeコマースサイトが訪問者に提供するオプションの1つは、製品ページを表示するときの「すべて表示」オプションです。これにより、ユーザーは、無限スクロール形式を好むユーザーのために短い結果ページを保持しながら、無限スクロール形式でサイトを表示するオプションを利用できます。

ページネーションは、情報を時系列で表示することが重要な場合にも役立ちます。 1ページのスクロールWebサイトが人々にスキミングして先にスキップするように促す可能性がある場合、ページ付けは訪問者の速度を低下させ、適切な順序で情報を消費する可能性を高めます。

cfoは会社で何を意味します

単一ページのスクロールWebサイトが本当に輝けるのは、追加のコンテンツや記事を読むことが自然な流れであるサイトです。これは、ニュースサイトや話題のブログなどに適用されます。これらのサイトのユーザーは、一度に大量の情報を取りたいと思うことがよくあり、無限スクロールを使用すると、はるかに簡単になります。

無限スクロールが人気のあるUXの選択肢であるもう1つの明らかな領域は、ソーシャルメディアサイトまたはユーザー生成コンテンツが多いサイトです。 Facebook、Pinterest、Twitterはすべて無限スクロールを使用しています。これらのサイトは、ユーザーをできるだけ長くサイトにとどまらせたいと考えており、無限スクロールはそれをうまく行います。

ロングスクロールの心理的コスト

ザ・ 心理的影響 設計上の決定は常に慎重に検討する必要があります。単一ページのスクロールWebサイトに関しては、それに反対するだけでなく、心理的な影響もあります。

最初に考慮すべきことは、ユーザーは意図的なクリックを気にしないということです。クリックは、その開始以来、事実上、コンピューティング、グラフィカルユーザーインターフェイス、およびインターネットの一部でした。人々はその特定のタイプのインタラクションに慣れており、より多くのコンテンツにアクセスするためにいくつかのリンクをクリックする必要がある場合でも、オフになることはありません。

多くのユーザー 無限スクロールが嫌い デフォルトでは。スクロールするページが非常に長いことに直面すると、終わりのない情報の海に溺れているように感じることがあります。ユーザーが特定の情報を探している場合、スクロールがそれを見つける最も効率的な方法になることはめったにありません。

ページの長さが正確に表示されないため、無限スクロールはページの横にあるスクロールバーを壊します。すべてのユーザーがスクロールバーを使用しているわけではありませんが、この点で、使用しているユーザーは無限のスクロールをイライラさせる可能性があります。

無限スクロールはまた、ユーザーがタスクを完了したり、あるページで目標を達成してから次のページをクリックしたりすることで得られる完了感を取り除きます。この完成感を失うと、ユーザーの意欲を失い、同じ情報やタスクについて他の情報源を探すようになる可能性があります。

長くスクロールするウェブサイトが持つ可能性のあるもう1つの心理的な悪影響は、ユーザーがページのさらに下にあるコンテンツを上部のコンテンツよりも重要性が低いと見なす傾向があることです。ヘッダーを使用すると、「トップ」がどこにあるかについて訪問者の脳を「リセット」するので、これに役立ちます。

ロングスクロールウェブサイトのベストプラクティス

ウェブサイトプロジェクトが長いスクロールデザインに適していると判断された場合、最適なユーザーエクスペリエンスを提供するために留意すべきいくつかのベストプラクティスがあります。

まず、フッターを捨てます！コンテンツが継続的に読み込まれると、フッターはページの下部から継続的に押し出されます。つまり、フッターに含まれるコンテンツや情報は見えないままになります。さらに悪いのは、ユーザーがフッターを垣間見たが、何かをクリックする前にフッターを見失った場合です。スティッキーフッターを使用することはこれを回避する1つの方法ですが、フッターを完全に取り除く方が良いオプションであることがよくあります。

スクラムチームに最適なサイズはどれくらいですか？

視覚的な手がかりを使用することは重要です。特に、メイン画面が読み込まれたときにページにコンテンツが多いことがすぐにわからない場合は重要です。ページの読み込み時に画面全体に表示される大きなヘッダー画像またはビジュアルコンテンツがあるサイトには、多くの場合、下にコンテンツがあることを示す矢印（アニメーションの場合もあります）または同様の画像が含まれています。

スティッキーヘッダーまたは固定ヘッダーを使用して、ナビゲーションが常に表示されるようにする必要があります ナビゲーションリンク付きサイドバー 。これの例外は、スティッキーヘッダーが貴重な画面領域を占める可能性があるモバイルデバイスです。 Facebookは、ユーザーが下にスクロールするとヘッダーが消え、上にスクロールし始めると再び表示されるようにすることで、これをうまく処理します。

Chrome Webブラウザーは、画面下部のコントロールと同様のことを行います。ユーザーが下にスクロールすると消え、上にスクロールし始めると再び表示されます。これは、利用可能な画面領域を最大化するインターフェースを作成するための非常に直感的な方法です。

ありがたいことに、無限スクロールWebサイトでより一般的になっている重要なUX機能の1つは、各セクションがスクロールされるときにURLを変更することです。ページ内の内部ブックマークを使用してこれを行うものもあります。他のサイト、特にニュースサイトやブログでは、ユーザーがスクロールするとURL全体が更新されます。これは、ページ自体の変更に関係なく、ユーザーがリンクしたいコンテンツに正確にリンクできるようにするため、重要です。

いくつか ウェブデザイナー 同じページにコンテンツを直接ロードする「さらにロード」ボタンを使用して、「ハイブリッド」の長いスクロールサイトと見なすことができるサイトを作成することを選択します。いくつか UIデザイナー これをページで繰り返し使用しますが、他の人は一度だけ含めることを選択し、その後、サイトをより伝統的な長いスクロール形式に変えます。

これらの長いスクロールのWebサイト固有の設計上の考慮事項に加えて、優れた設計を作成するための他のUIおよびUXのベストプラクティスは、無限スクロールを採用するサイトにも適用されます。

右に行われた長いスクロールの例

レール上のルビーの未来

銀行の財務機能

それからこのサイトがあります アンドリューマッカーシー 。デザインはユニークですが、同じ情報で何度も何度も無限にスクロールします。マッカーシーはデザイナーなので、群衆から目立つために意図的に選択する可能性があります。

そして別の例 サムローゼン 、このサイトはすべてのコンテンツを再読み込みするのではなく、トップにループバックしますが、同じコンテンツを何度も繰り返します。

結論

長いスクロールのウェブサイトは目新しいものではありませんが、新しいレベルの成熟度に達しています。デザイナーはもはやそれらを単なる次の「大きな」ものとして採用するのではなく、パターンがユーザーエクスペリエンスにどのように影響するかに注意を払っています。

無限スクロールのWebサイトを作成する際のベストプラクティスに従うことで、デザイナーはユーザーを苛立たせるのではなく、喜ばせるUXを作成できます。同時に、適切に実装された長いスクロールWebサイトは、ブランドがWebサイトの目標を達成するのにも役立ちます。

•••

ApeeScapeデザインブログの詳細：

• 説得力のあるデザイン：高度な心理学を効果的に使用する
• デザイン心理学と素晴らしいUXの神経科学
• 経験がすべて–究極のUXガイド
• 究極のUXフック– UXにおける予測的、説得力のある、感情的なデザイン
• UXの実証済みの法則（インフォグラフィック付き）

基本を理解する

Webスクロールとは何ですか？

Webスクロールは、Webサイトで採用されている視差スクロールまたは無限スクロール技術のいずれかを指すためによく使用されます。無限スクロールでは、ユーザーが下にスクロールしてもコンテンツは1つのページに読み込まれ続け、ページ上に長く留まり、ユーザーが次のページをクリックする必要がなくなります。

スクロールページとは何ですか？

スクロールページは、より一般的にはロングスクロールまたは無限スクロールページと呼ばれ、ユーザーがページを下にスクロールしても新しいコンテンツをロードし続けるWebページです。これにより、ユーザーがアクティブにクリックしてより多くのコンテンツを表示する必要がなくなり、サイトに長く留まる可能性があります。

1ページのウェブサイトとは何ですか？

1ページのWebサイトにはさまざまな種類がありますが、最も一般的に見られるのは無限スクロールWebサイトです。これらのタイプのサイトは、コンテンツを異なるページに分割するのではなく、ユーザーがスクロールするにつれて、より多くのコンテンツを継続的にロードします。

複数ページのウェブサイトとは何ですか？

ユーザーがスクロールすると新しいコンテンツをロードする長いスクロールWebサイトとは異なり、複数ページのサイトはコンテンツを異なるページに分割します。複数ページのWebサイトは、タスク指向または目標指向のサイトなど、特定のタイプのサイトに適しています。