詳細ページの商品選択ユーザビリティ

Pocket

今回はスマホECの詳細ページの中でも特にカラーや数量などを選択する際のユーザビリティに注目します。せっかく商品ページまで進んで頂いたお客さんのテンションが途切れないような自然な導線にする必要があります。ぜひサイト改善のヒントにしてください。

詳細ページの商品選択ユーザビリティ5つの事例

商品詳細ページでカラー・種類・サイズ等を選択する場合によく使われるのはプルダウン式です。在庫は「○在庫あり」「△残りわずか」等と各選択肢ごとに表示するのが一般的な仕様だと思いますが商品特性やユーザーの使い方によって各社サイトで大きく違います。

事例1:TVショッピング「QVC」
事例2:建設資材「モノタロウ」
事例3:ファッション「ユニクロ」
事例4:文房具「ITOYA」
事例5:健康食品「あんしん通販薬局」

事例1:TVショッピング「QVC

選択肢の数だけボタンを配置しています。

図1_20150731

選択肢がプルダウンで隠されていないためユーザーはタップ操作せず瞬間的に自分は何を選択することができるのかを理解することが出来ます。在庫はボタンの色で表す点も秀逸で緑のボタンは「在庫あり」、赤は「完売」、黄は「残りわずか」とイメージしやすい信号方式でカラーです。どの商品詳細ページにおいても何色が何を表すかテキストで丁寧に説明してあり、元々信号カラーで分かりやすいのに加え、テキスト説明あるために迷うことはないでしょう。

サイズとカラーを1つずつタップさせるサイトもあります。ファッション商材の場合は一般的に1つの商品は1点の購入なのでファッション関連商品の多いQVCでは数量選択は詳細画面では行っておりません。QVCではあくまでも詳細ページにたどりついたユーザーがいかにスムーズに商品をカートに入れてくれるのかを研究した結果の新しいユーザビリティだと考えます。

事例2:建設資材「モノタロウ」

商品パターンをすべて縦に並べています。

図2_20150731

例えば「六角ナット」は外枠や内枠の寸法やネジの仕様など細かな違いがあります。スマホから資材を購入する場合は急な必要性(使いたいネジがなかったのに気付いた、思ってみなかった急なトラブル等)があると想像します。条件を1つずつユーザーに選択させると選択肢が多くなってしまい入力が面倒です。

それを考慮してモノタロウでは選択肢のすべてを詳細ページにベタ書きで表示し仕様選択をタッチさせることなく、数量だけを入力するようにしています。仕様ごとに1ページ内で見比べられるほうが現場の職人さん達の使い方に合致していると思います。

事例3:ファッション「ユニクロ」

ユニクロではQVCとは異なり1つのボタンで選択させずにカラー選択をしてから、サイズを別のボタンで選択する仕様です。

図3_20150731

ユニクロ商材はファッションですが家族用や自分用に同じ下着等を複数購入することも少なくないと思われるので数量選択は詳細ページで行います。QVCでは在庫はボタンの色を分けることにより識別していましたがユニクロの場合は、在庫がなければそもそもサイズを選択することが出来ません。

ECサイトで「残りわずか」を表示する目的は人気商品であることを伝えることにより買おうとする気持ちを強くさせることですが、ユニクロが「○」「×」「△」等で在庫状況を表示していないのは「この商品が今買うことができるのか、それとも買うことができないのか」のみを伝えることが重要だと考えたためだと想像します。

買えるのか、そうではないのか。シンプルな選択肢表示はブランド世界観にも繋がっているようにも感じます。

事例4:文房具「ITOYA

文房具ECのITOYAでは同じ商品の別の種類を選択する場合は別画面に遷移する必要があり、タップ数が1つ増えることになります。

図4_20150731

例えば製図用鉛筆を探そうと思って詳細ページにたどり着いてもデフォルトで硬度を示す「8B」が選択されており、他の硬度を選択するには「他の種類を選択する」ボタンをタップし、種類の一覧画面から選択します。一覧画面では在庫状況が分からないため、詳細まで進んで初めて商品があるのかないのかを知ることになります。

他のサイトで見たように詳細ページで種類ごとの在庫状況が分かったほうが親切な情報設計だと思います。

事例5:健康食品「あんしん通販薬局」

ファッションや建設資材・文房具とは違い、薬局の商品のように詳細ページで数量以外は選択する必要がない商材の場合は「あんしん通販薬局」のようにプルダウン式で数量入力ができればユーザビリティの視点で問題ありません。

図5_20150731

このサイトでは詳細ページ下部にまとめ買いを促進するコーナーを設けて「単体」販売などを行っています。詳細ページまで来たというのは買う意思があるかはさておき商品に興味があるはずなのでこの場所にこのコーナーがあるのは自然な導線です。このサイトの工夫は一覧画面に数量選択を設置していることで、詳細ページの説明文を読まないでも習慣的に購入できるユーザーは一覧画面からカートに入れることが出来るので1ページ分進まないでもよいという点でユーザビリティ向上に役立っています。

見てきたように商材やユーザーの使い方によって商品選択のサイト仕様は大きく異なります。あなたのスマホECがユーザーの使い方に合致するかもう一度見直してみましょう。

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*