サービスをグロースさせるためのUIテスト実装と結果分析

Pocket

ui分析

photo credit: NathanaelB via photopin cc

皆さんはサービスのトラッキング、ユーザーの動向を分析する際どういうツールで、どういう方法を取っていますでしょうか。
私は現在サイバーエージェントという所でにーよんろぐという1日気軽に投稿してアメブロにまとめる事が出来るという素敵アプリのフロントエンドの実装に携わっていて、主にHTML/CSS/JavaScriptでの開発を行っているのですが、Google Analyticsを使ったトラッキングでユーザーの動向分析の結果から見えた
メニューバー・ボタンの色・配置・ファーストビューのコンテンツ設計等のUI/UXの改善について書いて行きたいと思います。

1. 簡単な実装方法

最近では多くのABテストツールやトラッキングサービスが出てきて、割と簡単にプログラムを書かなくてもデータ分析が可能になってきましたが、
色々調べた結果独自実装した方が良さそうだったのでにーよんろぐではBackbone.jsとRuby on Railsという開発環境でGoogle Analyticsのイベントトラッキングを使いました。

フロントエンドの実装

ユーザーの振り分けに関しては、
フロントエンドはサーバーサイドでユーザーのクラスタリングとその情報を返してもらってbackbone.html.erbの中で
backbone.js.coffeeを2つに分けるようにしています。
coffeeはtemplatesやmodel,controllerは共通化出来るものはして局所的にviews,templatesの振り分けと機能毎の場合JSを別で用意しています。
サービス毎に設計・構成が異なると思いますので大枠だけのイメージ。

backbone.js.coffee
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
backbone.html.erb
<% if is_new_design_group_user? %>
   <%= stylesheet_link_tag "design_new/backbone", :media => "all" %>
<% else %>
   <%= stylesheet_link_tag "design_old/backbone", :media => "all" %>
<% end %>

トラッキング自体の実装に関しては
基本はタップされるメニューやリスト等にイベントを仕込んで、Google Analyticsのイベントトラッキングで送るというシンプルな形を採用し、遷移を含む場合はそれも追加出来るようにしました。
ex ) ~from~, menu/A-content

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

こんな感じで送る事が出来ます。詳細はアナリティクスの公式ページをご確認下さい

メソッドを1つ創って各viewがrenderされる際や、ボタンタップ時にイベント付けるだけなので導入コストは低いと思います。

2. ユーザーのクラスタリング

一般的なクラスタリングの方法とは異なるので参考にならないかもしれませんが、にーよんろぐではユーザーのクラスタリングを独自で行い、
新規・カジュアル・ヘビーと3つに分類。
条件は一定期間内の投稿数、連続投稿日数等。これによって継続・アクティブ、ユーザーの認知を判断しています。

3. データ計測結果

生のデータをお見せする事が出来ないので数値は置き換えています。
マイページというユーザーの個人ページがあり、そのページの数値でユーザーの分類毎に異なる結果が出ました。
変更点は下記のようなものです。

  • ファーストビューに入るカバー写真のサイズを小さく
  • 個人の情報を折りたたみ更新性の高いコンテンツをファーストビューに入れる
  • グローバルナビゲーションをページ内に置き、項目を変更、サイズを大きくした
  • リストのデザインを変更し、高さを抑え、スクロールの回数を減らす
  • グローバルナビゲーションの2コンテンツを小出しにしてマイページ内に表示
  • インフィニティスクロール(無限スクロール)を有限にしてもっと見るを押させる(その下にコンテンツをおいた為)
  • 文言をこの日をまとめる ⇒ この日をアメブロに投稿に変更

ui_abtest

Heavy User

ある一定期間に160万アクションから330万アクションで旧デザインの約2倍の伸びを示した

Casual User

ある一定期間に150万アクションから260万アクションで旧デザインの約1.7倍の伸びを示した

New User

ある一定期間に20万アクションから13万アクションで旧デザインから約0.65倍で減少した

ヘビー・カジュアルのように既にサービスに慣れ親しんでいるユーザーはより活発に行動するようになり、
逆に新規ユーザーにとっては情報量が増えたため、理解出来ずアクションが低いor離脱率を高めているという結果になった。
しかし、今回はKPIがPVのためヘビーとカジュアルに寄せ、新規ユーザーにとって情報量が多く見えているのはチュートリアル等でそもそもの継続率を高める等複合的に他の施策を打とうという考えもあり、新規デザインを採用をしました。

4. UI変更の結果

良くデザインの変更というとテキストの色やアンダーライン、質感・形の変更等様々なものが言われますが、今回は設計やコンテンツの複合テストで、デザインのテイスト(シャドウ・border-radius・タップ時のアクション等)に関してはほぼ変更はありません。

ファーストビューに入るカバー写真の縦のサイズ変更
メニュー内の更新コンテンツの変更
自分がマイページを閲覧時のプロフィール項目の初回非表示->タップで詳細表示
ui1

グローバルナビゲーションにあったページの遷移導線を削除して、初回ページ内にコンテンツを配置。
これによって回遊の数値も1.3倍に上昇
アルバム等のコンテンツは当然サムネイルがあった方がCTRは高いですね。
ui2

インフィニティスクロール(無限スクロール)もなくなるので高さを抑えて、スクロールの回数を減らす。
また、時系列デザインで振り返り易いものに変更。
ui3

にーよんろぐでは1日を簡単にアメブロにまとめて投稿出来、ブログを簡単に書けるという機能があるのですが、その文言変更により約20%CTR改善
ui4

ログサービスにおけるマイページは自分で振り返って楽しめるという要素
どれだけ他者から被アクションがあるかの数値と自分が何をやったかという自己愛=承認欲求
を満たす事で、上記の様な数値結果になりました。
ただ新規ユーザーにとってのクリエイティブ・導線設計、またはサービス説明という点で改善点を発見出来たので
チュートリアル改善に役立てたいと考えています。

5. 検討したトラッキングツール

今回検討したツールについて幾つか書いておきます。

  • PlanBCD  ABテストツール サイバーエージェントベンチャーズが出資しているKaizenPlatform社が運営

planbcd

  • Mixpanel アナリティクスツール     ユーザーの情報を送るとログイン記録も取得可能。スタートアップ界隈のサービスではよく使われている。

mixpanel

  • User Insight  ヒートマップでのアナリティクスツール    Userlocal社が運営

userinsight

6. まとめ

  • マイページのファーストビューは承認欲求を満たすかつ更新性の高いコンテンツは有効
  • スマホの場合回遊のメニューが多くぶつ切りにさせるよりも1ページにコンテンツ小出しの方が回遊率向上
  • 文言は画像の場合ローテして、テキストの場合管理画面から高速PDCAを回す事
  • PVの高さと継続は必ずしも比例しないので継続率は別の施策が必要になる事もある
  • 改善は地味だが、地道な改善なしに跳ねる事はない。勝つまでやる。
follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>