UXテストを用いてABテストの結果を向上する方法

Natalya Diatko

Diatko氏はフリーライターであり、コンテンツマーケティング/SEOのスペシャリストです。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

Using UX testing to dramatically improve your A/B testing results

私たちはABテスト(スプリットテスト)について、UXを改善してコンバージョンを増やす手段だと考えています。しかし実は、UXテストによってABテストも改善されるのです。

ABテストの設計は、当てずっぽうや直感ではなく、UXテストに基づかなくてはいけません。

それにより多くのコストと時間を節約でき、テストがより効率的になるのです。

ABテストとは?

ABテストに馴染みがない人のために、とても基本的な解説をしましょう。ABテストでは、あなたのサイトの特定の要素に関する2つのバージョンを用意します。CTAボタンの色、セクションのレイアウト、コピー案、メニューの順番など、何でも構いません。サイト訪問者の中からランダムに選ばれた半分にはひとつのバージョンを、あとの半分にはもう片方のバージョンを見せます。

2週間ほどこのテストを実施したのち、結果を比較します。2つのコンバージョンに大きな違いがあった場合、より効果の出たバージョンを使用するのです。本記事では、ABテストについてより詳しく学ぶことができます。

なぜABテストの設計にUXテストを使うのか?

ABテストは、(注意深く設計されていれば)コンバージョンを最大化するのに非常に強力な武器となります。しかし、変更ができる要素が何百もある中で、なにから始めればいいのでしょうか?
テストのデザインには主に3つの方法があります。

  1. 経験に基づいた予測:ひとりで、もしくはチームメンバーとブレインストーミングをし、テスト対象となる要素のリストを作成します。場合によっては、上司が既に決めているケースもあるでしょう。このアプローチの弱点は、内部の人間が客観的になり切れない点です。サイト訪問者がどのようにサイトをみて、どこで躓くのかがわからないのです。あなたのアイディアのいくつかは正しいかもしれませんが、間違いも多く含まれていることでしょう。
  2. スコアリングモデルABテストの優先順位付けには「科学的な」アプローチも存在します。たとえば、「PXL(Prioritization by ConversionXL)」、「PIE(Potential, Importance, Ease)」、「ICE(Impact, Confidence, Ease)」といった方法です。ページの重要性やABテストのしやすさ、予想されるテストのインパクトといったものを基準に並べることで、優先順位付けに役立つと考えられます。しかし、このアプローチにも大きな問題があります。これでもまだ当てずっぽうの範疇を出ないということです。たしかにより体系的ではありますが、なにがより重要なのかという選択はあなたの考え方に基づいたものであり、その考えがそもそも間違っている可能性があるのです。
  3. UXテスト:私が推奨するアプローチです。サイト訪問者がどこで問題を抱えているのか想像するのではなく、実際に調べてみる方法です。データの採取法としては、サイト自体からやターゲットグループ、ヒートマップ、オンラインUXテストサービスなど、いくつかの方法があります。どの方法もいくらかのコストはかかりますが、UXテストに投資することは結局コストを抑えることに繋がるのです。

どのページをテストするべきか

CTAボタンやファーストビューのテキストなど、目につきやすくて簡単な部分から手を付けたくなりがちですが、本当の問題は違うところにあるかもしれません。あなたがマイナーだと考えているページが原因かもしれませんし、ユーザーの探している情報があなたのサイトにないことかもしれません。適切なユーザビリティテストだけが本当の原因を明らかにできるのです。

予想外の問題の例をいくつか紹介します。

  • FAQページがない:サイト上の説明で十分だと思ったが、ユーザーがもっと知りたい情報がある場合。

ツールチップを付けることで、すぐに説明を見られるようにすることもよいアイディアです。

ツールチップの例。Credit: Humanity.com via appcue.com

FAQページは華やかである必要はありません。整理されていて、動線が明確であることが重要です。BufferのFAQがよい例です。

Credit: buffer.com

  • 返金ポリシーが見付けづらい/説明が明確でない:動線を考え直したり、文面を書き直す必要があるかもしれません。ManCratesの返品ポリシーの配置をよい例としてご紹介します。

Credit: mancrates.com

ところで、ページの読み込み時間がどの程度なのかもテストする必要があります。読み込みが遅いことは最悪なUXのひとつです。

Googleの業界別ベンチマークによると、3秒以下が基準です。読み込み時間がそれより大幅に長いようであれば、まずイメージやプラグインを確認してみましょう。もしホスティングサーバーのレスポンスが遅いことが原因であれば、より早いプロバイダーを検討した方がよいかもしれません。

UXテストにかけるお金がない場合

先に述べたように、課題を特定するには、自動ツールよりも人を介したテストがベストです。人を用いたUXテストはふんだんに予算がある企業だけのものとは思わないでください。お値打ちな方法もあるのです。

  • 友人や身内でテストグループを形成する。ユーザビリティテストには多くの人間は必要ありません。Googleの調査では、主要な課題を探し出すには5人ユーザーがいれば十分ということが示されています。
  • Fiverrなどのサービスでユーザビリティテストの対象を雇う。

Credits: Fiverr.com

  • TryMyUIUsability HubUserTestingのような専門のオンラインサービスを利用する(ターゲットの訪問者があなたのサイトを回遊している様子をライブビデオで提供するサービスもあります)。
  • ゲリラUXテストをする:カフェのような公共の場にいる人にあなたのサイトをみてもらう方法です。この方法は思っているよりも簡単で、あなたが気さくでフレンドリーであれば、ほとんどの人は同意してくれます。もちろん、ラップトップを忘れないようにしましょう。

さらにUXテストを重ねて仮説を立てる

ABテストを実施する主要なページを特定できたとしましょう。次のステップは、さらにデータを集め、変更をかける要素を決定することです。ここでは、低予算で効率的なアプローチをいくつか紹介します。

  • ヒートマップ:ユーザーがどのようにカーソルを動かしているかを追跡できます。なにがユーザーを惹きつけ、どこで止まり、どこで戸惑っているかがみて取れます。最近では、モバイルアプリ用のタッチヒートマップなるものもあります。ヒートマップの例としては、CrazyEggHotJarHeatmapといったものが挙げられるでしょう。以下が、ヒートマップの画面の例です。

Credits: Crazyegg.com

  • バグ/クラッシュレポート:ユーザーはサイトがクラッシュした場合に離脱することが多いため、どの処理でクラッシュが起こったかを知っておくべきでしょう。BugSeeAppseeBuddybuildといったサービスはこの機能を含んでいます。

BugSee上のアプリのクラッシュデータ。Credit: bugsee.com

  • 統計とフィードバック。訪問者データの収集、ユーザーとの直接のやり取り、彼らからのフィードバックを得ることができるツールは数多く存在します。UserreportUsersnapUsabillaといったサービスがその例です。

Usesnapによるユーザーからのフィードバック収集。Credit: usersnap.com

ここで、この段階のUXテストにより明らかになる、よくある課題を紹介します。

  • 多すぎる選択肢ヒックの法則によると、選択肢が多いほど選択に時間がかかるそうです。場合によっては、サイト上の商品カテゴリやサービスの数を削った方がよいかもしれません。

下の例では、トップの水平メニューに選択肢が多すぎます。もっと言うと、なぜ「Curve(グラマラスな体型)」が別カテゴリなのかがわかりません。

Credit: fasionnova.com

  • 馴染みのない配置:ボタンやフォーム、メニューの配置をクリエイティブにし過ぎたことはありませんか? ほとんどの訪問者は変化を嫌います。会員登録ボタンや言語選択などの要素がサイト上の特定の場所にあることに慣れているためです。

Microsoftによる配置の失敗例をみてみましょう。オランダ語から英語に言語を変更する際、ユーザーはまず言語セレクターをヘッダーから探します。しかしMicrosoftはサイト下部のフッターに配置しています。さらに言語のリストではなく、リージョン毎のサイトを並べた大きなウィンドウが開く仕様となっているのです。

Credit: microsoft.com

  • 視線のコントロールの失敗:たとえば、あるデザイン要素が興味深過ぎてCTAよりもそちらに注目してしまう、といったことがあります。本当に重要なものに注意が向くようにしなければいけません。

下のWebサイトでは、CTAがどれなのか、ユーザーはどこをクリックしたらよいのかが不明瞭です。

Credit: paleoleap.com

  • 不明確なバリューメッセージ:あなたがなにを売ろうとしているのか、ユーザーが理解できない場合があります。

こちらは曖昧なメッセージの例です。このバリューステートメントの意味するものは何なのでしょう?

上部訳:「EXALEADは理解・参加・行動を促すための隠された情報を紐解きます」Credit: 3ds.com

よりよいバージョンのデザイン

最後に、もう少々のUXテストを経ることで、ABテストで比較するバージョンをベストなものとすることができます。どうしようもない案同士を比較しても仕方がありませんから。

まずはいくつかのプロトタイプを作成することから始めてもいいでしょう。たとえば以下のようなものがあります。

  • 色違いのCTAボタン
  • 数パターンの支払いフォーム
  • 異なるメニュー構成
  • スタイルが違う画像や動画
  • フォーマル/カジュアルなコピー

これらはすぐにあなたのWebサイトに使用できるクオリティである必要はなく、シンプルなモックアップで問題ありません。作成には、MoqupsBalsamiqといったサービスを利用可能です。

もう少し本気のプロトタイプを作成する場合は、Proto.ioProtoPieなどのサービスを使うといいでしょう。

Credits: protopie.io

次に、最低5人のテストユーザーを集めるか、ゲリラUXテストを実施します。ターゲットグループに、どのバージョンがベストかを聞きます。その勝者をABテストに使うのです。

本当にここまでする価値はあるの?

これらの予備リサーチは複雑すぎて、ABテストというより一大作戦の準備をしているかのようだと思うかもしれません。

ひとつのABテストのために、何週間もかけて調査やプロトタイプの作成をする必要はあるのでしょうか?

答えはイエスです。

質の高いUXテストを経て生み出されたものは、既存のバージョンよりもよい成果を出すはずです。しかし、それより重要なことは、顧客について多くを学べることです。価値観、課題、意見といったものです。

ここまでみてきたように、ABテストとはなにも考えずに色々な選択肢を試すことではありません。下手な鉄砲も数撃ちゃ当たる、というわけにはいかないのです。他の科学的実験と同様に、ABテストとは知識を得ることです。ですから、より科学的なアプローチを試してみてください。それがあなたになにをもたらすかを体感できるはずです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて