Webコンテンツを読む視線の軌跡は“F”を描く
アイトラッキング調査の結果から、多くの場合、ユーザーは“F”の文字 -- 横に二本、縦に一本の軌跡 -- を描くようにWebページを読むことが分かった。
fast のF。あなたが用意した貴重なコンテンツは、こうして読まれている。瞬く間に、ユーザーの視線はウェブサイト上の文章を駆け抜ける。それは、学校で習った文章の読み方とはまったく違うものだ。
232名のユーザーに協力いただいて、数千に及ぶウェブページのアイトラッキング調査を実施した。ウェブページの読み方には、サイトの内容やタスクには関係なく、かなり一貫性があることが分かった。その顕著な読み方とは、アルファベットの“F”を描くようなもので、以下に挙げる3つの要素で構成される。
- ユーザーの視線は、まず水平方向に動く。コンテンツの上部を、横に読み進むのが通例だ。この一つ目の要素が“F”の上の横棒を形作る。
- 次に、少しページを下ってから、水平方向に二度目の動きを見せる。最初よりも少し短い距離で視線が止まるのが典型的だ。これで、“F”の下の横棒が描かれる。
- 最後に、ユーザーの視線はコンテンツの左端部分を縦に動く。かなりゆっくりと上から順に視線を降ろしていく場合が多く、アイトラッキング結果を示すヒートマップには、隙間のない実線として現れてくる。素早く視線を降ろしていった場合には、ヒートマップに斑点が並ぶ。この最後の要素が、“F”の縦の棒を形成する。
もちろん、ユーザーの視線移動が常にこれら3つの要素で構成されるわけではない。水平方向の視線移動を三度繰り返すことがあれば、軌跡は“F”よりも“E”に近い形になる。水平方向の視線移動が一度だけなら、軌跡は“L”を上下に反転させたような形（横棒が上にある状態）になるだろう。しかし、概ね“F”に近い形の軌跡を描くことが多いと考えられる。横棒二本の間隔がページによってさまざまにはなるものの。
3つのウェブサイトを使って実施したアイトラッキング調査の結果を示すヒートマップ。ユーザーの視線がもっとも長く滞留した箇所を赤色で、次に長かった箇所を黄色、あまり見られなかった箇所を青色で示している。灰色部分には、ユーザーの視線が留まることがなかった。
上のヒートマップは、3種類のウェブページをユーザーがどのように読んだかを示している。
赤色で示されている（もっとも視線滞留時間の長かった）箇所に注目して見てみると、3つのヒートマップすべてに“F”の文字が浮かび上がってくる。もちろん、多少の差違はある。軌跡が“F”の文字を描くというのは大雑把に形を総称するとそう見えるという話であって、寸分の差もなく、一様な軌跡を描くと言っているわけではない。
eコマースページの例では（図中央）、“F”の2本目の横棒がかなり下にある。製品の画像が間に入ってしまっているためだ。製品の価格と“カートに追加する”ボタンが置かれているページ右上の囲みにも、ユーザーの視線が随分と向けられている。
検索結果ページの例では（図右端）、“F”の2本目の横棒が1本目よりも長くなっている。検索結果2つ目のページタイトルが、1つ目のものよりも長かったことが主な理由と考えられる。また、2つ目以降の検索結果にはあまり目が向けられないのが通例だが、この場合には、上位2件の検索結果が、ともにユーザーにとって興味深いものであったことが分かる。
軌跡“F”が意味するもの
ユーザーの視線が“F”の文字を描くように動くということから、紙媒体用に書いたコンテンツをそのまま再利用するのではなく、以下のガイドラインに従って、ウェブ用のコンテンツを用意することが重要と言えるだろう。
- ユーザーが、あなたの書いたテキストをじっくりと読むことはない。一語一語を丁寧に読んではくれないのだ。ページを余すところなく読むことは稀であり、何か買い物をしようとしていて、販売店の情報をまず集めているような場合には特にあり得ない。もちろん、細部まで読んでくれる読者もいる。しかし、大多数はそうではない。
- 冒頭2つ目の段落までに、重要な情報を盛り込まなければならない。2段落目までならば、ユーザーが読んでくれると期待できる。もちろん、2段落目よりも1段落目の方が、読んでもらえる可能性はさらに上がるだろう。
- 分かりやすい小見出しを付け、段落や箇条書きの冒頭にも内容を端的に伝えられる言葉や表現を用いること。とにかく、ユーザーが“F”の縦棒を描く際に、視線の運びに困らないような目印を置くことだ。単語も3つ目になると、先の2つよりも読んでもらえる可能性が低くなる。
視線移動は奥が深い
ユーザーが、ウェブページを読んでいるときの視線移動の様子をスローモーションで再生してみると大変興味深いことが分かる。今回ご紹介したように、軌跡が概ね“F”を描くという話では終わらず、ページごとにさまざまな問題を抱えていることも見えてきた。たとえば、価格をはじめとする“数”を探しているような場合は、もっと直接的な視線移動になることが分かった。また、検索エンジンの呈示する広告リストの見方には、興味深く、かつ厄介な行動パターンがあることも分かってきた。ウェブサイト上にある画像の見方についても、多くの知見が得られた。
