読者です 読者をやめる 読者になる 読者になる

データドリブンでユーザー体験を改善する試み

Design エンジニア日記

こんにちは。サービス開発エンジニアの出口貴也 (@dex1t) です。
私は4月までユーザーファースト推進室にて、ユーザー体験の数値化や、その下地作りに取り組んでいました。まだ模索段階ではありますが、本エントリにてこの試みの現状をご紹介します。

点だけでなく線も検証する

リーンスタートアップのBMLループに代表されるように、サービス開発において、検証のフェーズは非常に重要です。 クックパッドでも、開発と検証はセットで考えられており、施策の良し悪しを指標から判断することは日常的に行われています。

ただ同時に、施策単体の検証だけでなく、施策を実施した結果、サービスを通してユーザーが得る体験がどうなったかを検証することも重要です。 クックパッドで言えば、「レシピを探す」機能 (点) だけを改善するのはもちろん、その前後関係を含め「レシピを探し、レシピを決め、作ってよかった!と思えた」という一連の体験 (線) の達成度合いも検証する必要があると言えます。

このような、サービスを通してユーザーが得た体験を、数値化し検証することは難しいものです。クックパッドではこれまで、ご意見ボックスを設置するなどして、定性的なデータを元に判断してきました。 しかしモバイルアプリを提供する機会が増えるにつれ、サービスを機能として捉えるのではなく体験として捉え、エンジニアもデザイナーも数値を武器にしつつ、機能やUIをデザインし開発をしていくことが、これまで以上に重要になってきました。

ユーザー体験をストーリーとして定義する

ユーザー体験を検証するにあたって、まずはサービス開発者が、どのような体験をユーザーに提供したいのかを定義する必要があります。これをユーザーストーリーと呼びます。

クックパッドでは、新しくサービスを企画する際に、アプリケーション定義ステートメントシートと呼ばれる企画フレームワークをよく使います。このシートのなかに、ユーザーストーリーも項目として含まれています。これにより、サービスを企画する際には、ストーリーについて考える機会が生まれます。アプリケーション定義ステートメントシートの詳細については、こちらのエントリで触れられていますので、ぜひご覧ください。

ここでは、以前私が企画・開発を担当していた、iOS版みんなのカフェのユーザーストーリーをご紹介します。 みんなのカフェは、食や暮らしの話題を中心とした掲示板です。その中で、「のんびり時間をつぶしたいユーザー」のストーリーとして以下を定義しました。

  1. 家事の合間にほっと一息。面白そうなスレッドを読んで時間を潰そうと思う
  2. 特に目的は持たずに、スレッド一覧から気になる話題を探してみる
  3. 気になったスレッドの内容、レスを見る
  4. わかる!確かに!と共感する
  5. まだ時間があるので他のスレッドも探してみる

f:id:dex1t:20150610163604p:plain

ユーザーストーリーの達成状況を測る

ここからは先ほど定義したユーザーストーリーの達成状況をもって、ユーザー体験の検証を行っていきます。

ユーザーの行動を測るためのツール

クックパッドでは、ユーザー行動を計測し分析するためのツールとして、Mixpanelを新規アプリを中心に導入し始めています。 この手のツールとしてはGoogle Analytics (以下, GA)が一般的ですが、GAは多くのユーザーの行動を俯瞰的に捉えることを得意とする一方で、ある特定のユーザーがどんな行動を取っているのかを捉えることは不得意です。 Mixpanelは、このGAのデメリットを補完する役割として併用しています。 またMixpanelの利点として、イベントトラッキングをファネル分析やリテンション分析と連携することが容易な点が挙げられます。

なお、ここからはMixpanelについての言及が多くなりますが、Localyticsなど他のツールも同等の機能を備えており、Mixpanelに限った内容ではありません。

Mixpanelでファネル分析

ユーザーストーリーは、ユーザーがサービス内で行う複数の行動から構成されるものです。この行動 (イベント) の発生を、Mixpanelでトラッキングしていきます。

例えば、先ほどのユーザーストーリーであれば、以下のようにストーリーをアプリ内の行動に近似します。

  1. 家事の合間にほっと一息。面白そうなスレッドを読んで時間を潰そうと思う
    • [行動] アプリを起動する (Open App)
  2. 特に目的は持たずに、スレッド一覧から気になる話題を探してみる
    • [行動] スレッド一覧を一定量スクロールする (Find Topic)
  3. 気になったスレッドの内容、レスを見る
    • [行動] スレッド詳細画面に遷移する (View Topic)
  4. わかる!確かに!と共感する
    • [行動] Likeボタンを押す / レスを投稿する (React)
  5. まだ時間があるので他のスレッドも探してみる
    • [行動] スレッド一覧画面に戻り、一定量スクロールする (Find Topic)

そして、これら一つ一つの行動をファネルと捉え、その達成状況をファネル分析することで、ユーザーストーリーの達成状況が計測できます。例えば、このストーリーをファネル化したものが以下です。

f:id:dex1t:20150610163826p:plain 注: 図中の値は、実際の値とは異なります

この例だと、CVR 42.0%という数字が、このストーリーの達成状況となります。

最重要指標を決める

Mixpanelのようなツールを導入すると、ついついあらゆるボタンのクリック数を測りたくなってしまいます。 クックパッドでは、GAとの使い分けとして、Mixpanelはユーザーストーリーの達成状況を計測することに限って使うことにしています。

また1つのサービスには、複数の登場人物が存在することが多々あります。例えばみんなのカフェで言えば、暇つぶしに色々なスレッドを閲覧したいユーザーのほか、食に関する疑問があり質問を投稿しようと思っているユーザーなど、モチベーションの異なる複数のユーザーがアプリ内に混在します。そして、そのユーザーそれぞれに利用ストーリーが考えられます。

全ての登場人物のストーリーを追うのは難しく、それを目指すと数値に溺れるような感覚になりがちです。そのため、サービスが成長する上で、現段階で最重要となるストーリーに絞って、達成状況を測ることが重要になります。

みんなのカフェであれば、新規に立ち上げたコミュニティであるため、まずはスレッドを投稿してもらうことが最重要だと考えていました。そのため、まずはPVや回遊率ではなく、スレッドの投稿数を重要指標としていました。したがって、先程の例で言えば、「食に関する疑問があり、質問を投稿しようと思っているユーザー」に関するストーリーの達成状況を最重要視していました。

このような考え方は、Lean AnalyticsのなかでOMTM (One Metric That Matters)と呼ばれています。また同様の考え方がMixpanelの設計思想にも現れており、Mixpanelのヘルプページでも重要指標のみに集中せよとあります。そのため、このような考え方のもとで使うツールとして相性が良いと考えています。

iOS版みんなのカフェでの改善例

以上のような考え方に沿って、実際に数値ドリブンでユーザー体験の改善を行った、iOS版みんなのカフェの事例をご紹介します。

先にも述べましたが、iOS版みんなのカフェでは、コミュニティというサービス特性上、アプリ起動からスレッド投稿にいたるまでのユーザーストーリーの達成状況を、最重要視していました。 実際にスレッド投稿を行うためには、大きく分けてユーザーに以下のような行動をとってもらう必要があります。

  1. スレッド投稿ボタンを押す
  2. カテゴリーを選択する
  3. スレッド内容を入力する
  4. スレッドを投稿する

f:id:dex1t:20150610163918p:plain

ここでMixpanel上で、投稿ボタンを押してから投稿が完了するまでのファネルを作ってみると、以下のようになります。

f:id:dex1t:20150610163937p:plain

ここで気になるのは、最初のステップです。投稿ボタンを押してから、カテゴリーの選択を完了したユーザは、全体の58%しかおらず、約42%のユーザーがここで離脱してしまっています。 カテゴリーを選択するだけのシンプルな画面にもかかわらず、離脱率が高いことから、改善の余地がありそうです。

そこで、改善するための仮説として以下を考えました。

  • 投稿する気持ちが高まっているユーザーに対しては、カテゴリー選択画面よりも入力画面を最初に出したほうが、ユーザーの期待に沿っているのではないか
  • 文章を入力する前から、これから入力する文章のカテゴリーを選ぶのはそもそも難しいのではないか

この仮説のもと、カテゴリー選択画面と、スレッド内容入力画面を入れ替えてみることにしました。これにより、以下のようなフローになりました。

f:id:dex1t:20150610164000p:plain

そして、再びファネル分析をおこなった結果が以下です。仮説通り、入力画面からカテゴリー選択画面への遷移での離脱は少なく、全体のCVR (投稿ストーリーの達成率) も向上しました。また、念のため検定にかけてみると、有意な差がみられました。

f:id:dex1t:20150610164016p:plain

ここでご紹介した事例は、かなりシンプルなものですが、Mixpanelでファネル分析を行いつつ、ユーザーストーリーの達成状況を改善していく雰囲気を感じていただければと思います。

特に、今回のような分析は、あえて専門のツールを使うまでも無いかもしれません。ツールを使ったからといって、これまで分からなかった何かが分かるわけではありませんし、仮説を立てるところこそ、サービス開発者の頭の使い所です。 Mixpanelのようなツールを使うことで、分析が手軽にわかりやすく可視化され、仮説を立てやすくなり、その結果サービス開発のスピードがあがることに価値があると思っています。

まとめ

本エントリでは、ユーザー体験をストーリーとして定義し、その達成状況を計測し改善するための試みについてご紹介しました。実際には本エントリのようなアプローチだけで、ユーザー体験の検証が十分かと言えばそうではなく、インタビューやユーザーテスト、開発者自身によるドッグフーディングなど、他の手法と組み合わせることが重要だと考えています。

UXというとデザイナーの仕事のように思われがちですが、UXはデザインだけでなく、エンジニアリングも含めて成り立つものです。個人の感覚だけに頼るのではなく、チームの共通認識として重要指標を決めることで、エンジニア, デザイナー, ディレクターが一丸となってユーザー体験の向上に取り組むことができるのではないかと思っています。このようなサービス開発にご興味がある方は、ぜひエンジニア・デザイナー採用にご応募ください!

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/