ネットショップ(ECモール)のスマホアプリをアイトラッキングで比較してみたら、PCサイトより使いやすそうだった

パソコンやスマートフォンで利用できる、様々なサービスのユーザビリティについて、アイトラッキングを使いながら考えるコーナーです。

以前、楽天市場・Yahoo!ショッピング・Amazon.co.jp・ポンパレモールのPCサイトを使って商品を探してもらうところを調査してみましたが、今度はスマートフォンではどのように商品を探すのか見てみました。

※今回、文章量が少々多めになっておりますm(_ _)m

調査内容

前回メトロノームを探してもらった方に、同様にメトロノームを、楽天市場Yahoo!ショッピングAmazon.co.jpポンパレモールのiPhoneアプリで探してもらいました。

なお、各サイトのアプリは普段使用していないとのことでした。iPhoneの容量を気にしてのことだそうです。

過去一度メトロノームをPCサイトから探してもらっているので、おおよその価格感やその時に良いと思った商品のイメージは頭の中に多少残っているということを考慮する必要があります。

アイトラッキング動画

まずはアイトラッキング動画をご覧ください。今回は4つのアプリの操作の様子を1つの動画にまとめてみました。


└左から順に、楽天市場Yahoo!ショッピングAmazon.co.jpポンパレモール

楽天市場

以下のような手順で、特に戸惑うこと無く良いと思える商品を発見することができています。

◯『メトロノーム』でキーワード検索
⇒サジェストをタップするか、そのままキーワード検索にするか少し迷います。

◯検索結果ページから、主に写真を見て商品を探す

◯一つの商品(商品A)を、写真→価格の順番に見てタップ

◯商品Aの商品ページ内で送料込価格を確認した後、下部のオススメ商品(商品B)をタップ

◯商品Bは表示価格は安いが、送料別だったので一旦見るのを止める

◯検索キーワードを変更

◯一旦見るのをやめた商品Aを見て「これで良いんだけど…」と発言
⇒実質、この時点で意思が決まっていました。

◯他にもっとオシャレな商品が無いか、念のため検索結果を下の方まで見る

◯送料込の商品Aを再度開く

◯商品Aのレビューを確認する

◯商品Aを買い物かごに追加

Yahoo!ショッピング

こちらも、スムーズに商品を探せました。PCサイトの時は送料無料かどうかを確認するために商品ページへ移動していましたが、今回は検索結果ページに表示される『送料無料』のアイコンで判断できていました。

◯『メトロノーム』でキーワード検索
⇒今度はサジェスト内から『楽器、手芸、コレクション』のカテゴリに絞られるものを選択しました。

◯検索結果ページを数秒見て、検索キーワードを『メトロノーム 振り子』に変更

◯表示される商品の多くが、デザイン的にあまり気に入らないものである旨を発言

◯少し価格の高い商品Aをタップ

◯検索結果ページに戻り、先ほど楽天市場で確認した商品と同じもの(商品B)をタップ

◯送料を確認し、別だったので一覧に戻る

◯送料無料の商品Cをタップ

◯商品Cの価格に納得できたので買い物かごに追加
⇒Yahoo!ショッピングのアプリでは、購入にログインが必要ということが伝わらず、2回かごに追加しました。

Amazon.co.jp

やはりスムーズです。チェックした商品はこれまでと全く同じ型番の商品ですが、検索結果ページで白い色のモデルが独立して表示されていたため、今回は白モデルが選ばれました。

◯サジェストを使い『メトロノーム 振り子』でキーワード検索

◯先程までと同じ型番の商品のうち、白い色の物が大きな画像で表示されており、気になってタップ(商品A)

◯検索結果ページへ戻る
⇒戻る動作が上手く動かない

◯同じ型番の黒いモデルをタップ(商品B)、同じ価格であることを確認

◯検索結果ページへ戻り、先ほどの白い商品Aをタップ

◯到着日を確認し、『今すぐ買う』をタップ

ポンパレモール

※時折アイトラッカーが隠れてしまい、トラッキングできていない箇所が発生してしまいました。

ポンパレモールは、前回のPCサイトの時と同様に、商品決定に至りませんでした。

◯『メトロノーム』でキーワード検索

◯検索結果ページを少しチェックした後、サジェストを使い『メトロノーム 振り子』にキーワードを変更

◯気に入るデザインではなかったため、手早く検索結果をスクロール

◯価格が高いため、並び順を『安い順』に変更

◯キーワードを2回変更してみるが、価格・デザイン共に条件に合わず探すのを諦める

PCサイトとの差

今回は、以下のような点が印象的でした。

◯楽天市場とYahoo!ショッピングと利用がスムーズだった

前回のPCサイトの時と比べ、商品決定までに要した時間を比較してみると、特にYahoo!ショッピングが短い事が分かります。

・楽天市場 約4分 ⇒ 約4分(約2分の時点で欲しい商品は決まっている)
・Yahoo!ショッピング 5分強 ⇒ 約2分半
・Amazon.co.jp 約2分 ⇒ 約2分
・ポンパレモール 3分弱で断念 ⇒ 2分強で断念

PCサイトではすぐに目的の用途に近いメトロノームが表示されなかったために戸惑い、また送料無料かどうかを商品ページで確認していました。

今回はその辺りがクリアできていたのが影響しているように感じます。楽天市場でも、後半の操作は意思決定に影響していないため、こちらも実質PCサイトの半分の時間しか必要としていないことになります。

◯アプリごとの操作内容に大差がない

4つのアプリを使ってもらいましたが、行った操作に大差はありませんでした。

・キーワード検索(サジェスト活用)
※楽天市場だけ使っていませんでしたが…

・一覧である程度目標の商品を決めてしまう

・商品ページで送料、レビュー、お届け日など表示されている情報をチェック

・問題なければ買い物カゴへ追加する

PCサイトの時は、並び順を変更したり、商品ページが長かったり短かったりと、使い勝手に差が大きかったような印象なのですが、画面サイズに限りのあるスマートフォンでは必要最小限の操作で商品が探せるようになっているようです。

アプリごとの画面構成の違い

トップページ、検索候補サジェスト画面、検索結果ページ、商品ページの画面構成の違いを見てみましょう。

トップページ

 

└左上…楽天市場、右上…Yahoo!ショッピング、左下…Amazon.co.jp、右下…ポンパレモール

この中で使用した機能はキーワード検索だけですが、全て画面上部に位置しています。

楽天市場はバーコードを、Amazon.co.jpはバーコードと商品パッケージを読み取る機能が存在するのが特徴的です。

検索候補サジェスト

 

└左上…楽天市場、右上…Yahoo!ショッピング、左下…Amazon.co.jp、右下…ポンパレモール

検索キーワードを入力し、候補が表示された状態のキャプチャです。

見た目はほぼ一緒ですが、こちらも楽天市場とAmazon.co.jpは、候補のリンク先にジャンプするだけでなく、候補キーワードを検索ボックスに追加する機能を持っています。楽天市場は『+』アイコン、Amazon.co.jpは左上を向いた矢印のアイコン部分がその機能です。

今回はいずれも使われていませんでした。

検索結果ページ

 

└左上…楽天市場、右上…Yahoo!ショッピング、左下…Amazon.co.jp、右下…ポンパレモール

こちらも表示されている内容はほぼ同じですが、Amazon.co.jpは割引率やお届け日が表示されているのが特徴的です。

絞込や並び替えが出来る機能もそれぞれ存在しますが、今回の調査では価格の安い商品が見つからなかったポンパレモールでしか使うことはありませんでした。

商品ページ

 

└左上…楽天市場、右上…Yahoo!ショッピング、左下…Amazon.co.jp、右下…ポンパレモール

商品ページは買い物カゴに入れるボタンの周辺を見てみます。いずれも商品画像がページを開いた時に大きく目に入ってくるレイアウトですが、Yahoo!ショッピングは『カートに入れる』のボタンをページ下部に固定しており、ページのどこからでも商品の購入に進めるようになっています。

Amazon.co.jpは商品購入のためのボタンが2つありますが、今回は『今すぐ買う』が押されていました。ポンパレモールは、商品ページは開かれてすらいません…。

検索結果ページのゲイズプロット

ECモールのPCサイトを調査した時も、旅行情報アプリを調査した時も、一覧表示されたページには閲覧の仕方に特徴がありました。今回も検索結果一覧ページのゲイズプロットを見てみましょう。

 

楽天市場

↑かなり狭い範囲で、写真・価格・商品名の中でも左の方を集中して見ています。

 

Yahoo!ショッピング

↑写真をかなり中心に見て、時々商品名や価格をチェックしています。楽天市場よりも、ハッキリと左右が分かれました。

 

Amazon.co.jp

↑Yahoo!ショッピングのゲイズプロットと似ていますが、より右側を見ています。検索結果の上位に、気になる商品がいくつか表示されたため、そちらをチェックする時間が長かったようです。

 

ポンパレモール

横2列の表示になっているせいか、見ている場所がバラバラです。画面右側はスクロールする指で隠れてしまうので見にくそうな気がしますが、1画面内に表示できる写真の数はポンパレモールが一番多いことが分かります。

検索を始める前にどこを見ていたか

実際に商品を探し始める前に、各アプリを立ち上げた後の最初の画面に興味を持って色々と見てくれたので、そちらもご紹介します。

楽天市場のアプリは、画面下の方にも少し視線が配られていますが、これといって興味を惹いたものはありませんでした。画像を2枚に分けているのはバーコード機能を試すために一度トップページを離れたためです。

もちろん、今回メトロノームを探すにあたりバーコードは使用していません。

Yahoo!ショッピングのアプリは、立ち上げ時にログインを促す画面が表示されます。そこにはくじが引けることのメリットを訴えるバナーが表示されていますが、実際に見ているのは『Yahoo!ショッピング』のロゴ部分だけですね。

トップページが表示されてからは、『おすすめ』『ランキング』『タイムセール』などのタブに目が行き、ファッションアイテムの紹介部分を閲覧していました。

Yahoo!ショッピングと同様に、ログインを促す画面が最初に表示されます。メリットがテキストで表示されており目立たないようですが、Yahoo!ショッピングのアプリと違い目線が配られていることが分かります。

トップページでは、Amazon.co.jpらしく家電が表示されていますが、被験者が女性なためかあまり興味を惹かれていた印象ではありませんでした。

ポンパレモールのアプリを起動して表示されるのは、ログインを促す画面ではなく固定のスプラッシュ画面です。ポイントについてのメリットが記載されていますが、周囲の写真に目線を取られてしまっています。

また、1秒強(体感)で強制的にトップページに切り替わってしまうので、読み取るのはちょっとむずかしそうです。

トップページでは、商品の写真が沢山表示されているためか、少しですが下の方へスクロールしていました。さくらんぼの写真があったので、そちらに興味が向いたようです。暇つぶしなどの場面だったとしたら、さくらんぼの商品情報をチェックしていたかもしれませんね。

まとめ

いずれのアプリも、とてもスムーズに使えていました。最終的には同じ型番の商品を選んでいたし、価格や送料が決め手だったため、このような型番商品であれば最低限の操作方法さえ理解できれば購入できてしまう事が分かりました。

食品など、もう少し探しにくい商品であれば各アプリの特徴が現れる可能性がありますので、後日改めて調査してみたいと思います。

それにしても、ポンパレモールは商品を探すのを諦めてしまわれがちですが、商品力のある店舗様が出店されたら、ポンパレモール内の市場を押さえることができるかもしれませんね。