ヒートマップ

【Tips】ヒートマップ機能について②~ムーブメント、アテンション編~

前回に引き続き、Mouseflowのメイン機能であるヒートマップについて、今回もお話したいと思います。
今回はムーブメントとアテンションについてご紹介します。

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

これは、ページの各部分におけるマウスカーソルの動きをサーモグラフィー状に表示するヒートマップです。
赤や白で表示されている場所はマウスカーソルがそこにいたことを示し、ページ全体の色の付き具合はユーザがマウスを動かした範囲を示しています。
人は見ている場所にマウスのカーソルを持っていきがちなので、ムーブメントではユーザの実際の目線の動きを分析することが可能です。

・アテンションヒートマップ

見た目はスクロールヒートマップとほとんど同じように見えますが、これはユーザの興味・関心を可視化したヒートマップです。
アテンションは「エンゲージ」と呼ばれるマウスの滞在時間やクリックなどのアクション、スクロールなどの行動が含まれる時間を指標としてユーザの注目度を計測し、色で表現しています。
スクロールヒートマップと同様に、ヒートマップ上にカーソルを置くとそのラインまで到達したユーザの数や割合といった情報を見ることもできます。

今回は、この2つのヒートマップを掛け合わせてUXの検証をしてみましょう。

ムーブメントヒートマップとアテンションヒートマップは、ともにユーザの【関心】を示しています。
この2つはページのどこが最も注目度の高い場所なのかを表示しているため、重要なコンテンツや情報が適切な場所に配置され、且つユーザの導線上に収まっているかを確認するのに最適です。

では、実際に弊社サイトではどのように表示されるか見てみましょう。

ムーブメントだけではヘッダー部分と社名・経営陣の場所が非常に注目されているように見えますが、アテンションと並べて見ると社名部分の前後が最も注目度が高いことがわかります。
また、ページ下部にスクロールするにつれて注目度は減少していますが、ムーブメントとアテンションともに会社の所在地の部分では色が変化していることがはっきりとわかります。
東京本社の所在地の箇所は、ムーブメントの形から住所をカーソルでなぞりコピーしている人が多いのではないかと推測できます。
Googleストリートビューの部分も赤色になっていますし、所在地に興味があるユーザはなかなか多いようですね。

このように、この2つのヒートマップからはマウスのカーソルを当てる、カーソルでなぞるといったユーザの動きを検知することもできます。
クリックやスクロールのヒートマップからは見ることのできない、意外なユーザの動きや興味・関心を見つけることができるでしょう。

是非みなさんもご自身のサイトで試してみてくださいね。

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと③

    ユーザビリティ検証の注意点と禁止事項について、前回の続きからご紹介しま…

  2. ヒートマップ

    アテンション・ヒートマップ

    前回は訪問者がどこまでスクロールしているのかを可視化するスクロール・ヒ…

  3. ヒートマップ

    Mouseflowアップデート情報 @2019/6/6

    Mouseflowの機能がアップデートされました!今回のアップデート…

  4. ヒートマップ

    MouseflowをAdobe Analyticsと一緒に使う

    近年、視覚分析ツールの需要が高まっています。ウェブサイトの統計的なロ…

  5. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと④

    ユーザビリティ検証の注意点と禁止事項について、前回の続きからご紹介しま…

  6. ヒートマップ

    ヒートマップを画像としてキャプチャする

    前回は、Mouseflowで行った分析結果の作成に便利なレコーディング…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. KARTE を使ってサイト外でも接客を
  2. 【GA4/GTM】dataLayerを活用しよう
  3. ジャーニーマップをデジタルマーケティングの視点で
  4. ChatGPT ProからClaude3 Proへ移行した話…
  5. その分析、やり方あってる?記述統計と推測統計の違い
  1. Tableau

    Tableau Viz紹介 : 10.4新機能を使ってダッシュボードを作ってみた…
  2. Tableau

    Tableau Desktop 2020.1の新機能を全て解説してみた。
  3. ObservePoint

    機会損失を未然に防ぐ!ユーザエクスペリエンスシミュレーター”WebJ…
  4. Adobe Analytics

    Adobe Analytics:IF関数を使用した計算指標
  5. Adobe Analytics

    Adobe Analytics-分析ワークスペースの使い方
PAGE TOP