スマホECの商品カテゴリーへの件数表示・絞り込み検索・商品画像

Pocket

今回はスマホECサイトにおけるユーザビリティについてお伝えしていきたいと思います。

<スマホECサイトのユーザビリティ改善>

(1)  カテゴリーには件数を記載する
(2)  商品一覧の表示件数をスマホ仕様にする
(3)  絞り込み検索の指定時に該当数を表示する
(4)  詳細ページの最上部に商品画像を表示する

(1)カテゴリーには件数を記載する

商品カテゴリーはカテゴリー名の横に掲載されている商品数を記載することが必要です。どのカテゴリーが充実しているのか一目でユーザーに伝わり理解されやすくなるためです。サイト運営側の都合としては商品数が少ないジャンルや多いジャンルと少ないジャンルのバランスが取れていない都合もあるかもしれませんがユーザー心理を優先させるのが正しいサイト設計です。

ユーザーがしたいことを早く完了することがモバイルでは特に求められますがもし商品件数の表示がない場合に商品一覧ページへ進み、思った以上に商品数が少なかったとしたらユーザーが遷移前に考えた期待以下になってしまい、結果的に離脱に繋がってしまうこともあるでしょう。

ファッションECマガシークではジャンルを開閉式メニューで開くとジャンル内の合計を示す「全てのアウター(6,945)」が太字で書かれ、その下に「コート(3,188)」、「ダウン・中綿(705)」と全てのアウターの内訳が表示されるのでユーザーにとって親切な表示です。ただ開閉式メニューを開かないと商品数が見えないのは多少残念に感じました。

東急ハンズECではスマホサイトTOPページのカテゴリー領域に「ビューティー・ヘルスケア(7,797)」、「キッチン用品・調理器具(5,641)」と最上段の分類に商品数の合計が書いてあり、メニューを開くと小カテゴリーは背景色が変わってその内訳が表示されています。東急ハンズのカテゴリーの商品数表示は見本となるような構成だと思います。

201501img01

その一方で商品数がサイトのポイントではない場合は商品数をカテゴリーに表示しない場合もあります。例えば健康食品のやずやサイトやおもちゃECのトイザらスサイトには商品数表示はしていません。商品数ではない領域で勝負しているサイトであるからだと想像しますがこれは例外的なことだと思いますので、多くのサイトにはカテゴリーに商品数を記載することが正しい対応です。

(2)商品一覧の表示件数をスマホ仕様にする

商品一覧では最低でも20件か30件ずつ表示させるようにします。スマートフォンは容易にスクロールが出来るため、5~10件ずつの表示だとページの次へを押す回数が多くなりタップ数が増え使いづらいためです。フィーチャーフォン時代の画面設計では端末の性能の問題により多くとも10件の表示に制限をしていましたがスマホ時代ではそれは正しくありません。開発できるのであれば表示件数をユーザーに選択させる施策もよいでしょう。

通信環境や端末の性能によって60件や100件の表示でもスムーズな場合もあるからです。

ニトリは20件、フェリシモは30件なのでストレスを感じずに利用できますがヨドバシカメラ、セシールは10件なので多少不便さを感じますね。

201501img02

無印良品や楽天、ユニクロオンライン、コスメ通販のアイビューティーストアでは自動読み込みで1ページですべての商品を閲覧できるようにしています。これもスマホらしい商品一覧の商品表示のやり方の一つです。

1ページあたりの表示件数を増やしたりユーザーごとに表示件数を選択できる仕様にするとデータベースへの負荷が上がることになるのでインフラを担当する技術部門と調整・相談してみましょう。

(3)絞り込み検索の指定時に該当数を表示する

細かい検索条件で検索させる時は条件に該当する商品数をリアルタイムに表示するのが便利です。「検索する」ボタンを押さずに該当商品の件数が分かったほうがユーザーの期待と相違を生みません。もしこの機能がないとすると絞り込み検索で指定した条件でたくさん出てくると思って商品一覧に遷移したら全く無かったということが起きうるのでテンションを下げてしまう可能性があり、その場合は検索をやめてしまうことになるでしょう。

(4)詳細ページの最上部に商品画像を表示する

商品詳細ページを開いた際にすぐに目的の商品画像を見えるようにすることが重要です。ユーザーが商品を探しているにも関わらず何度も別の情報を閲覧させられることはストレスです。開催中のセール情報やキャンペーン情報を固定でページ上部に配置しどのページからも流入させたい運営側の気持ちは分かりますがユーザー心理を最優先で考えると商品詳細ページまでたどり着いたユーザーはその商品に興味がある証なので商品画像は優先的に表示することが必要です。ファーストビューに入っていない場合は即改善してください。

西友ネットスーパーでは商品画像と値段を最上段に表示しています。ネットスーパーという特性から商品詳細ページまで進まないでも実際のスーパーでカートに商品を入れる感覚で次々にカゴに入れることができるかもしれませんが詳細ページまで進んだユーザーを考慮してファーストビューに商品画像を大きく表示しています。

201501img03

スーツ通販のスーツカンパニーオンラインショップではどのページでも共通しているサイトロゴ画像が上部に大きく表示されている点、こんにちはゲスト様の表示、ナビゲーションの表示がタップのしやすさを考慮した結果か大きくなりすぎており、ファーストビューで商品画像は一部しか表示されておらず機会損失に繋がってしまうかもしれませんね。医薬品通販ココカラファインネットは西友と同じく分かりやすくファーストビューに出ています。

どのページからもユーザーが進みたいページへアクセスできるようにして設計したのかもしれませんがメガネ通販のメガネスーパーではロゴ、ナビゲーション、登録ボタン、キャンペーン情報が上位に表示されており、商品画像がファーストビューでは全く見えておらずユーザーのテンションを大きく下げてしまうでしょう。

このサイトの場合、サイトTOPでも商品一覧でも詳細でもすべて同じキャンペーン情報、ナビゲーションが固定化されておりユーザーにとって不便だと感じますので改善が必要でしょう。商品詳細ページ上部にキャンペーンページへの導線を設けることが間違っている訳ではありません。

例えばファッションECマガシークのように商品画像の上にキャンペーンバナーを張り付けてもファーストビューに商品画像が見えれば不親切にはなりませんのでバナーサイズや表示しているメニュー内容を調整しましょう。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*