限界に挑戦–ロングスクロールウェブサイトの概要

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

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

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

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

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

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

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

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

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

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

たとえば、Etsyは、2012年に無限のスクロールデザインを試し、最終的にページ付けに切り替えました。 彼らは、顧客がほぼ同じレートで購入しているにもかかわらず、ユーザーエンゲージメントが大幅に低下していることを発見しました。 実行された検索の数なども減少しました。

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

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

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

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

長い巻物の心理的コスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論

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

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

•••

Toptal Designブログでさらに読む：

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