Mistake #62 : Infinite Scroll Trap

永遠に辿り着けない
ゴールテープ

マウスを動かすたび、その「リンク」は逃げていく。
会社概要やお問い合わせに辿り着くためには、
ユーザーは音速でスクロールし続けるしかない。

🏃 追いかけっこUI診断
  • InstagramやTwitterを真似て「無限スクロール」を採用している
  • ページの一番下(フッター)に「会社概要」や「お問い合わせ」リンクがある
  • スクロールして最下部に近づくと、自動的に次のコンテンツが読み込まれる
  • 商品一覧から詳細ページに行き、ブラウザの「戻る」を押すと、リストの最初に戻される
⚠️ 警告:これは「ユーザーへの嫌がらせ」です。
重要な情報(フッター)へのアクセスを物理的にブロックしています。

01. 逃げるフッター

(↑ マウスを乗せるとフッターが逃げます)

「無限スクロール」は、暇つぶしのSNSには最適です。
しかし、目的を持って情報を探している会社のWebサイトや、ECサイトに導入すると大事故になります。
ユーザーがフッターにある「連絡先」を見ようとして下までスクロールした瞬間、
新しい記事が自動的に読み込まれ、フッターはさらに下へと押しやられます。
これは、走っても走っても逃げていくゴールテープのようなものです。

「もっと読む」かどうかは、
ユーザーに決めさせろ。

02. ブラウザの「戻る」が死ぬ

無限スクロールのもう一つの罪は、「現在地」を見失わせることです。
100件スクロールした後に商品をクリックし、やっぱり違うなと思って「戻る」ボタンを押すとどうなるか?
多くの実装では、スクロール位置がリセットされ、また1件目からやり直しになります。
このストレスに耐えられるユーザーはいません。

03. ページネーションの復権

古いと思われがちな「ページネーション(1, 2, 3...)」や、
「もっと見る(Load More)」ボタンの実装は、実はユーザービリティの観点からは非常に優れています。
ユーザーは「自分の意思で」次の情報を読み込むことができ、
いつでもフッターの情報にアクセスできるからです。
流行りの技術が、常に正解とは限りません。

執筆:UIユーザービリティ研究所

アイトラッキング(視線計測)調査に基づく科学的なUI改善を提案。
「なんとなくカッコいい」デザインが生む機会損失を、数値で証明します。