ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン?
今日は、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を記していませんでした。
コメント
「ボックス上のデザ
「ボックス上のデザイン」→「ボックス状のデザイン」でしょ?
修正しました
恥ずかしい変換間違いが残っていましたね。ご指摘ありがとうございます。
おかげさまで、正しい表現に修正できました。
善意のツッコミに、感謝でございます。
スクロールするピクセルを計算しておきます。
アクセス解析してますと、だいたいのサイトは上の方がCTRは高いですね。ただメディアサイトの場合、検索エンジン、メルマガからのユーザは内容を見たがるので、基本的にスクロールしますね。ダメデザインというのは、600ピクセル内にバナーをべたべたはってるデザインですね。ブラウザの高さのn乗でスクロール設計すると良いと思います。海外の事例では、年齢によってスクロールピクセルが違うので、ターゲットによってスクロール速度を想定したデザインにしてるケースがあります。
ファーストビューは
ファーストビューは大切だと思います。ユーザーは仕方なくスクロールしてるんだと。
ファーストビューは重要です
ファーストビューが重要なのは認めつつも、
・とはいえ、なんでもかんでもファーストビューに詰め込むべきではないよね
・デザインやコンテンツの仕掛けでさらにスクロールしてもらえるよね
といったことを伝えたかった記事です。
ユーザーが仕方なくスクロールするのではなく、「なんだろ? なんだろ?」とワクワクしながらスクロールしてもらえるといいですよね。