スクロールと注目
ユーザーはウェブ閲覧時、その80%の時間をページのアバブ・ザ・フォールドにある情報を見て過ごしている。ユーザーがスクロールすることもあるにはあるが、彼らの注目はその境界線より下には20%しか向かない。
ウェブデザインにおいて、「ページ・フォールド（ページの折り目）」コンセプトと、もっとも目立たせたい情報をページの最初から見えるエリアに置くことの重要性に関して、たいへんな混乱が起きている。（すなわち、「アバブ・ザ・フォールド」の今回のコラムでの定義は、単に、「余分のアクション無しに閲覧可能な」ということ）。
ウェブの最初の頃、ユーザーはウェブページを全くスクロールしなかった。彼らは目に入る情報だけを見て、そのページに留まるか離れるかを判断するために利用していた。したがって、その時期（1994年〜1996年）のユーザビリティ調査では、重要な情報を境界線より下に置いてしまったサイトは、ほとんどのユーザーにそれを見てもらえず、失敗することが多かった。
当時、スクロールがこのように嫌がられるのには無理もない部分もあった。なぜならば人々はコンピューターがすべての選択肢を見せてくれるという状態に慣れていたからである。ダイアログボックスやCD-ROMといったマルチメディアの表現、HyperCardのスタックも全てそうしたやり方を取っており、スクロールは要求されていなかった。（ユーザーがテキストフィールドをスクロールしなければならないこともあったが、コマンドやオプションを見るためにスクロールする必要はなかったので、見えている情報によって全てを決めることが可能だった）。
しかしながら、私は1997年にページのスクロールは避けよう、というガイドラインを撤回した。なぜならばウェブ上でスクロールすることにユーザーが慣れてきていたからである。これはユーザビリティガイドラインが時間をあまり置かずに変更されたまれな事例である。ユーザビリティ上の発見の多くは長い期間に渡って変わらない。例えば、ウェブユーザビリティのガイドラインの80%は1990年代から有効なままなのである。
現在のユーザーはスクロールをする。しかしながら、以下の2つの理由から、境界線を無視した、いつ終わるともわからないようなページはデザインすべきではない：
- 長いページはユーザーの注意持続時間の観点から今も問題がある。すぐに要点がわかり、さっさと用事を終わらせられるサイトというのは好まれるものである。たくさんの字を読むだけでも嫌なうえに、スクロールというのはさらに余分な作業といえる。
- ユーザーの注意を引き付け続けておけるという点において、境界線より下にあるものに比べ、アバブ・ザ・フォールド（境界線より上）にある物件はより価値が高い。
そう、ページのサイズを小さく制限することなく、境界線より下に情報を入れることは可能である。
実のところ、長い記事を載せるときには、複数のページに分割するより、スクロールできる1つのキャンバスとして提示する方が良い。スクロールはページめくりに勝る。ぶつ切りにされた記事の次のページに向けてクリックスルーかどうかを決断するより、ページを下にただ読み進んでいく方がユーザーにとっては楽だからである。（スクロールすることの方が楽という話は、当然のことながら、デザインがスクロールバー等のためのガイドラインに従っていることを前提にしている）。
しかしながら、ユーザーがスクロールしてくれるからといって、優先順位をつける必要性が無くなるわけでもないし、真に重要な情報をアバブ・ザ・フォールド（境界線より上）に引き続き確実に置く必要がなくなるわけでもない。
情報採餌理論によれば、（ページのパスをスクロールダウンすることも含め）パスにそって進んでいくかどうかというのは、今、見ているコンテンツの持つ情報の匂いをベースに決められるという。言い換えると、ユーザーはアバブ・ザ・フォールド（境界線より上）にある情報によってページの残り部分にも価値があるだろうと信じられるときのみ、その下に向かってスクロールをしようとするのである。
アイトラッキングのデータ
我々は先月、様々な種類のサイトにおけるユーザーの行動について、大規模なアイトラッキング調査を実施した。「境界線」が今もユーザーの行動に関連性があるかを詳しく調べるため、全部で57,453回の視線の滞留（ユーザーがページ上の何かに注目した事例。通常は0.5秒未満）からなるその調査の一部について分析を行った。
我々の調査は全体としてはずっと大きなものであったが、バイアスを避けるため、541のウェブページにアクセスした21人のユーザーについてのみ分析した。不正目的でデータに制限をつけたわけではないことを信じてもらうために、現時点の分析から、なぜ調査の一部を除外したかを説明させて欲しい。
調査の目的は年次のカンファレンスセミナーに向けて、新鮮な知見を生み出すことにあった。したがって、我々は調査の大部分を以下のテストにあてた：
- IAコースに向けての、新しいナビゲーション機能を持つサイト
- 大企業のサイトにおけるソーシャル機能でのセミナーとウェブにふさわしいライティングでの2日間コースに向けての、企業ブログ、興味深いFAQ等
- アプリケーションデザインのセミナーに向けての、ウェブベースのアプリ
特定の個々のトピックに向けて、ターゲットを1つの調査に絞り、詳細に調べたい機能を持つサイトをテストするというのは完全に理にかなっている。例えば、ナビゲーションセミナーに向けてカルーセルについての知見を得るためには、ユーザーがカルーセルに遭遇したときには彼らの目の動きを追跡すべきである。このために我々が行うのは、カルーセルを含む可能性のあるサイトを利用するよう依頼することだけで、そのデザイン要素に注意を引くことはしない。
意図的に特定のデザイン要素を含むサイトをテストするよう依頼しておきながら、彼らの行動が平均的なサイトに対する行動を代表するものであると結論づけることはできない。カルーセルの例でいうと、もしそのカルーセルがページの上部で人々の注意を引きつけ続けることに成功すれば、彼らがスクロールする回数は通常より減る可能性もあるからである。
ウェブユーザビリティのための基本的なガイドラインで開かれる幅広いセミナーのために、調査にはユーザーが彼らの行きたいどのサイトにも行けるようなコンポーネントを入れることもした。こうした制約のないタスクが私のここでの分析のソースである。なぜならばそこでのテストの対象は人々が利用する一般的なウェブサイトであり、デザイン機能のために選ばれたサイトではないからである。
注目は上部に集まる
以下のグラフが示すのは、高さ100ピクセルごとのユーザーの視線の滞留の分布である。棒グラフは視線が滞留した回数ではなく、合計の注視時間を表している。（言い換えると、視線が2回200秒滞留したときには400秒1回滞留したのと同じようにカウントされる）。
ユーザーの閲覧時間の5%が2,000ピクセルより下の位置に分布しているとはいえ、傾向としては、彼らは上部から非常に遠い位置にある情報はかなり表層的に流し読みしている。というのもページの中には非常に長いものもあるため（サンプルの中には4,000ピクセル以上のものもよくあった）、この5%というユーザーの注目は非常に薄く広がっていることになるからである。
調査ではユーザーの閲覧時間は以下のように分布していた：
- アバブ・ザ・フォールド（境界線より上）: 80.3%
- 境界線より下: 19.7%
我々は解像度1,024 × 768ピクセルの画面でアイトラッカーを使用した。最近ではもっと大きな画面を使っているユーザーも多いし、我々ももっと高い解像度のもので（アイトラッキングではない）ユーザビリティ調査を数多く実施してもいる。大きなモニターを使っても私の結論が変わることはないだろうが、アバブ・ザ・フォールド（境界線より上）にユーザーの注意が向く割合が幾分増加するとは思う。なぜならば、最初から見える空間により多くの情報を入れることが可能になるだろうからである。
スクロール行動
ユーザーだってページ全体を読むこともある。そういうことは起こりうるのである。めったにはないことだが。
一般的には、以下のゲイズプロット（視線描画）に見られるような2つの行動パターンのどちらかを目にすることが多い：
（クリックして拡大）
ゲイズプロットが示しているのは、3人のユーザーが3つの異なるタスク（ページごとにユーザーは異なる）を行う間、ページを訪問中にどこを見ていたかである。青いドットの1つ1つは1回の視線の滞留を示しており、ドットが大きいほど見ている時間が長いことになる。
一番左では、ユーザーはページの相当に下の方までスクロールダウンし、いきなり興味のあるアイテムのところに行っていた。この閲覧パターンでは境界線よりかなり下のところにたくさんの視線が滞留している。このようなパターンはデザインの優れたFAQで見ることが多い。とはいえ、最良のFAQではもっとも頻繁に聞かれる質問が一番上に示されるものではある（そうすれば多くのユーザーがたくさんスクロールする必要がなくなる）。
左側のゲイズプロットでは別のポイントも提示されている。つまり、リストの最後の要素は余分に注意を引くことが多いということである。最初の数アイテムが最重要なことに間違いはないが、最後のアイテムはその前にあるアイテムよりは多く閲覧される。（だからこそ、棒グラフでも701〜800ピクセルのエリアの方が 601〜700ピクセルのエリアよりもより多くの注目を集めている。なぜならば、我々が調査で使ったモニターの最下部は前者の範囲に入っていたからである）。リストの最後部の重要性は新近性効果によってさらに強化される。すなわち、最後に見たものは特に強く心に残る。（人の心とユーザビリティでのセミナーで新近性と優位性の効果とデザインとの関連性については論じる）。
他の2つのゲイズプロットが示すのはより一般的なスクロール行動である。閲覧が集中しているのはページ上部で、中間部分では中程度の閲覧があり、下の方の閲覧はかなり表面的なものとなっている。（例として取りあげたゲイズプロットは、多少なりともユーザーが全体を下までスクロールしているものである。よくあるのは、下の方を全く見ていないというものだ。なぜならばユーザーはそんな下までスクロールしないからである）。
ユーザーはあたかも一定の量の燃料をタンクに入れて、ページに到着するかのようだ。ページを「ドライブ」するにつれて、彼らのガソリンは使い果たされていき、遅かれ早かれ、タンクは空になる。タンクにあるガソリンの量は、各ユーザー固有の動機やそのページにあるトピックにどれだけユーザーが興味があるかで変わってくる。また、そのページを下るにつれて見えてくるコンテンツが、ユーザーの期待していることと関連性が強いか弱いかによって、その「ガソリン」は補給されたり、蒸発してしまったりもする。
いずれにしろ、ユーザーの注目というのは徐々に減っていく。そして、ユーザーがページを下に進むにつれて、新たに出てくる個々の情報に費やす時間は短くなるのが普通である。
真ん中のゲイズプロットで見られるのは、50台のソファからなる カテゴリーページである：
- 一番上の2列では1台のソファごとに5回から10回の視線の滞留がある。
- 次の4列では1台のソファごとに2回から4回の視線の滞留がある。
- 次の8列では1台のソファごとの視線の滞留は1回である場合が多い。
- 一番下の3列では1台のソファに2回視線が滞留しているが、残りの7台のソファには1度も視線の滞留がない。
これはおおよそのパターンでしかなく、コンテンツ次第でユーザーは違う行動を取る。例えば、Cameon LoveseatとCustom Hugo Loveseatは両方ともページの下の方、2,750ピクセルの位置にあるにもかかわらず、4回ずつ視線が滞留している。これはそのユーザーにとって、この2台のソファが特に魅力的だったからだろう。
デザインとの関連性
関連性があるのは明らかである。したがって、ユーザーのゴールやあなた方のビジネスゴールにとって最も重要な材料はアバブ・ザ・フォールド（境界線より上）に置くべきである。ユーザーは境界線より下を敢えて見ることもあるが、アバブ・ザ・フォールド（境界線より上）ほど多く見ることはあり得ない。
人々がページのかなり下の部分まで見る場合もあるだろうが、それは（a）レイアウトが流し読みしやすくて、（b）最初に見える情報によって、スクロールに時間を割く価値があると思える場合である。
最後になるが、一番重要な内容を最上部に置く一方、一番下にすてきなご馳走を置くことは忘れないようにしよう。
さらに詳しく
次回のコラムではページ内でユーザーの注目が水平方向にどのように分布しているかを見ていく予定である。
