WEBサイトの見られている部分をヒートマップで色分けする

Question

コーポレートWEBサイトの保守を行っていますが、
WEBサイトにユーザーの見ている部分をヒートマップで色付けして表示したいという案件がでました。
外部サービスを探してみると無料有料問わずのヒートマップサービスがありますが、
今回は自分で実装しないといけません・・・(泣)

色付けに関してはheatmap.jsを使う予定ですが
悩んでいるのは**「どこを色付けするか」**です。

ユーザーのタッチした部分に関してはJSで取得できそうですが、
ユーザーの見ている部分を取得する・・・？
はて・・・？

レスポンシブなのでSP対応も必要なのですが、
滞在時間が長い画面の上半分をユーザーはよく見ている
という判断をしてもいいのでしょうか・・・？

UI、UXに詳しい方がいらっしゃいましたら、
どうか助言をよろしくお願い致します。

Answer 1

heatmap.jsを使ったことはないので、 実際に使う上での助言はできませんが、 ユーザーがよく見ている部分は大雑把には特定できます。

ページを開いた時に時間の計測を開始し、 あらかじめスクロール位置を複数決めておいて、 各スクロール位置に到達したらページを開いてから何秒経ったのかを記録します。

最近は、 時間の記録まではしていないと思いますが、 今読んでいる位置がページの何%かや画面上部に色の付いたバーを表示するなどしているサイトもありますね。

そういった感じでどこをどれくらい読んでいるかという大雑把なことは分かりそうですが、 細かくデータを収集したいなら、 かなり面倒だと思います。

相当、 サービス/サイトに力を入れていて、 多くの人が利用しており、 データを集める事自体は早くできるというなら、 そういった収集も大切だと思います。しかし、 基本的なABテストで済むことも多いとは思います。

こういうことを書くことは良くないですが、 現時点でそこまで大規模でない場合は、 サービスの内容や全体のデザインなど根本的な刷新が効果的なケースも多いです。++iといった細かいところをひたすら気をつけて高速化するより、 アルゴリズム変えた方が良いよ、 という話ですね。

ふと最近読んだねとらぼを思い出しました。

「しわ寄せはいつも技術者に来る」「笑えるどころか胃が痛くなってきた」　エンジニアの苦悩を描いた動画に世界中が共感

Comments

[keisuu]

ご回答ありがとうございます。

ABテストはすでにやっているので
それにプラスαという具合です。

>最近は、 時間の記録まではしていないと思いますが、 今読んでいる位置がページの何%かや画面上部に色の付いたバーを表示するなどしているサイトもありますね。
↑
こちらはどちらかとユーザーがどこで離脱したかが計測できそうですね。

今回はユーザーが見ている時間が長いところを調べるという要件ですので、
少しニュアンスが違うと感じました。

SPからのアクセスの時には、ユーザーがスクロールするためにタップした位置等も
保存してみようかと思うのですが、
それは実際に見ている場所ではないような気もして悩んでおります。

[Newbi]

やっぱりスクロール位置と時間の計測くらいしかパッと浮かばないですね....
↓こんな感じのを想定してます。
https://mieru-ca.com/heatmap/what-is-heatmap/

タップした位置も参考にはなると思いますが、仰るように長時間見ている場所とは違うと思います...

んー的確に位置を、というのは浮かばないですが、カーソルの動きなんかも使えるようですね
https://keywordfinder.jp/blog/seo/heatmap/

[keisuu]

追記の参考URLありがとうございます。
ヒートマップの定義が2種類あるようですね！
今回考えてるのは「熟読エリア」の方になります。

でもスマホでやろうとすると、ブラウザがバックグラウンドになった時にはずっとそこに滞在してることになりますし、なかなか難しそうな気配です。

とりあえず無料サービスのものを登録して参考にできるかトレースしてみようと思います・・・