Appleがトップページで一時期不採用にしたカルーセルについてなぜ？辞めたのかが気になったのでA/Bテストをして検証してみました。

Appleがトップページで採用しているカルーセルを辞めた

Appleのトップページのデザインでカルーセルを辞めたというのが一時期話題になっていました。（現在は、カルーセル表示に戻っています。）※カルーセルとは、ひとつの画像領域のところに複数の写真を置いてペラペラとスライドショーのように見えるインターフェイスです。（有名なサイトだとappleのこのトップページの部分に使われています。）

参考記事:Appleがトップページで自動送りカルーセルをやめた理由 – Rriver

Appleがカルーセルから一時期変更したデザインは、こちら。

apple-top-no-carousel-201409

※ 補足をしておくと、このデザインに変更したのはiPhoneが発売されたタイミングのみでした。その後は、カルーセルの表示に戻っています。

カルーセルって。間違ってクリックしていませんか？

実際に自分もこのカルーセルでストレスの残る体験をしました。iPhone 6をクリックしたつもりが、スライドが勝手に次に移動してApple Watchのページに行ってしまいました。

数秒後に自動的に変わってしまうカルーセルでは、押そうと思った時に間違って次のページを押してしまう事ってありませんか？

なぜ商品発表直後は、カルーセルを不採用にしたのか？

どうしてカルーセルにしたり戻したりしてるのか？

気になったので実験することにしました。

Appleとe-Agencyのサイトでは、販売している商品が違うので完全な比較にはなりませんが、A/Bテストした結果から見えてきたものを少しでも楽しんで読んでいただければと思っています。

実験パターンをOptimizelyで作成

以前のバージョン

実験前のトップページのデザイン

実験した内容

実験してみたトップページのデザイン

変更することでどんなメリットやデメリットがあるのか？

簡単に結果を出すとこのようになりました。OptimizelyでABテストを行うと同じ期間で調べられるので時期的要因を排除することが出来ます。どのような変化があったのかまとめました。

バナークリック率　125％アップ

問い合わせ数　120％アップ

滞在時間　　120％アップ

クリック数の変化

ABテスト前テスト後のクリック数変化

結果は、このようになりました。

１番目のバナーは、クリック数が増加しました。　

２番目のバナーは、クリック数が減少しました。

3番目のバナーは、クリック数は、同じでした。

バナー領域全体は、125％アップ。

クリックデータについて補足

カルーセルを採用を辞めることで２番目のクリック数が落ちているじゃないか！と思われるかもしれませんが。新規のユーザのクリック数を調べてみたところ69％アップしていました。必ずしも、クリック数が減った！と落胆しなくても良いことがわかりました。

滞在時間の変化

テスト前のデータ

平均ページ滞在時間　00:01:07

直帰率　49.00%

ABテスト後のデータ

平均ページ滞在時間　00:01:21

直帰率　45.26%

カルーセルを辞めたことにより滞在時間、直帰率が下がった事がわかりました。

問い合わせ数について

1番目2番目のサービスについては、問い合わせ数に変化はありませんでした。3番目のサービスについては、通常の2倍ほどの問い合わせ数がありました。

クリック数は、少なくなった3番目のバナーでしたが、問い合わせ数が増えたのは、びっくりしました。

問い合わせ数が増えた推測。

私の推測は、トップページに貼られたリンクから適切なリンクにちゃんと辿りつけたのが原因かと思っています。

サイトトップページへの動線は、検索経由よりも被リンクやブログ経由で来ている人の事をもっと考えて設計した方が良いと考えさせられる結果になりました。

以上のデータを社長に見せたところ即採用。

このデータを元に改善ポイント改善内容を伝えたところ。

「こういうのは、速く改善していくのがいいよね。実装しよう！」

と言ってくれました。（良かった良かった。）

まとめ

カルーセル表示が有効な場合

・見てもらいたいコンテンツを1枚目に置き滞在時間を短くしたい。

・全体のコンテンツよりカルーセルの1枚目に集中して視点を集めたい。

カルーセル表示しない方が有効な場合

・色々なコンテンツの中から探しやすくしたい。

・滞在時間を増やし検討してもらうコンテンツを増やしたい場合。

A/Bテストしてみた感想

今回の結果をふまえて現在のe-Agencyのサイトは、カルーセルを辞めました。A/Bテストをする事で簡単に導入すべきか辞めるべきか？数字を元に議論できて楽しいね！一度A/Bテストを使って既存のサイトのメニュー表示などの機能などを見つめ直してはいかがでしょうか？

optimizely

e-Agencyには、A/BテストのOptimizelyをサポートするメンバーが沢山います。私は、まだ使い始めたばかりのマーケティング担当なので、より詳しいボトルネックの調査やテストを頼みたい方は、こちらからどうぞ。

超カンタンA/Bテスト『Optimizelyサポートパック』 | e-Agency

サイトトップページのカルーセル表示は、本当に有効なのか？A/Bテストで検証してみました。