価格設定ページでのヒートマップの使用

「今月のA/Bテスト」は、A/Bではないテストから始めましょう。 インターネットの別のコーナーに逃げる前に、ヒートマップから始める理由を説明しましょう。

Webサイトで定期的にA/Bテストを使用しない主な原因の1つは、どこから始めればよいかわからないことです。どのような変更を、どこで、なぜ試しますか？ これらはあなたがあなた自身に尋ねる重要な質問です。 それらに答える方法がわからない場合は、テストをあきらめるでしょう。

これを克服するために、私がお勧めするのは、最初にWebサイトからページを選択して開始することです。 このページはあなたの目標に関連している必要があります。 これは、あなたが多くの訪問を受けるページであるか、あなたの活動やビジネスにとって重要なページであることを意味します。

今日の例では、プレミアムプラグインの価格設定ページ（Nelio A / BTestingとNelioContent）から始めることを選択しました。 これらのページは、当社の収入が両方から得られるため、当社のビジネスの鍵となります。

ページを選択したので、どのような変更を行うのか、そしてその理由を知るために、ヒートマップテストを実行することから始めることをお勧めします。 これを行うのは、ヒートマップが、訪問者がWebサイトをどのように操作したかに関する実際のデータを提供するためです。

ページが実際のユーザーデータでどのように機能するかを実際に確認すると、将来のテストを実行するためのアイデアを得るのがはるかに簡単になります。 これが、ヒートマップが常に良いスタートである理由です。

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

WordPressページのヒートマップテストの作成は非常に簡単です。 選択したページを選択してテストを開始するだけです。

Nelio A / Bテストでは、ボタンをクリックして新しいテストを追加したときに開くダイアログからこのタイプのテストを選択して、新しいヒートマップテストを作成します。

テスト編集画面で、後で簡単に識別できるようにテストの名前を設定します。 テストで試したいことの説明を追加することもできます。 最後になりましたが、ヒートマップテストを実行するページを選択する必要があります。

すべての準備ができたら（前のスクリーンショットにあるように、非常に簡単です）、ウィンドウの右上隅にあるボタンをクリックしてテストを開始します。 Nelio A / B Testingがページ上の訪問者の行動からデータを収集し、結果を処理するために、訪問者が来るのを待つ必要があります。

ヒートマップの結果

私たちの場合、2つのヒートマップテストをWebサイトで同時に実行しました。1つはNelio A / B Testingの価格設定ページ用で、もう1つはNelioContentの価格設定ページ用です。

各テストは約20日間データを収集し、約500人の訪問者の行動を分析しました。 これは、特定の結論を導き出し、これらのページで実行できる将来のA/Bテストについて考えるのに十分すぎるほどです。

これらのページは、当社のWebサイトにアクセス数が多いページではないことに注意してください。 これらはコンバージョンファネルの最終段階であるため、トラフィックは途中で失われます。 しかし、私たちのビジネスにとって重要であるため、私たちがそれらを選んだことを忘れないでください。 今後のテストでは、他の理由で説明するために、トラフィックの多い他のページを調査します。

Nelio A/Bテストの価格ページ

Nelio A /BTestingの価格設定ページで得られた結果から始めましょう。 ヒートマップテストでは、ヒートマップ、スクロールマップ、紙吹雪の3つの異なる観点からデータが表示されます。 ここに3つの完全な画像を埋め込むのは、ピクセル単位の高さの点で非常に大きいため、多すぎます。 上下にスクロールしなければならないのを避けるために、ここでリンクしました。

• Nelio A /BTestingの価格設定ページのヒートマップ。
• Nelio A /BTestingの価格設定ページのスクロールマップ。
• Nelio A /BTestingの価格設定ページからの紙吹雪。

ここで、前の結果の最も関連性の高いフラグメントを見てみましょう。

前の画像でわかるように、ヒートマップは、ユーザーとページの要素との相互作用を集約した方法で、暖かい色が大きな関連性を示すカラースケールで示すグラフィック表現です。

Nelio A / B Testingの価格設定ページでは、ページの最初の折り目は、より多くのホットスポットがある場所です。 詳細に分析すると、基本計画と専門計画の領域の要素は、企業の要素よりも関連性が高くなります。 これを考えると、おそらく最初にエンタープライズプランを表示するように価格プランを並べ替えることができます。 私たちは左から右に読むことに慣れているので、最初に価格設定ページに最も高価なプランを表示することは、A/Bテストで試すのに良い変更になる可能性があることに注意してください。

多くのユーザーインタラクションを受け取るもう1つの要素は、プランの詳細な比較を表示するために下にスクロールするためのリンクです。 これは、計画の詳細を確認することに関心があることを意味するため、良いことです。

あまり良くないのは、クリックできない要素には多くの相互作用があるということです。 紙吹雪でそれを見ることができます。紙吹雪は、訪問者が行ったすべてのクリックを見ることができるグラフィック表現です。

前のスクリーンショットで見ることができるプランのブロック全体では、各プランに表示されるボタンのみがクリックできる要素です。 他のすべてをクリックしても効果がないことに注意してください。 私たちの現在のインターフェースは混乱を引き起こしています。

訪問者は、クリックできない要素である各プランの機能のテキストとアイコンをクリックしています。 ここから、彼らがそれについてのより多くの情報を見つけようとしていることが理解できますが、代わりに、ページのさらに下にこの情報があります。

ここで試すことができるもう1つのA/Bテストは、プランの各機能を変更して、テキストにカーソルを合わせると表示され、訪問者により多くのコンテキスト情報を提供するフローティング要素を持つようにすることです。 現在のバージョンに対してコンテキストヘルプを使用してこのバージョンをテストし、どちらがより多くの購入を生成するかを確認できます。

紙吹雪は、訪問者が行ったクリックから抽出された、訪問者の集計情報も提供します。 Nelio A / Bテストには、訪問者のさまざまな特性をよりよく理解するためのいくつかのタイプのフィルターが含まれています。

これらのフィルターから、次のデータを抽出しました。

• ChromeとFirefoxは、訪問者がこれまでで最も使用しているブラウザです。 したがって、少なくともこれらのブラウザでは、Webの見栄えを良くする必要があります。
• このページへの訪問者の半分は米国から来ています。 これは当社の販売データと一致します。
• 訪問者は週の最初の3日間より多く私たちを訪問します。 この情報を知ることは、たとえば、Webの他の領域で他の日にオファーを作成し、トラフィックの少ない日にトラフィックを引き付けるのに役立ちます。
• 訪問者のほぼ100％が、デスクトップコンピューターまたはラップトップからページにアクセスします。 モバイルデバイスからの訪問はほとんどありません。 これは将来勉強するものです。
• Windows10とMacOSXは、人々が私たちを訪問するオペレーティングシステムです。 モバイルデバイスのオペレーティングシステムからの訪問者がいないため、以前のデータと一致します。
• 平日はより多くの訪問者がいます（テストはシカゴのタイムゾーンで実行されました）。 私たちの主なクライアントは米国からであるため、それは理にかなっています。
• 訪問は、1500ピクセルを超える最小幅の画面で行われます。 訪問がデスクトップコンピュータまたはラップトップからのものであることを確認するもう1つの事実。

ヒートマップと紙吹雪の完全版を確認すると、Nelio A/Bテストの価格設定ページの他のすべてのセクションの関連性が低いことがわかります。 それを念頭に置いて、次のスクロールマップを確認しましょう。

完全なスクロールマップを確認すると、ページの最初の折り目を超える訪問者はほとんどいないことがわかります。 これにより、Nelio A / B Testingの価格設定ページのはるかに短いバージョンを使用して、関連情報を折り畳みの上に凝縮する必要があると思います。

ページの最初の折り目以降のセクションには多くのテキストがあり、訪問者はそれを読んでいません。 ウェブの下部にある計画を比較する詳細な表を見て、対話するようになるのは20％未満です。 このすべてのデータは、スクロールマップによって提供されます。

より多くの視覚的なセクションを含むより短いバージョンのページでテストすることは、潜在的な購入者を説得し、価格設定ページをはるかに効果的かつ効率的にするのに役立ちます。 これは、A/Bテストで試すことができる変更のもう1つのアイデアです。

将来テストできるアイデアはすでにいくつかあるので、ヒートマップが提供する情報は、A/Bテストに適用できるアイデアを取得するのに非常に役立つことは明らかです。

Nelioコンテンツの価格ページ

Nelio A / B Testingの価格設定ページと同様に、ここにNelioContentの価格設定ページのヒートマップ結果を含む完全な画像があります。

• Nelioコンテンツの価格設定ページのヒートマップ。
• NelioContentの価格設定ページのスクロールマップ。
• NelioContentの価格設定ページの紙吹雪。

Nelio Contentの価格設定ページは、Nelio A/Bテストの価格設定ページよりもシンプルで短いものです。 他の理由の中でも、このページには1つの計画しかありませんが、Nelio A/Bテストでは3つの異なる計画がありました。

完全なヒートマップを見て、それをNelio A / Bテストのヒートマップと比較すると、この場合、最初の折り目以外に、ページの他の部分にさらに多くのホットスポットがあることがわかります。

前の画像では、プランを比較するテーブル内のアクションボタンが特別な関連性を持っていることがわかります。 その理由でそこにあるので、これは良いことです。 ただし、表のスタータープランは、無料バージョンのNelio Contentにすぎず、特別な関連性があることに注意してください。

ここで問題となるのは、訪問者が無料バージョンのNelio Contentをダウンロードできるように、価格設定ページにWordPressプラグインディレクトリへのリンクを含める必要があるかどうかです。 これで完了ですが、ヒートマップは、おそらく数人の訪問者が無料版に行くために価格設定ページを離れていることを示しています。

このトピックは物議を醸すものであり、私たちの会議での長い議論の源です。 一方では、価格設定ページ内で直接販売の可能性を失うため、リンクを維持することは良くありません。 しかし、訪問者が私たちのサイトを離れたとしても、NelioContentを無料で試すのは良いことかもしれません。 ユーザーはこのツールを気に入って、テストした後で購入することになります。 ネリオではこれについて何度か話し合いましたが、今日が最後ではないと思いますか？ 今のところ、リンクは残ります。 あなたはそれについてどう思いますか？

また、このビデオが大きな注目を集めていることもわかります。 非常にクールなビデオを作成しました。ページの前半で表示できるかもしれません。 最初のフォールドの後のセクションもそれほど関連性がないため、A/Bテストでこの変更を試すことができます。

一方、スクロールマップでは、ページを下にスクロールしても、訪問者の損失がそれほど急激ではないことがわかります。 これは、訪問者ができるだけ多くのコンテンツを見ることが必要な場合は、より短い価格設定ページの方がうまくいく可能性があることを確認しています。

さらに、前のヒートマップと組み合わせると、最初の折り畳みの後の2つのセクションで、特定の機能について説明し、人々の意見を示しているため、再設計が必要になる可能性があります。 テキストが多すぎてあまり注目されないセクションです。 より視覚的で直接的な代替バージョンを試すことができます。

クリックの紙吹雪のグラフィックに関しては、ページの最初の折り目内のクリックできない領域で行われた誤ったクリックの量を確認するのは興味深いことです。

これらのクリックのほとんどは避けられませんが（そうです、スクロールするときに、人々が側面の領域、特に右側の領域をクリックすると仮定します）、混乱した訪問者の結果である他のクリックもあります。 これは、前のスクリーンショットに表示されている月額料金番号のクリックの場合です。 その価格はクリック可能なアイテムではありません。 代わりにオレンジ色のボタンをクリックする必要があります。 ただし、以下に示す年間価格は適切なリンクです。

両方のケースで同等の相互作用を使用して、2つの価格を表示するためのもう1つのわかりにくい方法を探す必要があります。 これは、このページで実行できるもう1つのA/Bテストです。

そして今何？

私たちは、Webサイトで実行できるA/Bテストについて何も知らずに始めました。 ヒートマップは、ページのA/Bテストでテストするアイデアを簡単に得るのに役立ちます。 これらのテストのアイデアが得られたら、必要に応じて優先順位を付ける必要があります。

ページの最初の部分の変更は、より多くの人に表示されるため、テストが速くなり、結果が早く得られることを忘れないでください。 ページのその部分で変更を試みるA/Bテストの優先順位付けを開始できます。

そして、ここでの最も重要な教訓は、テストを開始したら、やめないことです。 テストプロセスを繰り返すたびに、Webサイトと訪問者の両方から新しいことを学びます。

来月、実際の結果を分析する別の種類のテストでお会いしましょう。 この投稿と私がここで説明したすべてについてのあなたの意見を私にコメントを残すことを忘れないでください。 サイトのどのページでヒートマップを実行しますか？

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