ランディングページのヒートマップを使用する前に知っておく必要があるすべて

公開: 2017-08-02

コーマックキニーのソフトウェアは、ウォール街のトレーダーが株式市場をゲームするのを助けるツールとして始まりました。財務データを「ヒートマップ」と呼ばれる「赤と青の正方形の明るいモザイク」に変換し、色を使用していつ売買するかをトレーダーに知らせました。

20年以上後、ヒートマップとそれらが提供する洞察から利益を得るのはトレーダーだけではありません。マーケター（そして現在はInstapageの顧客）もそれらを使用しています。そしてそうすることによって、彼らは見込み客が彼らのウェブページ上でどのように振る舞うかを正確に学んでいます。

ヒートマップとは何ですか？

ヒートマップは、訪問者が色分けされたシステムを使用してWebページをどのように操作するかを示すデータの視覚化です。たとえば、これまでで最もよく知られているヒートマップ（少なくともデジタルマーケターによる）を見てください。これは、人々がWeb上でF字型のパターンで読んでいることを示しています。

マップの赤と黄色の部分は、視認性の高いエリアを示しています。青は訪問者が最も見た目が少ない場所です。

この特定のデータは、訪問者がWebページ上のテキストに遭遇したときの視線を監視した2006年の視線追跡調査からNielsen NormanGroupによって収集されました。しかし、このようなテストは、Web上で広まっていると思われるテストではありません。

アイトラッキングヒートマップとマウストラッキングヒートマップ

アイトラッキング実験からのヒートマップは最も正確ですが、作成するのに最も費用がかかり、不便でもあります。上記のNielsenNormanのような調査は、通常、管理された環境（ラボ、社内）で、訪問者がWebページを操作するときに訪問者の目を観察する調査チームまたは高価なハードウェアを使用して行われます。これらの実行には数千ドル以上の費用がかかる可能性があります。

研究者のチーム全体を雇うことはほとんどの企業にとって問題外であるため、多くの企業は代わりにマウス追跡ソフトウェアに目を向けます。実際の目の動きを監視するのとは対照的に、マウス追跡ソフトウェアは、クリック、スクロール、ホバーなどの訪問者のマウスの動きを監視します。

この方法は、正式な実験室の設定や企業の予算の大部分を必要としないため、はるかに簡単にアクセスできます。今日では、マウス追跡ソフトウェアをインストールして、訪問者の行動の監視をすぐに開始できます。一部の調査によると、正式な視線追跡調査とほぼ同じくらい正確です。

左側のヒートマップは正式な視線追跡調査から作成され、右側のヒートマップはマウス追跡で作成されました。クリックテールによると、両方の手法を同時に実行した実験では、結果の間に84〜88％の相関関係があることが示されています。

基本的に、場合によっては、人々がマウスを動かす場所と見た目が一致する傾向があります（これについては後で詳しく説明します）。

利用可能なさまざまなタイプのマウス追跡ヒートマップ

人々が「ヒートマップ」を指すとき、彼らはユーザーの行動を表示する視覚化を指します。しかし、そのユーザーの行動は必ずしも同じではありません。一部のヒートマップは、人々がどのようにスクロールするかを示していますが、他のタイプは、人々が画面上でマウスを置いている場所を識別できます。マウス追跡ヒートマップの主なタイプは次のとおりです。

ヒートマップをクリックします

クリックマップは、訪問者がWebページをクリックした場所を示します。これらは、人気のあるリンク、または訪問者がリンクであると思うかもしれないがそうではない領域を発見するために特に価値があります。

たとえば、ページ上で最もクリックされた要素が製品の写真であることが明らかになったこの特定のマップを見てください。

Brothers Leather SupplyCompanyの創設者であるAdamKailは、このマップが製品ページのデザインに関してビジネスの焦点をどのように変えたかを説明します。

ヒートマップは、すべての製品ページで優れた画像の必要性を強化しています。 以前は適切なコピーを奴隷にしていましたが、今では適切な画像を取得するために時間を費やしています。 それぞれの画像は、バッグのさまざまな用途や角度を示しています...将来の顧客は、誰かがバッグを着用しているときに、ラップトップがいっぱいになったときにバッグがどのように見えるかを知りたいと考えています。

最終的には、それがヒートマップ分析の目標です。ユーザーエクスペリエンスを最適化するために使用できる実際の訪問者の行動を発見することです。説明のために、携帯電話のクリック後のランディングページから取得した別のクリックマップを見てみましょう。

赤で囲まれているので、最もクリックされた電話は折り目のはるか下にあり、あまり人気のないいくつかのモデルの下にあります。では、このマップを使用してユーザーエクスペリエンスを向上させるにはどうすればよいでしょうか。

折り目の上のあまり人気のないモデルの1つを、赤で囲まれたモデルと交換します。そうすれば、人々はそれを見つけるために狩りをする必要がありません。

おそらく、クリック後のランディングページのデザインに最も関連するヒートマップは、クライアントであるペア（現在はカップル）でのVWOによるケーススタディから得られたものです。

アプリの元のホームページは次のとおりです。

そして、そのホームページのクリックヒートマップは次のようになりました。

ペアの成長マーケターであるLimCheng Soonがこのヒートマップで何をしたかに気づきましたか？彼は言う：

結局、コンバージョンボタン（AppStoreとGoogle Playへのリンク）をクリックする代わりに、上部のナビゲーションバーをクリックする人が多すぎることがわかりました。 そこで私は、変換ボタンの周りに「気を散らすもの」が多すぎるのはあまり良い考えではないという理論を作り上げました。
そこで、変換ボタンの周りの「気を散らすもの」を取り除くという理論に基づいて、いくつかのA / Bテストを行います。

結果？

ボタンの上に「無料でダウンロード」というテキストを非表示にすると、コンバージョン率が10％向上しました。
ナビゲーションメニューを非表示にすると、コンバージョン率が12％向上しました

すぐに「気を散らすものが多すぎる」という理論はまったく成り立たない。他のいくつかのテストが示しているように、ナビゲーションリンクはコンバージョン率を大幅に低下させる可能性があります。クリック後のランディングページでは、それらをデザインから除外することをお勧めします。

上記のようなクリックマップは、クリックシグナルの意図があるため、特に価値があります。アクションは、ランダムよりも目的を持っている可能性が高くなります。誰かがクリックすると、特定の要素またはそれに対応するコンテンツ（CTAボタン、「会社概要」リンクなど）について詳しく知りたいためにクリックします。

ヒートマップをスクロールする

2013年にスレートが発行した作品のタイトルは「この記事を終わらせない」でした。その中で、著者のファルハドマンジューは、Chartbeatとオンラインマガジンの共同ヒートマップ分析の結果を明らかにしました。記事の進め方。

エンゲージメントの印象的な86.2％がフォールドの下で発生しましたが、ピクセル番号1600を超えてスクロールしたのは25％のみでした（ほとんどのスレート記事の長さは約2,000ピクセルです）。このような洞察は、特に長いページで、スクロールマップが明らかにするのに役立つものです。

クリック後のランディングページの用語では、それは販売ページである可能性が最も高いです。これらの巧妙に作成された説得力のあるマーケティング資料は、巨大な比率にまで成長する可能性があります。たとえば、これは5,000語を超えています（全ページはここをクリックしてください）。

このようなページのスクロールマップは、人々が読書の過程でどこに立ち寄っているのかを作成者に伝えることができます。そのデータを使用して、作成者はドロップオフの理由を推測できます—光沢のないコピー、迷惑な広告、または背景色の変更さえもです、とPeepLajaは言います。

強い線や色の変化（たとえば、白い背景がオレンジ色になる）がある場合、それらは「論理的な終わり」と呼ばれます。多くの場合、後に続くものは以前のものとは関係がないと考えられます。

そこから、オプティマイザーは、人々にページ全体を読ませるための潜在的な方法をテストできます。これは、ニールセンノーマングループの1つの実験で確かに可能であることが示されています。

まれですが、可能です。

上の地図は目の動きであり、スクロールの深さだけではないことに注意してください。つまり、スクロールマップに表示されるものよりも詳細であり、訪問者がページをどれだけ進んだかだけが表示されます。これは、RJMetricsのWebサイトで行われたテストの例です。

このWebページで色別に最も多く表示されている領域は、次のとおりです。

白い
赤
黄
緑
青

私たちはあなたが考えていることを知っています：ページの最上部が中央よりも少なく表示されるのはどうしてですか？

Chartbeatの調査によると、多くの人はページが読み込まれる前にスクロールを開始する傾向があります。つまり、一番上を見逃してしまうということです。

彼らの調査によると、エンゲージメントは多くのページでフォールドのすぐ下でピークに達します。

そして、それは、折り目の近くの領域が赤いのに、その上の領域の多くが黄色である理由を説明するかもしれません。

このマップから、RJMetricsの元フロントエンド開発者であるStephanie Liuは、次の仮説を立てました。

私の仮説は、ボタンを白いホットスクロールマップ領域に移動すると、元の価格設定ページと比較して、デザインのコンバージョン率が高くなるというものでした。 目が長く残るという理由だけで、より多くの人がボタンに注意を向けるでしょう。

元のページは次のようになりました。

彼女が作成したバリエーションは次のようになりました。

その結果、コンバージョン数が310％増加しました。

このスクロールマップテストからの2つの重要なポイントは次のとおりです。

1.スクロールマップを使用すると、人々がどこまでスクロールしているのかわかりません。 あなたとあなたのチームは、それを理解するためにいくつかの仮説検定を行う必要があります。

2.場合によっては、人々がどこに立ち寄るのかを必ずしも知る必要はありません。目標は、常に人々をより深くスクロールさせることではありません。ステファニーの場合、CTAボタンをより目立つ場所に移動するだけで、RJMetricsのコンバージョンが大幅に増加しました。

ホバーヒートマップ（別名移動ヒートマップ）

マウスカーソルが移動する場所に目が移動します。これは、「移動」ヒートマップとも呼ばれるホバーヒートマップの基礎となる一般的な仮定です。

これらのマップの精度は、目の動きとマウスの動きの相関関係に依存しており、以前に参照された研究では、約84〜88％である可能性があります。しかし、他の情報源は、それがそれほど高いとは確信していません。

2010年、GoogleのAnne Aula博士は、ホバーヒートマップの精度に関する調査結果を発表しました。

6％の人が、マウスの動きと目の動きの間に垂直方向の相関関係を示しました。
19％の人が、マウスの動きと目の動きの間に水平方向の相関関係を示しました。
10％の人が、特定のページ要素にカーソルを合わせ、その周囲の領域をちらりと見ています。

そして、グーグルとカーネギーメロンのさらに別の実験では、マウスの動きと目の動きの間に64％の相関関係があることがわかりました。

言うまでもなく、動きのヒートマップに関する研究はいたるところにあります。しかし、実際のアプリケーションはどうでしょうか？

まあ、それもあちこちにあるようなものです。

チェックアウトページを最適化するために使用されるホバーヒートマップNorthFaceは次のとおりです。

左側のバージョンAは、右側のサイドバーにバナーが表示されているようです。その下のCTAボタン（白丸で囲んだ部分）よりも注目を集めています。バージョンBはそれを考慮に入れ、ボタンでバナーを切り替えます（ここでも白で囲まれています）。

その結果、コンバージョン率が62％向上しました。

これが表示されているように見える別のホバーマップです…まあ…自分の目で確かめてください：

この地図から明確なポイントはないようです。ホバリングがたくさんあります。どこにでも。

全体として、ホバーヒートマップの研究とその実際のアプリケーションから取り除く最も重要なことはこれです：

ホバーマップを使用してデザインを通知しますが、EyeQuantのRory Gallagherの言葉を借りれば、「過度に一般化しないでください」。

マップがNorthFaceによって作成されたもののように見える場合は、次のようなA / Bテストの貴重な仮説がある可能性があります。

「ホバーヒートマップから、チェックアウトページのCTAボタンの上の領域がより多くの訪問者の注目を集めているように見えることに気づきました。したがって、プロモーションバナーが上にあるボタンを切り替えることで、チェックアウトを増やすことができると考えています。」

ただし、2番目のヒートマップからテスト仮説を立てる場合は、確証バイアスの罪を犯している可能性があります。何かに対する信念を確認するという理由だけで、テストから特定の結果を探します。誤った情報に基づくストレッチは、次のようになります。

「ホバーヒートマップから、「ハウツー」という言葉が他の何よりも注目を集めているように見えることに気づきました。したがって、将来的には、読者を引き付けるために、すべてのブログ投稿の見出しを「ハウツー」で始める必要があると考えています。」

「ハウツー」は見出しを始めるのに最適な方法ですが、このテストはそれを示していません。懐疑的な考え方でヒートマップの結果にアプローチし、明確な理由がある場合にのみテストします。

責任を持ってヒートマップを使用する

ヒートマップは、人々がWebページをどのように使用しているかを明らかにするのに役立ちますが、そのために使用するツールはヒートマップだけではありません。単独で、彼らはあなたのユーザーの不完全な絵を描きます、そして見込み客の行動のあなたの唯一の指標として彼らに頼ることはあなたを誤解させる可能性があります。 Optimizelyのチームは例を提供します：

フォームのヒートマップを見ると、ユーザーが最初のフィールドをクリックしていて、後続のフィールドのクリック数が少ないことが示される場合があります。
これは、ユーザーが最初のフィールドに入力した後、プロセスから脱落していることを示している可能性があります。 ただし、ヒートマップに表示されないのは、ユーザーがマウスではなくキーボードを使用してフォームフィールドをタブで移動した場合です。

そのような理由で、ヒートマップをGoogleAnalyticsやInstapageAnalyticsなどの他のツールからの洞察と組み合わせると、クリック後のランディングページでの見込み客の行動のより完全なイメージが形成されます。

しかし、その「より完全なイメージ」は何か価値があるのでしょうか。十分なユーザーデータを収集していない場合はそうではありません、とPeepLajaは言います。

結果を信頼するには、ページ/画面ごとに十分なサンプルサイズが必要です。 大まかな球場は、デザイン画面あたり2000〜3000ページビューになります。 ヒートマップが34人のユーザーのように基づいている場合は、それを信頼しないでください。

結局のところ、ヒートマップはデータではないことを覚えておくことが重要です。簡単に消化できる方法でデータを整理するだけです。クリック、スクロール、ホバーが表示されます。これらのマウスの動きが何を意味するかは、あなた次第です。

顧客獲得あたりのコストを下げるために、常にすべての広告をパーソナライズされたクリック後のランディングページに接続してください。今すぐInstapageEnterpriseデモにサインアップして、専用のポストクリックページの作成を開始してください。