ユーザビリティ

ＷＥＢ制作をする上で切手も切り離せないユーザビリティ。
このサイトでも何度もご紹介していることです。

少し古い記事ですがＷＥＢページを見る人の目の動きを検証した記事を見つけたので
ご紹介します。

「 http://www.useit.com/alertbox/reading_pattern.html 」

人の目は「Ｆ」の字を書きながらページを見ていきます。


これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうです。


その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描いていく。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。


第1段階：
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階：
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階：
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。

結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。


パターン1：記事



企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。

パターン2：製品ページ


これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。

パターン3：検索結果


各検索結果のタイトルを見ていくわけですが、トップページの上位しか見ていないことがわかります。


ＷＥＢで調べ物をするときなどは自分がほしい情報を見つける為にかなりのページを見ると思います。
そのなかで自分にマッチングしたものしか集中的に見ないと思います。

ページ構成を考える際、見せたいものを効果的に配置すること、重要です。