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

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ものアイトラッキングによるユーザビリティテストを通じて得られた知見)を紹介しています。

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

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

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加