SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ふるまいの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 関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

藤田 壮吉(富士通株式会社)(フジタソウキチ)

 富士通株式会社に入社後、会計ERP、機械学習、WebAPI、フロントエンド関連の開発に従事。企画・開発・教育・講演まで幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10767 2018/08/01 16:56

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング