A/Bテスト事例クイズ「一番良かったパターンはどれでしょう」
ここからは、僕らが実際に行ったA/Bテストの結果を使い、どれが一番成果が上がったパターンかをクイズとして、みなさんに考えていただこうと思います。
第1問:A/Bテストには足し算ではなく引き算の考え方もある
次の図をご覧ください。
オリジナルの画面を含め、図にある4つの画面のうちでコンバージョンレート(以下、CVR)が最も高かったのはどれだと思いますか? なお、4つの画面はオリジナル画面に対し、ぞれぞれ次のように変更されています。
Aパターン:[WEB応募]ボタンと[電話応募]ボタンをなくし、[とりあえずキープ]ボタンだけにした
Bパターン:ボタンを全てなくした
Cパターン:[とりあえずキープ]ボタンを残し、[詳細を見る]ボタンを新規に追加した
第1問の正解
正解は、全く差がありませんでした。みなさんを騙したわけではありません。僕たちがA/Bテストを数多く行っている中で、差があまり出ない事例もけっこうあって、「3割当たればいいかな」という程度に考えています。ユーザーの気持ちになってもこういうことがあるので、差が出ないことがあってもめげないで続けてくださいというエールの意味でも、このような問題を出してみました。
すごく面白いのは、一番情報が少ないBパターンにおいてもCVRの有意差がないということは、実は必要のない情報をずっと出していたともいえます。この結果からは、A/Bテストには足し算ではなく引き算の考え方もあることを教えてもらいました。僕たちはけっこう学びのある事例だなと思っています。みなさんもいろんなA/Bテストをされるかと思いますが、いったん引いてみる、なくしてみると面白い結果が得られるかもしれません。
第2問 フラットデザインはCVRを増やすか減らすか
もう1つ、A/Bテストの事例を使ったクイズを出題しましょう。
左がオリジナルのパターン、真ん中がAパターン、右がBパターンです。変えているのは、画面上部にある職種名の表示方法です。
オリジナル:背景を凹ませて、リンクを表すアンダーラインを引いている
Aパターン:背景の凹みとリンクを表すアンダーラインともに削除した
Bパターン:背景の凹みをはずし、リンクを表すアンダーラインを残した
これら3つのパターンのうち、どれが一番CVRが高かったと思いますか?
第2問の正解
この事例ではちゃんと差が出ました。CVRが一番高かったのはBパターンでした。テキストにアンダーラインが引いてあると、ユーザーはそれがリンクであるとすぐ分かり「これ押せるんだな」と思うということが、学びとして得られました。
オリジナルのパターンはリンク部分を凸状にして、押したくなるデザインにしたのだと思うんですけど、それをなくしてみると、ユーザーの可読性が高まり、リンクであることがかえって分かりやすくなった。ただし、Aパターンのようにアンダーラインがないとリンクであることが伝わらないため、結果としてBパターンが一番CVRの高いデザインになりました。
これはクイズの第1問で紹介した「引き算のルール」が効いた事例といえるでしょう。みなさん、フラットデザインをどうしようか悩まれていると思うんですけど、そういうものにもトライしてみるのもいいのではないでしょうか。
2つの事例をクイズ形式でみなさんにご紹介しましたが、お伝えしたいのは「ユーザーの課題をしっかりと捉え、それをA/Bテストに反映していただきたい」ということです。また、先ほど述べたとおり、A/Bテストは思うような成果(差)が得られないことが少なくありません。めげずにがんばってください。