2006年11月02日

2006 11.02 Thu


WEBページの作り方勉強人間はページを見る時、「F」の字を描きながらページ全体を見ている。

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

で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 
第1段階:
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

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

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

つまりページ全体のコンテンツのうち3分の1程度しかユーザーの目には触れていないとのこと。

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

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

パターン1:記事

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

パターン2:製品ページ

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

パターン3:検索結果

各検索結果のタイトルを見ていくわけですが、トップページの上位しか見てません…。そして意外なのがあの「Google Adwords」、ちゃんと見てくれてるんですね、あれ。

おそらく、横書きだと文字を左から右、上から下へ読むという流れになるので、こういう結果が出てくると推測されます。

というわけで、ページの文章を端から端まできっちり読む人は極めて希ということのようです。まぁ興味があれば読んではくれるようですが、それでも全部をきっちり丁寧に読む人は少ない、と。特にEコマース関係だとこれはかなり重要なのではないでしょうかね。来てくれた人の目を引いて確実に購買へ結びつけるにはページに詳しい内容を載せるよりも何よりも、最初に見られる部分に気をつけて商品の紹介を行う必要がある、ということです。
同様にしてアフィリエイトのリンクや広告の場所に関しても、右に置くよりも左に置く方が効果的と言うことです。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:(http:を省略して下さい)
http:
コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。