スマホECのカート仕様

Pocket

ニッセンオンラインで商品閲覧履歴が複数デバイス間で共有されるようになりました。スマホで探した商品を大きい写真でパソコンで見る場合などに有効的な機能です。デバイスを超えた使い方はすでに多くの消費者が自然と行っている行動です。ストレスフリーなEC体験のためにはどのデバイスで接しても同じ体験ができることが重要ですが、そう考えると今まで以上にインタフェース(UI)が大切になってくるだろうと思います。

1:スマホECカート仕様の5つの事例
2:カート仕様で必要な視点

1:スマホECカート仕様の5つの事例

1-1 Fujisan.com

雑誌オンラインEC『Fujisan.com』のカート画面ではすぐに購入手続きに進みたいユーザー向けの導線としてカート画面のヘッダに「ご購入手続きへ」のページ内リンクを設置しています。

図1_20150403

これはカートに入れた商品を詳しく見て確認するより一刻でも早く購入したいユーザー向けの導線です。その一方でカートに入れた後も買い物を続けたいユーザー向けにもヘッダにリンク「他にも商品を買う」を設置しており、カートに訪れたユーザーの次のアクションを取りやすい配置です。削除ボタンをタップすると商品は即時に削除され、合計金額が自動的に再計算されます。これはガラケー時代には出来なかった仕様でスマホらしいUI設計です。ガラケー時代は「再計算する」のボタンをユーザーがクリックしないといけませんでした。

雑誌の場合は商品点数を変更する必要はありませんが「デジタル版or紙版」や「購読プラン(1年、6か月等)」等、ユーザーが商品詳細ページで自分の意思で選択した内容はすべてカート画面で表示されており、安心感にも繋がりやすいと思います。同じ商品をカートに入れると「同じ商品が入っています」と注意が出るのも考えられています。

1-2 オッシュマンズオンライン

アウトドア用品EC『オッシュマンズオンライン』ではパソコンサイトを変換しているためかスマホらしい表現は追求しておりません。

図2_20150403

カートで数量変更をする場合にプルダウンではなくテキストボックスに数を入力しないといけないのは不便さを感じます。また商品情報のレイアウトは横列の表形式で記載したかったのだと思いますが、その影響により窮屈に感じ、文字サイズや商品画像が小さくなっているのはもったいないと思います。よく見れば不都合はないのですが、やはりスマホでは感覚的に進めることが重要で意識して画面を凝視するのは面倒に感じてしまう恐れがあるでしょう。

数量変更をしても合計金額が自動計算されず「再計算」ボタンをタップしないと計算されないのもスマホユーザーにタップ数を増やしてしまいます。

1-3 高島屋オンライン

百貨店EC『高島屋オンライン』のカート画面もオッシュマンズECと同様に再計算仕様や数量変更時のテキスト表示がスマホらしいUI設計ではないように感じます。商品画像のサイズや文字サイズ等は不便なく見ることが出来ますが、タップしないと合計金額が変わらないのは改善できると思います。

また配送仕様の影響だと想像しますがカート画面では送料は確認できず、あくまでも商品の合計金額のみを表示しています。比較的顧客単価が高いことが想像される高島屋オンラインであってもユーザーは「合計いくら支払うのか」が購入判断のひとつになると思いますのでカート画面では商品の合計金額とは別に送料の記載をしたほうが購入フローに繋がるでしょう。

1-4 エリエールオンラインショップ

ティッシュやおむつ等の生活用品EC『エリエールオンラインショップ』でも数量変更のテキスト表示、「変更」ボタンをタップしないと自動計算されません。一見するときれいにスマホ対応をしているように見えますがよりスマホユーザーが感覚的に操作することを追求できる余地があると思います。例えば数量変更をプルダウンにし、数量を確定した時点で自動計算され、合計金額が変更になる仕様は実装したほうが便利になるでしょう。

またエリエールの場合、5,000円以上で送料無料になりますが、元々送料を表示する欄がカート画面にはないので、5,000円以下だった場合に送料を含んでいくら支払う必要があるのかユーザーはカート画面で分からないのは心配を与えてしまうかもしれません。生活用品ECであればカート画面から「定期購入」への変更ができたほうが便利になるかもしれません。

1-5 e-casio

時計等メーカーのカシオEC『e-casio』では表示レイアウトは見やすいですが他のいくつかのサイトと同様に自動計算や数量変更の仕様のスマホ対応が不十分である印象を受けます。また「戻る」についてもカートに入れた商品の詳細ページに遷移する導線のみです。その商品はすでにカートに入れた商品なので、ユーザーにとってはもう用はありません。カート画面から買い物を続けるための導線はユーザー自身が商品カテゴリーを選択できる仕様がよいでしょう。

2:カート仕様で必要な視点

カート画面は目的(商品購入)を達するための通過点です。カートに訪れたユーザーは商品を購入するために購入フローへ進むか、他の商品を選ぶために買い物を続けるのか、どちらかの行動を取ります。その場合、以下の視点でスマホECのカート画面仕様をチェックしてください。

・合計金額は「商品合計額」+「送料」=「総合計額」をファーストビューに記載
・カートのファーストビューから購入フローへ進むことができるようにボタンを配置
・買い物を続ける行動が取りやすい(サイト内を回遊しやすいように設計)
・個数変更や削除後に合計金額は自動計算

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*