Uberがアイトラッキングを利用してWebデザインを改善。その全貌を、新旧比較で大公開

製品やサービスの広告、紹介、販売促進など、すべてのWebサイトには目的があります。これらの目的を達成するためには、Webデザインで人目を引きつつ、ユーザーに的確なアプローチをしなければなりません。

今回は配車サービス『Uber』は2018年、アイトラッキングを活用してWebデザインを大幅に改修しました。この記事ではそのケーススタディをご紹介します。

アイトラッキングでWebサイトを分析する

まずアイトラッキングとは、「視線の動きをトラッキング（追跡）する手法のこと」です。

かつては高価で専門的な技術でしたが、近年はRealEye.ioなどを使用することで、分析も1日足らずで完了し、コストを削減できます。

さっそくUberのアイトラッキング結果を比較してみましょう。

• 旧バージョンのWebサイト
• 新バージョンのWebサイト

まずは、どんな違いがあったかをあなたの中で結論づけ、それからこの記事を読んでみてください。

▲左：旧バージョンのWebサイト　右：新バージョンのWebサイト

準備はよろしいですか？ それでは比較を始めましょう。

最初に知っておいてほしいキーワード

アイトラッキングに詳しい方は、この章は読み飛ばして大丈夫です。

「アイトラッキングヒートマップ」

アイトラッキングテストの結果が、ヒートマップで表示されています。ヒートマップは、人がどの部分をどのくらいの時間見ていたのかというデータを、可視化したものです。

言い換えれば、注視点の密度をグラフィックに表したもので、ページ上で最もよく見られているスポットがどこかを表しています。

「アイ＆マウスレコーディング」

デザイン全体において、注視点とマウスカーソルの関係性が、どのように相互作用しているかを示す映像を指します。

「関心のある領域（AOI）」

RealEye.ioのヒートマップを使えば、「ユーザーが関心のある領域（AOI）」を定義できます。これは、定量的な眼球の動きを測定できる分析ツールです。

クリックして境界（長方形）を描くだけで、次のような指標が得られます。

• 特定の領域に視聴者が費やした合計時間（合計視聴時間の中で、割合として表示）
• 一回の視聴あたりのこのエリアに費やした平均時間
• 最初の視聴までの平均時間（最初にこの領域を見るまでに視聴者が要した時間）
• 注視カウンタ（この領域での注視の平均量、つまり平均してこの領域を何回見たか）
• ビューアカウンター（すべてのビューアのうち、この領域を見た人の数）

▲AOI付きのヒートマップ

新バージョンの見出しは、旧バージョンより2倍長く見られている

ページ全体の特性と内容が集約されるため、見出しは最も重要なパートと言えます。

それぞれのAOIを分析してみましょう。

▲古い見出しのAOI

▲新しい見出しのAOI

▲見出しのAOI比較

新バージョンの方が優れていることは明らかです。旧バージョンでは90％の人々が見出しに注目していましたが、残りの10％の人は見出しに注意を払っていませんでした。

ページの表示から、旧バージョンの見出しは平均1.5秒後に見られていましたが、新バージョンの見出しは約1.0秒後に見られています。これは大きな違いと言えるでしょう。

さらに人々は、新バージョンのスローガンをより長時間見ています。1回の表示につき、旧バージョンと比べて2倍長い時間を費やしています。

また新バージョンでは、ページ全体を見る中で約8％の時間を見出しに費やしていますが、旧バージョンではわずか3％でした。

新バージョンでは、男性の写真を使ってテキストに視線を誘導している

アイトラッキングの結果を参照することで、メインページの見出しに関して、Uberがちょっとしたウェブサイトの調整で大きな成果をあげたことがわかりました。

• 標語を「中心」に置き、より現実的な内容にしたことで、このページの目的が何であるかを瞬時に分かるように
• 「登録」ボタンを分けることはしない。登録フォームはクリックした後のページに表示されるため、旧バージョンのようにユーザーの注意をそらしてしまうことはない
• 最も重要なポイントは、写真を変えたこと

2つのバージョンのAOIデータを比較してみましょう。

▲新旧の顔写真のヒートマップ

▲顔写真のAOI

「写真の人物がどこを見ているか」というわずかな違いによって、ユーザーの反応が大きく変化しました。

カメラ目線でこちらをみている写真を採用すると、ユーザーもまた写真を見つめ返す傾向があります。一方で、テキストの方を見ている男性の写真の場合、ユーザーはテキストに注目する傾向がありました。

旧バージョンの場合、人々は見出しよりも顔を見る方に多くの時間を費やしました。新バージョンでは顔に対する消費時間の比率は8％→3％に、合計時間は7％→3％になりました。より早く顔写真に気がつき、そしてスムーズにテキストに視線を誘導できるようになったのです。

新バージョンでは、ロゴを小さく、メニューを大きく表示

Uberのロゴは優先して表示される必要があまりないため、小さめに、あえて少し目立たないようになっています。

旧バージョンのWebサイトでは19％のユーザーがでロゴを見ていましたが、新バージョンのWebサイトでは16％に減少しました。

さらにUberは「バーガーメニュー」を、単純なヘッダーメニューボタンに変更し、サービスの数を増やす度に追加していきました。その結果、メニューには多くの注目が集まりました（2％→6％に増加）。

新バージョンでは、CTAボタンの数を削減し、注視時間を3倍に伸ばしている

すべてのページではないにしろ、多くのページでもっとも重要となる要素のひとつが「CTA（Call to Action）ボタン」です。

見出しのすぐ下にある「登録」という最初のCTAボタンが、ここでは最重要視されます。

▲最初のCTAボタンのAOI

旧バージョンのCTAボタンは大きく明るい配色でしたが、それほど目立たず、平均して閲覧2秒後に気がつかれる状況でした。旧バージョンでは、4つの登録ボタンの他に、5つのCTAボタンが設置されていましたが、新バージョンでは登録ボタンを4つに削減しています。

CTAボタンが見られていた合計時間を、両方のケースで合計してみましょう。旧バージョンのWebサイトでは、訪問者がページを見ていた時間のうちの約2％であり、さらにそのうちの半分だけが登録ボタンに割り当てていました。つまり、登録ボタンへの注視は1％しか行われていなかったのです。

新バージョンでは、登録ボタンの閲覧時間は全体の約3％を占めていました。つまり新バージョンのWebサイトでは、旧バージョンと比べて登録ボタンに約3倍の注目を集めていたことになります。

新バージョンでは、「顔」の数を削減している

旧バージョンでは、同時に表示される「顔」の数は約9種類ありましたが、新バージョンでは2種類のみに削減されました。

人々が顔を見るのに費やした時間は、旧バージョンでは滞在時間全体の13％、新バージョンでは8％でした。「顔」の数を削減することで、ユーザーの注意が散漫になるのを抑えたのです。

▲旧バージョンと新バージョンのWebサイトの全ての顔比較

新バージョンでは、ページの長さが短くなっている

「人々がどのくらいページをスクロールしたか」「実際にどれだけの人がフッターを見たか」という点に注目してみましょう。

▲フッターのAOI

旧バージョンのフッターはユーザーの17％にしか見られておらず、新バージョンのフッターは70％近くのユーザーに見られたことがわかります。また、古いバージョンは見ている時間がより短い傾向があります。これはなぜでしょうか？

前提として、新しいUberのWebサイトは短くまとまっています（縦方向で約4500ピクセル〜約6500ピクセル）。旧バージョンはページが長く、ユーザーがページの終わりに達する前に飽きてしまう傾向がありました。

縦に長いページのフッターにCTAボタンがあっても、コンバージョンに繋がらない傾向が見られます。さらにフッター自体にも選択肢が多く、情報が散在していたようです。

アイトラッキングから分かったその他のインサイト：ユーザーが最も注目する場所

▲AOIに基づくUSP

一般的には重要度の高い順に、左から右にコンテンツを配置すべきだと思います。しかしアイトラッキングのデータを見てみると、最も注目されるのは「中央」、次に「左側」、最も目立たないのが「右側」でした。

まとめ

アイトラッキングヒートマップの分析をとおし、Webサイトを最適化するためのポイントが掴めたかと思います。

• 見出しに注目してもらうためには、まずは見出しを中央に据え置く
• 人の顔写真は「注意を引くものである」と意識する。ユーザーを混乱させたり、注意を何かに向けさせる効果もある
• CTAボタンの数を減らして適切な場所に配置する。画面中央にある要素が最も目につきやすい
• ページを長くし過ぎない。ページが長いと途中でユーザーが飽きてしまい、重要なポイントを伝えられない可能性がある

どのポイントも、あなたのWebサイトの改修に大きな効果をもたらす可能性があります。

最も貴重なのは、RealEye.ioのヒートマップがユーザーの注視点とマウスカーソルの記録（クリックを含む）のデータを収集できることです。RealEye.ioでユーザの無意識の行動を独自に理解し、UXの問題を発見するのに役立てられます。アイトラッキングがどのように機能するか試したい方は、RealEye.io7日間の無料トライアルを試してみてはいかがでしょうか？

（原文：Adam Cellary　翻訳：Takei Tomomi）

こちらもおすすめ！▼