ヒートマップを使用して、訪問者がWebサイトで何をしているかを調べます

公開: 2021-11-04

人間は本質的に好奇心が強い。好奇心は、多くの点で、私たちを最も進化させた特徴の1つです。情報は力であり、他の人に関する情報を持つことは、Webページの開発を含む多くの異なる分野で非常に役立ちます。

プライバシーの世界の暗い側面に立ち入ることなく、Webページを管理し、倫理的な方法で好奇心を利用してパフォーマンスを向上させ、訪問者にこれまで以上にページを楽しんでもらう方法はたくさんあります。

ヒートマップは、訪問者がWebページで何をしているのかを発見し、訪問者がWebページとどのように相互作用するかを確認することを目的とした手法です。つまり、ヒートマップを使用すると、訪問者の行動を集約された匿名の方法で分析できます。 Webページ上のカーソルの動きを分析することにより、ヒートマップは、より暖かい色でペイントされたページのホットスポットを示す視覚的な表現になります。

さらに、ヒートマップを使用すると、改善のためのアイデアをWebサイトに適用できます。ヒートマップに表示されるデータを調べて、何が起こっているのか、訪問者が何をしているのか、Webで何がうまくいかないのか、そしてそれをどのように解決できるのかについて結論を出す必要があります。

WordPressでヒートマップを作成する方法

現在、ヒートマップの作成は非常に簡単です。 WordPressでは、ヒートマップを作成できるプラグインを使用するだけで済みます。実際、ヒートマップは、Nelio A/Bテストのユーザーが最も要求する機能の1つです。

私たちは長い間ヒートマップを作成しており、ウェブサイトで可能な改善の調査を続けています。例として、Nelioのメインページで作成した最新のヒートマップをここに示します。

まず、新しいヒートマップを作成します。これを行うには、次のスクリーンショットに示すように、Nelio A / B Testingで新しいテストを選択し、関心のあるページを選択します。

次に、プラグインが訪問者を追跡し、情報を自動的に集約するように、テストを開始するだけです。この時点から、新しいヒートマップが段階的に生成され、結果をグラフィカルに確認できるようになります。

ヒートマップの結果

代表的な訪問者数を追跡すると、ヒートマップの結果を詳細に観察できます。訪問者から抽出されたこのデータにはさまざまな見方があることに注意してください。

最も一般的なタイプの視覚化はヒートマップ自体であり、分析されたページの上部に一連の暖かい色のスポットが表示されます。これらのホットスポットは、最も多くの相互作用を受けた要素の上に配置されます。

一方、スクロールマップがあります。これは、訪問者が離れる前に下にスクロールすることで、ページのどこまで下がったかをより暖かい色で示します。

最後に、私たちが通常見つけることができる最後の表現は、ページ上で行われたクリックを点群または紙吹雪として見ることで構成されています。

当ウェブサイトのメインページのスクロールマップ。 — 当社ウェブサイトのメインページのヒートマップ。

前のギャラリーには、プラグインがWebサイトのメインページを分析するときに作成した完全なヒートマップ、スクロールマップ、およびコフェッティがあります。次に、これら3つの表現すべてから抽出できる情報の詳細を詳しく見ていきましょう。

ヒートマップの詳細

ヒートマップは、私たちのホームページにアクセスする人々の活動の多くがページの最初の部分で発生することを示しています。各プラグインの特定のページに移動するボタンには、多くの相互作用があります。これは、私たちが望んでいることです。

しかし、多くの人が最初の折り目で下にスクロールすることを示す矢印記号をクリックすることもわかりました。残念ながら、この矢印は単なる指標であり、クリック可能な要素ではありません。それで、それは確かにそれをクリックする私たちの聴衆を混乱させます。

解決策として、矢印をボタンに変換して、ページを自動的に下にスクロールすることもできます。これにより、ユーザーの期待と現実を一致させます。

一方で、フッターも注目されているのが不思議です。これは、ページの最後まで探しているものが見つからないユーザーがいることを示唆しているため、重要です。特に、最もホットなエリアはコンタクトリンクです。したがって、テストの良いアイデアは、このリンクをページのより目立つ領域に移動して、必要なものを見つけずに誰も離れないようにすることです。

スクロールマップの詳細

スクロールマップは、ほとんどの訪問者が半分のページを超えて何も表示していないことを示しています。この情報から、私たちが引き出すことができる主な結論は、その時点からのコンテンツが失われるため、関連性がないはずであるということです。

コンテンツを視聴者にとってより魅力的なものにし、視聴者が離れないようにするための1つの可能性は、より視覚的でダイナミックなセクションを表示することです。静的コンテンツは十分に目立たず、訪問者の注意を失います。このため、これらのセクションで変更を提案することは、将来のA/Bテストでテストするための良い可能性になる可能性があります。

紙吹雪の詳細

紙吹雪については、テストの実行中に受け取ったすべてのクリックで点群が表示されます。通常のヒートマップと比較して、紙吹雪には個々のクリックに関する詳細情報が含まれています。

クリックした訪問者の大多数がクリックするのに5〜10秒かかったことがわかります。このデータを知ることは非常に興味深いことです。なぜなら、私たちは彼らの注意を引く必要がある時間のかなりおおよその尺度を持っているからです。

ページが複雑で理解しにくいように見えるほど、より多くの訪問者を失うことになります。この情報は、ページのはるかに単純でより急進的なバージョンを提案するのに役立ちます。たとえば、表示する情報を減らして、ポイントに直接進むことができます。これは、次に試すことができるもう1つの可能なA/Bテストです。

さらに、クリックできない要素をクリックする訪問者がいることがわかります。ここで特に関連するセクションは、当社の製品を使用している企業のロゴのリスト、またはお客様の声です。

紙吹雪で見ることができる逃したクリックの詳細。 — 紙吹雪で見ることができる見当違いのクリックの詳細。

これらのセクションにはクリック可能な要素はありませんが、それでもクリックが発生します。繰り返しになりますが、これは混乱を招く可能性があるため、サイトの動作が訪問者の期待と一致していることを確認することが重要です。これを回避するために、これらのセクションのデザインを変更して、クリックする必要がないことを明確にすることができます。または、スクロールマップの情報を考慮して、セクションを削除することもできます。ここでは、Webのこの部分で人を失っていることをすでに確認しています。

ヒートマップで重要なことは、訪問者がサイトをどのように操作しているかを分析することにより、改善のためのアイデアを得ることにあります。このようにして、失敗した動作を修正し、後でA/Bテストでテストできるページの改善案を提案できます。

Nelio A / B Testingの無料バージョンでは、ここで説明したのと同じように、WordPressページにヒートマップを作成できることを思い出してください。さあ、試してみてください。次に、訪問者の行動を視覚的に表現することで、あなたの経験と抽出できる情報をお知らせください。

UnsplashのAlmosBechtoldによる注目の画像。