Never Ending Re-InventionKaizen Platform オフィシャルブログ

UI改善の敵は余計な先入観!

サイトのUI改善やA/Bテストを行っていく上で、余計な“先入観”ほどやっかいなものはありません。

実際にテストをしてみると、「ずっと良いと思って使っていたコピーやビジュアルより、別の表現の方が効果が高かった」ということも意外とよくあること。

そこで今回はグロースハッカーとタッグを組み、既存のデザインにとらわれすぎず、ゼロベースで様々なアイデアを出し大きな改善に繋がったA/Bテストの事例を紹介します。

事例概要

A/Bテストの対象ページは転職関連の特集企画ページ。転職サービス『リクナビNEXT』への誘導を目的としたもので、主に20代~30代前半の男女がターゲット。

Yahoo!サービス内のバナー広告が主要な流入元となっており、より多くのユーザーに登録してもらえるように、会員登録数の増加(「リクナビNEXTに会員登録して診断スタート」ボタンクリック数の増加)をゴールとしています。

元案の特徴は目を引くアニメ風のイラストとキャチーなコピー

yahoolifesupport_case_gaiyo

上の画像はテスト対象ページの元々のファーストビューですが、「グッドポイント診断」というコピーとアニメ風の女性のイラストが特徴的です。無駄な要素を削りながらも、「無料」「会員登録はたったの1分」など気軽さもしっかりとアピール。

アクションボタンもわかりやすい位置に大きめに設置されています。

4回のABテストで大幅な改善

デザイン案を募るにあたって、ファーストビュー内のビジュアルやコピー、アクション導線、ページ全体のレイアウトなどをほぼ全て変更可能とし、グロースハッカーの自由度を高く設定。

4回のテストで様々な切り口のデザインが集まりました。

yahoolifesupport_case_allabtest

実際にA/Bテストをしたものから一部を抜粋したものですが、既存のデザイン案をベースに細かい変更をしたものから、抜本的に大きく変更したものまでバラエティに飛んでいます。

最初のテスト時に最もCVRが高かった改善案が、ラウンド2,3と連絡して1位。そして4回目のテスト時に投稿された案がそれをさらに上回るという結果になりました。特に注目すべきなのが、既存のものと大きく打ち出し方を変更したものが、今回は結果がよかったということです。

既存のアイデアとは別の切り口のデザイン案が上位に

最もCVRが高かった改善案は、細かい文章やボタンの文言は元案をベースにしつつもメインのコピーとビジュアルが大きく変更されたもの。

yahoolifesupport_case_good1

メインでは「グッドポイント診断」という言葉をあえて使わない

特にメインのコピーでは「グッドポイント診断」という言葉をあえて使わず、「私の”強み”って、こんなにあったんだ!」という同様の意味でも誰にでもわかりやすく、かつポジティブな印象をうけるコピーを用いた点が秀逸でした。

この点は1回目~3回目のテストで勝ち続けた案にも共通している部分で、グロースハッカーさん曰く“グッドポイント”という言葉は覚えやすくキャッチーな一方で汎用的ではない可能性があるため、『冒頭では強みという表現を用いて、徐々にグッドポイントという用語を理解できる形に』変更されたとのこと。

この辺りは中の人ととはまた違った視点から物事を考えやすい、外部グロースハッカーという立場を活かしたアイデアでした。

yahoolifesupport_case_good2

ビジュアルを大人仕様に変更

また、メインビジュルをアニメ風イラストではなく大人の女性の写真を使用した点も2案の共通点。今回のターゲットが20代から30代前半の男女ということから、大人っぽい印象を受ける写真に変更しています。

ダメだと思った案が実は1番良かったということはよくある

“ダメだと思っていた案が1番CVRが高かった””見栄えが良くて自信をもって使っていたデザインが実は他の案よりもCVを妨げていた”そのようなことは意外にもよくあること。

今回は既存のものとはコピーやビジュアルを大きく変更したものが最も効果が高かった事例を紹介してきましたが、“先入観”に囚われすぎないというのは、ABテストを成功に導くための鉄則と言えるのではないでしょうか?

事例公開に協力してくださったリクルートキャリア様、Yahoo!様ありがとうございました!