チェックアウトボタンでさまざまなスタイルをテストする

公開: 2020-12-02

今日は、数か月間実行している別のA/Bテストを紹介します。この一連の月刊記事では、いつものように、私たちが行った改善仮説、Webサイトのページのバリエーションを作成することによるその適用、および私たちが得た結果を詳しく見ていきます。

少し前に、NelioContentのメインページにあるアクションボタンの色を調べていました。 CSSスタイルのA/Bテストのおかげで、そのページへの英語を話す訪問者にとって緑色がどのように最適に機能するかを確認することができました。

これがどのページにも当てはまるとは限りません。そのため、本日は、Nelio A /BTestingの購入ページに表示される価格表からチェックアウトボタンの色とサイズをテストします。

A/Bテストの定義

改善のための私たちの仮説は、Nelio A / B Testingの価格表のチェックアウトボタンの色とサイズを変更すると、これらのボタンのクリック数が増え、その結果、売り上げが増えるというものです。

Nelio A / B Testingの価格表の元のバージョンには、販売する3つのプランが示されています。各プランには、価格、詳細、およびサービスにサブスクライブするためのボタンがあります。次のスクリーンショットで確認できます。

ボタンは、他の2つと比較してこのプランをより強調するために濃い青色のボタンがあるプロのプランを除いて、ほとんど目立たない灰色です。

最初に確認するのは、これらのボタンの色を変更してより印象的なものにするのが良いかどうかです。そのために、私たちが提案した代替バージョンには、以下に示すように、新しい色でのCSSスタイルの変更が含まれています。

最も目立つ色のNelioA/BTesting価格設定ページのボタンの代替。 — Nelio A / B Testingの価格ページのボタンの代わりに、より目立つ色を使用します。

プロフェッショナルプランは強調表示されていますが、他のプランはダークブルーで、この中間プランはより目立つオレンジ色になっています。色彩心理学の研究によると、アクションボタンにはオレンジが適しているため、前の画像で見たこのオレンジをプロの計画に選択することにしました。

ボタンのサイズもパフォーマンスに影響を与えるという仮説が立てられたため、以前のバリエーションで提案された色の変更を維持して、ボタンのサイズを大きくした新しい色を作成しました。この変更は、次のスクリーンショットで確認できます。

Nelio A / B Testingの価格設定ページのボタンの代わりに、より目立つ色と大きなサイズを使用します。 — Nelio A / B Testingの価格ページのボタンの代わりに、より目立つ色と大きなサイズを使用します。

したがって、Nelio A /BTestingの価格表のCSSスタイルには3つの異なるバージョンがあります。

スタイルを変更せずにオリジナル。
ボタンの色がより目立つ最初のバリエーション。
目立つ色と大きなボタンサイズの2番目のバリエーション。

このすべての作業が完了したら、これをCSSスタイルのA/Bテストに変換できます。そのため、Nelio A / B Testingを使用すると、さまざまなCSSスタイルのA / Bテストを作成して、WordPressでスタイルの変更を簡単にテストできます。

新しいCSSA/Bテストとその中の3つの選択肢を作成します。実際、バリエーションの前に見たスクリーンショットは、代替案を作成するためにNelio A /BTestingに含まれているCSSスタイルエディターのスクリーンショットです。

Nelio A/Bテストの価格ページのボタンでのさまざまなスタイルのテストの定義。 — Nelio A /BTestingの価格設定ページのボタンでのさまざまなスタイルのテストの定義。

上のスクリーンショットでわかるように、テストの範囲をNelio A / Bテストの価格設定ページに限定し、テスト内で測定する5つの目標を定義したという事実もあります。

任意のプランのボタンをクリックします。
基本プランのボタンをクリックします。
プロフェッショナルプランのボタンをクリックします。
エンタープライズプランのボタンをクリックします。
購入額。

これらすべてが作成されたので、10分以上かかることはありません。テストを開始し、結果が出るのを待ちます。今度はNelioA/BTestingがその仕事をする番です。私たちのプラグインは、着信トラフィックをさまざまなバリエーション間で分割し、A/Bテストで定義された各目標のコンバージョンをカウントします。

A/Bテストの結果の分析

このA/Bテストは、当社のWebサイトで3か月間実行されます。結果は以下のとおりです。このテストから導き出された結論を理解するために、各目標を詳細に分析します。

最初の目標は、料金表のプランのボタンのいずれかで行われたクリックを測定することでした。この場合、結果は、色が変更されたバリアントが17.2％多くのクリックを達成することを示しています。一方、色とサイズが変更されたバリアントは、ページの元のバージョンよりも15％劣っています。

ただし、これらの数値はいずれも、この目標の勝利バージョンを明確に識別するのに十分なレベルの統計的信頼性を達成していません。

2番目の目標は、基本プランのボタンのみのクリックをカウントしました。この場合、結果は前の目標と同様です。色を変えたバージョンが3つのうち最高で、色とサイズが最悪のバージョンがあります。

同様に、統計では、新しい色のバージョンを十分な自信を持って明確な勝者として特定することはできません。

プロフェッショナルプランでクリック数を測定する3番目の目標の場合は、少し異なります。以前と同様に、色付きのバージョンは優れており、色とサイズを組み合わせたバージョンは劣っています。しかし、現在の統計によると、明らかに勝利したバージョンには十分な自信があります。

より目立つ色を使用することで、クリック数が増えると言えます。オレンジ色のボタンは、以前の青いボタンよりもうまく機能します。

エンタープライズプランのクリックの場合、ここでは最初の2つの目標と同じ状態に戻ります。ただし、ここでは、元のバリアントと色が変更されたバリアントの違いはごくわずかです。はるかに悪いと思われるバージョンは、色とサイズの変更を含むバージョンです。

このクリックするものはすべて問題ありません。しかし、以前の結果だけを見ると、現実の部分的なビジョンが得られます。

このため、各バリアントで達成された購入数を測定する最後の目標を追加しました。より多くのクリックを獲得するバリアントを取得できますが、それでもより多くの売上を獲得できない場合は、誤った勝者を選択することになります。

次の結果では、これがまさに起こっていることであることがわかります。新しい色のバージョンは24.5％少ない売上を達成し、色とサイズを組み合わせたバージョンは現在のバージョンのページ（変更なしのバージョン）よりも16.6％少ない売上を達成します。

これらの結果から、コンバージョンファネルは複雑であり、フェーズに分割してマイクロコンバージョンをカウントすることがよくありますが、全体像を見失わないようにする必要があります。

マルチゴールA/Bテストを作成する利点は、Webサイトのパフォーマンスの全体像を把握するために必要なすべての視点を得ることができることです。これを行うことによってのみ、A/Bテストの結果のデータを見て完全に安心して勝者を選ぶことができます。

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