ヒートマップの一歩先へ!視線の順番をゲイズプロットで確認しサイト改善に活かす

見た目がわかりやすいヒートマップなどのツールが一般的になってきましたが、ヒートマップの一種にゲイズプロットというものがあるのをご存知でしょうか。
ユーザー1人1人の視線の動きを追い、その順序と見ている時間を表示させることができます。
これによりヒートマップだけではわからない「ユーザー心理」が推測しやすくなります。

ドイツポスト(Deutsche Post)のリニューアル前後のゲイズプロットを見てみましょう。

リニューアル前

視線の順番をゲイズプロットで確認し、サイト改善に活かす
出典:http://www.konversionskraft.de/landing-page-optimierung/landing-page-optimierung-tipp-2.html

コピーから入り、中央カラムを見て左右に視線が転じているのが見てとれます。
円の大きい部分はそこにとどまっていた時間が長かったことを示していますので、中央は流し読み程度で全体的に迷いつつ目的の要素に遷移したことが伺えます。

リニューアル後

視線の順番をゲイズプロットで確認し、サイト改善に活かす
出典:http://www.konversionskraft.de/landing-page-optimierung/landing-page-optimierung-tipp-2.html

ロゴから、メインビジュアル、タブそして、左のメニューへと遷移していきます。
要素を絞ったことで、視線が散漫することがなくなりました
ユーザーが目的のコンテンツを見つけやすくなった可能性が高いです。

これが通常のヒートマップだけだと下記のようになります。
視線の順番をゲイズプロットで確認し、サイト改善に活かす
出典:http://www.konversionskraft.de/landing-page-optimierung/landing-page-optimierung-tipp-2.html

ヒートマップだけでは、リニューアルの方針やリニューアル後の検証が少し変わっていたかもしれません。
一つのツールを見るだけでなく、組み合わせて効果検証を行っていきたいものですね。

ゲイズプロットを試せるWEBサービス「Feng-GU」

さて、このゲイズプロットですが、簡単に試せるツールがあります。
それが、Feng-GUIです。
URL入力やキャプチャをアップロードすることでどこが見られやすいかを機械的に導いてくれます。
例えば、Yahoo!で試したデモは、こんな感じです。
視線の順番をゲイズプロットで確認し、サイト改善に活かす

デモなので見られるものに限りがありますが、デザインを起こしてメインビジュアルを変更したものや、配置を変えたものを用意して、Feng-GUIにかけることで、より効果的なデザインを事前に確認することができそうです。
ぜひ活用してみたいですね。

growth > ヒートマップの一歩先へ!視線の順番をゲイズプロットで確認しサイト改善に活かす