大手ECモールを使う様子をアイトラッキング – Vol.1 お米を探すママは検索結果で商品を決めている

NHN テコラスの清水と申します。

3年ほど前まで、ネットショップの各ページやバナー等を受託で制作していたウェブデザイナーでした。ネットショップ業界には10年程度関わっています。
現在はおかいもの研究室というチームにて、ユーザーテスト・アイトラッキングといったユーザー調査サービスの提供、独自調査内容の情報発信を行っています。
その中でも、なかなか利用される機会が無いのではと思われるアイトラッキングを活用して、大手ECモールで自分が欲しいと思っている商品を探す際の人の目線を可視化してみました。
対象の大手ECモールは、下記の4サイトです。
・楽天市場
・Yahoo!ショッピング
・Amazon.co.jp
・ポンパレモール

今回は被験者さん3名にそれぞれ欲しい商品を考えていただき、同じ商品を各サイトで探してもらいました。
上記サイトを閲覧していただくにあたり、通常のユーザーテストと同様にシチュエーションとタスクを設定し、良いと思える商品を見つけるか、見つけられないと断念するまでサイトを触っていただきました。
商品を探す際にどのような行動を取りページ内のどこを見ていたかを、4回に分けてお伝えします。
・Vol.1 お米を探すママは検索結果で商品を決めている
・Vol.2 Vol.2 戸惑いっぱなし、スリッポンを探すテック系女子
 ・Vol.3 Amazon.co.jpに敵なし…メトロノームを探す企画系女子の視線
 ・Vol.4（まとめ）大手ECモールを利用する際の視線に関する4つのポイント

皆様の運営されるECモール内のサイト、もしくは独自ドメインで運営される本店サイトのインターフェース改善のヒントとして活用いただけたらと思います。

レポートについて

レポートは、画面操作の様子を記録した『動画』と『ゲイズプロット』にて出力しています。

動画は、下記のように画面操作の様子を記録した動画の上に、赤い丸と線で目線の移動が表示されます。今回は1人4サイト×3サイト、合計12本の動画をご覧頂けるようにいたしました。

ゲイズプロットは、こちらのマミオンさんのブログに分かりやすく解説されています。
今回使用するゲイズプロットを要約すると、『各ページごとに見ていた場所を全て一度に見られる画像』です。

丸があるところは注視された場所で、丸が大きいほど注視された時間が長い事を表しています。
丸と丸を繋ぐ線は、目線がどこへ移動したかを表します。また、丸の中に数字が記載されており、視線が移動した順番も判別できます。

今回の調査概要

1回目の今回は、『20代後半、一児の母』に協力いただきました。調査概要は下記の通り。

・20代後半、0歳のお子様をお持ちの母
・平日に時短勤務をしている
・普段使うECモールは楽天市場とAmazon.co.jp
・シチュエーションは『家のお米が少なくなってきた』
・タスクは『買っても良いと思える商品を探し、買い物かごに追加する』

使い慣れている楽天市場、商品ページの中身は殆ど見ずに商品を決定

まずは、楽天市場を見ていただきました。大まかに、以下のような流れでサイトを利用していました。

・トップページの検索フォームにキーワードを入力
・検索結果から、一部の商品のレビューを確認する
・検索結果の表示順を変更し、再びいくつか商品のレビューを確認する
・気になった商品のページへ入る
・そのまま買い物かごへ追加

この時の商品の決め手は、レビューの多さや内容から感じられる安心感と、送料込だからとのこと。

このアイトラッキング中の画面操作の様子をこちらからご覧いただけます。

どこを見ていたのか

それでは、各ページのどこに視線が配られていたのでしょうか？一部のページをピックアップし、ゲイズプロットで見てみましょう。

商品検索結果ページを見てみると、まず最上位の商品に最も視線が集まっており、少し飛ばして10位の商品にも視線が集まっています。画像と価格に関しては、それ以外の商品にも若干目線が配られていることが分かりますね。

よく『Fの字の法則』などと言われますが、ここでは『日』や『口』に見えます。

次はレビューページを見てみましょう。レビューは、良いレビューもあまり良くないレビューも見ていることが分かります。

商品ページは、最終的に買い物かごへ追加した1商品のみ確認していましたが、とても長いコンテンツを決してじっくり見ることはなく、サッと目を通す程度でした。
下記のサムネイルをクリックすると、商品ページ全体のキャプチャが確認できます。

ページを開く際に「重い」と一言つぶやいていたこと、ページ読み込み完了後にカゴ周りのところまでジャンプしてしまうという楽天市場の仕様に若干翻弄されていたようでした。

殆ど使ったことのないYahoo!ショッピング、商品検索結果で視線がバラける

次はYahoo!ショッピングです。ほぼ利用経験がないということで若干の戸惑いが見られましたが、下記のような流れで無事タスクを完了することができました。

・トップページの検索フォームにキーワードを入力
・検索結果を、表示順序を変更しながらしばらく閲覧
・商品ページをチェック、ページ全体を一通り眺めて検索結果へ戻る
・別の商品ページへ。そこではレビューもチェックする
・買い物かごへ追加

[動画01_Yahoo!ショッピングでお米を探す.mp4]

どこを見ていたのか

それでは、こちらもゲイズプロットを見てみましょう。

まずは商品検索結果ページですが、楽天市場と比べると視線の移動がジグザグしています。特に、最初は商品の並べ替えの仕方に迷っていたようでした。
また、最上位の商品には最も視線が集まりつつも、ある程度下の方にある一部の商品にも視線が集まる傾向はこちらでも見られます。

またどの商品も、写真だけは短時間ながら見ているようです。

商品ページは、先程の楽天市場と異なりカゴ周りがページ上部にあるレイアウトです。ページ下部にある商品訴求コンテンツはサッと目を通す程度で、この後レビューを確認し商品を買い物かごへ追加しました。
グローバルナビとカゴ周りの間のコンテンツには殆ど視線が配られていません。

レビューのページは、特に評価の悪いレビューを意識して確認していました。

なお、レビューのページには『星1』のレビューが10件と表示されているのに1件しか表示されず戸惑っている様子が、動画で確認できます。

使い慣れているAmazon.co.jp、必要な情報を的確にチェック

続いてAmazon.co.jpです。個人的にはAmazon.co.jpで食品を購入するというイメージが無く結果の予想が付きませんでしたが、楽天市場よりも短い時間でタスクを完了することができました。
検索結果は一発で決まり、タスク完了までの時間の短さに寄与しています。

・トップページの検索フォームにキーワードを入力
・商品ページを開き、商品画像やレビューをチェックした後検索結果へ戻る
・検索結果ページから、別の商品のレビューページを開く
・星1つのレビューを先にチェックし、良いレビューもチェック
・レビューページを閉じ、検索結果で少しだけ迷った後先程レビューをチェックした商品ページへ
・買い物かごへ追加

どこを見ていたのか

商品検索結果ページのレイアウトが、楽天市場とYahoo!ショッピングの標準とは全く異なる格子状のレイアウトになっているのが特徴です。目線の移動の仕方も不規則です。

商品の画像が大きいため、視線の周辺（左右の商品画像）も何となく見えているようで、必要ないと感じた箇所には目線を配らずに済んでいるようです。

レビューページは、良くないレビューも良いレビューも目を通しています。また、文章をしっかり読むレビューとそうでないレビューが有ることがわかります。

商品ページは、主にカゴ周り以外はちら見程度といった感じです。

それにしても、あまりにもすんなりと商品を選択していた事が気になり聞いてみると、普段からお米を買う時はそれほど悩まず短時間で決めてしまうとのことでした。

初めて利用するポンパレモール、検索結果は迷うが意思が決まれば早い

最後はポンパレモールです。初めて利用するとのことですが、こちらも無事タスクを完了することができました。

・トップページの検索フォームにキーワードを入力
・検索結果内を、上から順番に5商品ほど目を通す
・条件や並び順を変更するが、検索結果を上から下まで少し時間をかけて確認
・更に条件を変更するが、電子ジャーなど想定外の商品が表示され戸惑う
・並び順を『標準』に変更し、最上位の商品のページへ
・その商品のレビューを確認し、レビュページからそのまま買い物かごへ追加