ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン？

今日は、Webページのデザイン、特にページを開いたときにまず見える「ファーストビュー」とスクロールの関係について、ユーザーテストの調査データから考え方やちょっとしたノウハウを。

ファーストビューで重要なメッセージが全部見えるように

こういうデザイン指示をすることはありませんか？ ユーザーはなかなかスクロールしてくれないのだからと、とにかく最初にページを開いた状態で表示される領域に情報を詰め込むデザインになっていませんか？

アクセス解析ツールユーザーインサイトで取得した、ユーザーのスクロール状況ヒートマップ

こうしたファーストビュー至上主義は、英国のユーザビリティ会社cxパートナーズの調査によると、どうやら都市伝説のようです。それどころか、ファーストビューに要素を詰め込んでいるデザインよりも、ファーストビューのコンテンツが少ないほうが、ユーザーはスクロールして他のコンテンツを探す行動に出る場合もあるとのこと。

そう、訪問者はコンテンツがあることがわかっていたら、ちゃんとスクロールしてくれるし、その証拠にアイトラッキング（視線調査）でも、スクロールバーに視線が行ってページの長さを確認する行動が、多くのサイトで確認されているとのこと。つまり、スクロールはユーザビリティ上の大きな問題ではないということなのです。

ただし、スクロールを妨げる典型的な要因もあります。

• 画面の途中で横幅いっぱいの横線で区切りを付けている場合（見出しが背景色つきのブロックになっているなど）は、それ以上スクロールしない人が増える傾向がある。

• ページ内の一部分だけがスクロールする（iframeなど）ようになっていると、そちらはスクロールしてもらえない傾向がある。

もちろん、訪問者はどんな長いページでも無限にスクロールしてくれるわけではありません。別の調査では、比較的ページの長いAmazonの商品ページなどでは、ページ全体の2/3より下はほとんど視線が行かなかったという結果も出ています。また、そのページを見る価値があると思わなければ、そもそもユーザーはスクロールしないでしょう。

重要なのは、

• 訪問者の気持ちをつかまえる要素がファーストビューに入っている。
• さらにその下にコンテンツがあることがユーザーにわかる。
• 横に区切るデザインをするときは、ページが終わったと勘違いしないようにする。

ですね。

根拠もなくページの上部600ピクセルの高さに大量のコンテンツを詰め込むのはやめましょう。Web担も、横幅いっぱいの区切りに見える見出しが一部あるので、ちょっと見せ方を工夫してみます。

ちなみに別の記事では、「縦に伸びるボックス状のデザインをしていると、続きがあることをユーザーは理解しやすい」といったヒントもありましたので、ご参考に。

※2010-02-08　この情報の元サイトhttp://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htmを記していませんでした。