ムーブメント・ヒートマップ

ムーブメント・ヒートマップは訪問者のマウスの動きを可視化し、訪問者がページのどこに関心を持っているかを明らかにします。 ページ内の重要なエリアが、期待通りに訪問者の関心を集めているかを確認することが出来ます。

下の図はMouseflow社のブログページのムーブメント・ヒートマップです。 図中で白く表示されているエリアが訪問者の注意を強く引いている箇所で、主に記事部分と上部のナビゲーションエリアに集中しています。 ブログページですから、訪問者の注意が記事に集中しているのは上々の結果と言えます。

ヒートマップをスクロールしてみると、記事によってページの最後まで注目されている(白や赤で表示されている)ものもあれば、ページの途中から注目されていない(青くまたは色がつかない)記事もあることが分かりました。この例のように、ムーブメント・ヒートマップに表示される色を見ることで、ページ内のどのコンテンツが訪問者に人気ある/ないのかを判断することが出来ます。

これまでの経験から、どれが最適なページレイアウトかはサイトを訪れる訪問者によります。 ですので、それぞれのページごとのメインゴールにフォーカスすることをお勧めします。そして、各ページのムーブメント・ヒートマップが、そのメインゴールに結びついているかを確認します。 

ムーブメント・ヒートマップを見る際の質問：

• マウスの動きが集中しているところは、そのページのゴールに結びつく箇所か？
• そのページのゴールに結びつかない箇所にマウスの動きが集中していないか？
• マウスの動きが集中している箇所は、その下にあるパーツ(ボタン、フィールド等)と大体同じような大きさか？ もし極端に違う場合、それはなぜか？
• マウスの動きが集中しているところは充分に分かりやすいか？ もしそうでなければ、訪問者はもっと情報を必要としているのではないか？