ホットペッパー グルメ A/Bテスト

スマートフォンサイトのページ遷移UI改善

ホットペッパー グルメのスマートフォンサイトで効果的にページ遷移してもらうUIとは?CVR4%アップのA/Bテスト事例

こんにちは。リーン開発チームでホットペッパー グルメのUI改善を担当している松浪です。

事業的バランスも取りながら日々UI改善に取り組んでいますが、今回はスマートフォンサイトでの、シンプルだけれども効果につながったA/Bテスト事例をご紹介します。

A/Bテストの概要

この画面の目的

コースの一覧画面から、ユーザーが行きたいコースをよりスムーズに選べる。

この画面のUIに求める機能

条件にマッチしたコースを選別できる。 タップすればそのコースの詳細が確認できるとわかるUIである。

課題

コースの一覧画面から詳細画面への遷移数が少ないことを改善する。

仮説

そもそも詳細画面があることがわからない、押せるということがわからないのではないか。

対応

詳細がある、ということを伝えるための複数パターンを用意。

A/Bテストのパターン

テストパターン 概要
パターンA 「>詳細」を「>」に変更
パターンB 「>詳細」を削除し、コース名を青字のクリッカブルリンクに変更

A/Bテスト画像

結果

テストパターン ネット予約CVR改善率 有意差
パターンA 101% 有意差なし
パターンB 105% 99%で有意差あり

※オリジナルのネット予約CVRに対しての改善率 「>詳細」を削除し、コース名を青字のクリッカブルリンクに変更したパターンBが有意差ありで勝利

考察

「>」「>詳細」よりも、青字でクリッカブルリンク(≒詳細がある)と伝えた方がユーザーからわかりやすい。

シンプルな事例ではありますが、特にスマートフォンサイトでは、端末やネットワーク環境の進化に伴ってUIのトレンドが変わる速度も速いので、設計当初の思想にとらわれず、常にユーザーフレンドリーなUI改善を行うことがサイトコンディションの最大化に繋がるという実証例となったのではないでしょうか。

今後も大きな設計思想と小さなUI改善を織り交ぜながらUI、UXの最適化を目指していきますので、効果的な事例を共有していきます。

松浪 智之

(リーン開発チーム)

A/Bテストを活用したUI改善で、ユーザー視点を切り口としてサービスの改善を目指しています。汎用性のあるA/Bテスト事例を紹介していく予定です。

NEXT