ヒートマップ

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

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

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

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

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

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

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

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

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

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

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

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

ピックアップ記事

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

関連記事

  1. Mouseflow

    Mouseflowで問題解決① -事例ベースで機能紹介-

    Mouseflowで問題解決 -エクスチュアのツール紹介-webサイト…

  2. ヒートマップ

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

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

  3. ヒートマップ

    【Tips】ヒートマップ機能について①~クリック・スクロール編~

    今回はMouseflowのメイン機能であるヒートマップについて、改めて…

  4. ヒートマップ

    【Tips】フリクションとは?

    フリクションとは、Webサイトを訪問したユーザが感じたストレスやフ…

  5. ヒートマップ

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. Pythonを用いたAmazon S3の署名付きURLの発行…
  2. Snowflakeとは?Data Cloud World T…
  3. SnowflakeのData Clean Roomを基礎から…
  4. SnowflakeのData Clean Roomを基礎から…
  5. SnowflakeのData Clean Roomを基礎から…
  1. Python

    市区町村一覧・自治体の一覧を取得する
  2. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビ…
  3. IT用語集

    ジャバスクリプト(JavaScript)って何?
  4. IT用語集

    クラス(Class)って何?
  5. IT用語集

    クッキー(Cookie)って何?
PAGE TOP