ユーザーはちゃんとスクロールする？

• 公開日 : 2009年12月21日 (2011年1月11日 更新)
• カテゴリー : ユーザビリティ

456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。

ここでいう「fold」とは、折り返しという意味ですが、もう少しわかりやすく言うと、Webページの情報のうち、ブラウザに表示される部分と表示されない部分の「境目」のことを「fold」と言います。スクロールせずに閲覧できる範囲のことをWebの業界では、「above the fold」または「first view」と呼んだりします。

Web制作者やウェブマスターの中には、「above the fold に情報を表示させないと、それ以下のコンテンツはユーザーに気づいてもらえない」といった話を聞くことが多いと思います。これに対し、上記の 456 Berea Street の記事では「Webを使う大半のユーザーはスクロールのしかたを知っているので、必要に応じてスクロールするものだ」と説いていて、その根拠として、「The myth of the page fold: evidence from user testing」での検証（800ものアイトラッキングによるユーザビリティテストを通じて得られた知見）を紹介しています。

この、アイトラッキングでの検証による共通して見られた知見として：

• ヒートマップ上でもっとも熱いスポット（ユーザーの目線が集まっていたところ）のひとつがスクロールバーであった（ユーザーはページの長さを推し測るためにスクロールバーに目をやり、スクロールすべきかどうかを判断する）。
• above the fold にコンテンツが少ないほど、ユーザーはスクロールして「その下」を見ることを促される現象が見られた。
• 「その下」にコンテンツが続いているように見えない視覚効果（横線で情報を区切ってあったりなど）があると、スクロールされない可能性がある。

といったことが挙げられています。こうした知見を踏まえた上で、3つのデザイン上のヒント（tips）をまとめています。（括弧内の日本語訳は、私の方で意訳したものです。）

1. Less is more -- don't be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
   （above the fold に情報を詰め込まない。ホワイトスペースや画像を上手にレイアウトに活かすことで、もっと下を見たいとユーザーに思わせることができる。）
2. Stark, horizontal lines discourage scrolling -- this doesn't mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.
   （水平方向にきっちり引かれた線などの区切りが above the fold のすぐ上にあると、そこでコンテンツが終わっていると誤認されてしまい、ユーザーにスクロールを促さない。「その下」にもコンテンツがあることを、above the fold の中でチラ見せできれば、スクロールを促すことができる。）
3. Avoid the use of in-page scroll bars -- the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.
   （ブラウザに標準装備されているスクロールバーは、そのページのコンテンツ量を視覚的に示すものなので、インラインフレームのような、ページ内要素でのスクロールバーの使用は避けるべき。ページ内にスクロールバーを持つ要素が他にあると、視覚的に混乱を来たし、ブラウザ標準のスクロールバーが持つこの慣習が崩れる恐れがある。）

当サイトのコラム記事「スクロールに気づかない」では、456 Berea Street の記事ほど楽観的ではないのですが（私自身のユーザビリティ検証の経験では、above the fold より下にある情報への到達度は、3割くらいではないかと述べています）、採るべき対策としては、「スクロールに気づかない」で書いた以下の解決法と、概ねベクトルとしては近いのではないかと思います。

そもそも、above the fold の領域をウェブ制作/運営者側が完全にコントロールすることは不可能なので（ユーザーは様々な端末、画面解像度、ブラウザを使ってアクセスしてきます）、「まずユーザーに伝えなければ話にならない」ほど大事な情報や、ページのアバウトネス（何について書いてあるかを端的に表すもの）を示す情報は優先的にページ上部に配置することを心がけ、あとは、ページレイアウトの組みかたによってスクロールがある（コンテンツが下にもある）ことを視覚的に示すことがポイントになるように思います。