CodeZine(コードジン)

特集ページ一覧

本当に「優れたUX」を目指そう~AI技術やA/Bテストでフロントエンドを改善し続ける方法

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

ふるまいのA/Bテスト

 UIに対するA/Bテストを紹介しましたが、目に見えるUIだけがA/Bテストの対象ではありません。UIが同一でありながらイベントハンドラやAction Creatorの処理のみが異なるReact ComponentをVariantとすれば、UIには現れないサービスのふるまいに対するA/Bテストが実施できます。

 登録してくれたユーザーの一部にはクーポン付きのメールを送信して、クーポンの効果を検証したいとします。まずUIが全く同一のSign Upボタンに対して、異なるイベントハンドラを割り当てます。

<Experiment name="Email-Coupon">
  <Variant name="WithCoupon" >
    <Button title="Sign Up" onClick={this.handleSignUpA}/>
  </Variant>
  <Variant name="WithoutCoupon">
    <Button title="Sign Up" onClick={this.handleSignUpB}/>
  </Variant>
</Experiment>

 イベントハンドラの片方はクーポン付きメールを送信して、もう片方はクーポン無しのメールを送信します。

handleSignUpA = () => {
  emitter.emitWin('Email-Coupon')
  ActionCreators.sendEmailWithCoupon()
}

handleSignUpB = () => {
  emitter.emitWin('Email-Coupon')
  ActionCreators.sendEmailWithoutCoupon()
}

 このようなA/Bテストの場合、結果をどのように取得すればよいでしょうか。

ユーザーの継続率を調査する

 長期的な視点で分析します。同じダッシュボードで今度はRetentionタブを開きます。ここでは継続率/リピート率が分析できます。例えばある日に目標行動を一度達成したユーザーが、別の日に再び訪問しているかを表示できます。今回の場合はExperiment Winを選択してVariantを切り変えればよいでしょう。

 するとクーポン有りのユーザーと無しのユーザーで継続率にどのような差異があるかを比較できます。

 短時間の利用状況もわかります。左上のAddictionを選択すれば、特定の条件を満たしたユーザーが何時間アプリを使っているかが表示されます。先に紹介した2ペインのユーザーと3ペインのユーザーの、利用状況の比較は、このAddiction機能によって分析するのもよいでしょう。

 専用のサービスを使うことで、高速に高機能なA/Bテストを実現できることがわかったと思います。今回はMixpanelの無償機能の範囲内で分析しましたが、有償機能を使うとさらに高度な分析が行えます。アプリケーションは作って終わりではなく、A/Bをはじめとした分析を導入し、データに基づいて継続的に改善していきましょう。

おわりに

 「優れたUX」は、仮説をユーザーに提示して行動を分析することで、たどり着くものであることがわかりました。一目見て気に入ったUXが作れたとしてもそれはあくまで気に入ったデザインであって、データによる裏付けがない段階では優れたUXとまでは言えません。また、そこからUXを変更してよりよい結果が得られるのにもかかわらず、気に入ったデザインに安心して改善を怠っていれば、それは優れたUXではなくなるのです。

 2015年にサンフランシスコで開催されたAPIのカンファレンスで、Programmable WebのファウンダーでAPIエコノミーの推進の立役者John Musserさんが、"An API is a journey, not a destination"(訳:APIは旅路であって、目的地ではない)とプレゼンテーションを終えていました。

 UXについても同じことが言えるでしょう。さらに言うと本連載で紹介したフロントエンドのアーキテクチャや技術も目的地ではなく、長い旅路の通過点です。

 さて、本連載は今回で最終回です。歴史を振り返って今現在作るべきWebアプリケーションを学び、そのスターターキットの1つとしてのK5 Playgroundの概要と、活用テクニックを紹介してきました。高速にプロトタイピングを繰り返し、A/Bテストという対照実験によって優れたUXを目指すスタート地点に立てたでしょうか。あとはみなさんが継続的に手を動かし続けるだけです。

 終着点のないフロントエンドの長い旅路を、日々コードを書いてデータを分析して楽しんでみましょう。

 Write the Code. Change Your Life!

K5 Playground 関連リンク



  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

バックナンバー

連載:アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5