モバイルショッピングカートの設計に関する推奨事項と禁止事項：6つの実用的な分解（mコマースの詳細ガイド）

公開: 2018-08-08

あなたはすでにあなたのカートページがあなたのeコマースマシンの重要な歯車であることを知っています。しかし、あなたのモバイルカートページ（訪問者がチェックアウトする前に見るページ）は彼らの体重を引いていますか？

Growcodeでは、特にモバイルに関しては、カートページがクライアントのストアで最も無視されている部分の1つであることに繰り返し気づいています。そして、その結果は重大であり、彼らの収益を深刻に低下させます。

モバイルコマースの売上高は、2021年までにすべてのeコマース売上高の52.9％を占めると予想されています。しかし、2017年のモバイルショッピングカートの平均放棄率は、なんと85.65％でした。

つまり、1つまたは複数の商品をカートに追加したすべての顧客のうち、10人中9人近くが購入を完了せずに残っています。

＃モバイルコマースの売上高は、2021年までにすべてのeコマース売上高の52.9％を占めると予想されています。＃ecommerceStatsクリックしてツイート
Shopping cart abandonment by the device カート放棄のモバイルリード。上のグラフのように、集計データは業界間の大きな違いを考慮していないことに注意してください。ソース。
この投稿では、カートのレビューページの6つの例を見ていきます。最初の3つは、複製を検討する必要のある堅実な設計手法を利用していますが、残りの例には、避けるのが最善の要素が含まれています。

また、特定のショッピングカートのデザインの間違いに焦点を当てていますが、それが全体的に完全にひどいという意味ではないことにも言及する価値があります。モバイルショッピングカートのベストプラクティスに飛び込みましょう。

Growcodeは、この電子書籍も推奨しています。
7桁以上のオンラインストアのeコマース最適化チェックリスト

無料の電子ブックを入手する

1.実行：Amazon

アマゾンのモバイルウェブサイト用ショッピングカートは、優れたモバイルショッピングカートデザインの見事な例です。混雑していませんが、最小限でもありません。メインのCTAから注意を引くことなく、必要なすべての要素が含まれています。ギフトラッピングから関連商品まで、注文額を増やすために選択できる目立たない「アドオン」も多数あります。
アマゾンのモバイルショッピングカートUX。必要なすべての要素が含まれています。

ヒント1：ページ上部にある1つの明確なCTAは、対照的な色に設定されています。 ユーザーが下にスクロールすると、このCTAは画面の上部に表示され続けます。

#Mobile #cart最適化のヒント：ページの上部に1つの明確な#CTAを対照的な色で設定します。＃ecommerce＃optimizationクリックしてツイート
ユーザーが下にスクロールすると、CTAが画面の上部に表示されます。
ヒント2： CTAは画面全体に表示されるため、左利きと右利きの両方のユーザーが簡単にタップできます。
ヒント3：疑問を和らげ、「取引を甘くする」ために、ページの上部で送料無料を繰り返します。
ヒント4：商品の画像と名前は、商品の詳細を再確認したい人のための説明ページにリンクしています。
ヒント5：注文金額を変更したり、アイテムを削除したり、後で使用できるように保存したりするための、明確でタップしやすいボタンがあります。
ヒント6：「在庫あり」の通知により、顧客は製品を待つ必要がなくなります。
#Mobile #cart最適化のヒント：「在庫あり」通知は、＃顧客が製品を待つ必要がないことを保証します。 #ecommerceクリックしてツイート
ヒント7： Amazonは、「後で使用するために保存」された製品を紹介し、その下に簡単な「カートに移動」ボタンを表示します。
後で使用するために保存されたアイテムがはっきりと表示されます。
ヒント8：ページを離れることなくカートに追加できる関連商品（「顧客も購入した」）を含める。 3番目の項目は完全には表示されていないため、スワイプ動作を示唆しているため、この要素の設計に追加のプラスがあります。
ヒント9：空白が多く、不要な「フィラー」の詳細がない。 アマゾンは絶対に必要なものだけを含めました。
ヒント10：フッターの「ページのトップ」にリンクします。

2.実施：ステープル

ステープルズカートの美しさは、そのシンプルさです。製品は数秒でレビューできます。その結果、含まれているオプションがより強調されます。
ステープルズカートの美しさは、そのシンプルさです。最高のモバイルeコマースカートの1つ。
ヒント1： Amazonと同様に、ページの上部と支払いの概要の両方で、製品が無料で出荷されるという事実に注意が向けられます。 さらに、テキストは緑色で表示されるため、通知がさらに目立ちます。「配達予定日」の正確な日付も表示されます。
ヒント2：デザインは非常にシンプルで、空白をうまく利用しています。 顧客は、注文をすばやく確認し、ページを離れることなく必要な変更を加え、合計を確認できます。
ヒント3：「クーポンと特典」ボックスは邪魔になりません。 メインのCTAから注意をそらすことなく、「店舗で受け取る」という重要なオプションも提供されます。
ヒント4：「安全」という言葉はチェックアウトCTAに含まれています。
ヒント5：フッターが削除されました。

#Mobile #cart最適化のヒント：モバイル＃ecommerce＃shoppingカートからフッターを削除します。クリックしてツイート

何か問題がありますか？ ステープルズは大いに正しくなりますが、このカートのデザインに関する1つの問題は、拡張可能なメニューや検索フォームが含まれていないヘッダーの単純さです。会社が1つの製品のみを販売している場合、これは実行可能なソリューションである可能性があります。ただし、複数の製品を使用するサイトの場合は、必要に応じて再度閲覧するオプションを顧客に提供することは常に価値があります。

3.実施：シアーズ

シアーズは、支払いプラン、店内受け取り、ギフトオプション、プロモーションなど、多くの追加オプションを提供しています。彼らのカートは、モバイルショッピングカートの放棄を防ぐデザインを損なうことなく、1ページに多くの異なる要素を組み合わせたい小売業者にとって良い例です。
シアーズのモバイルカートのデザインには多くの要素が含まれていますが、それでもシンプルに保たれています。
ヒント1： CTAは、小計と一緒にページの上部に含まれています。 ロックアイコンはさらに信頼を築き、Paypalを使用してチェックアウトするオプションも提供されます。
ヒント2：高額商品として、この段階での躊躇を払拭するための支払いプランが含まれています。
ヒント3：セールの節約は注文の概要セクションに赤で表示され、緊急性を高めて疑いを減らすことで、クリックしてチェックアウトするよう顧客に促します。
ヒント4：新規顧客へのさらなるインセンティブとして機能するロイヤルティスキームにログインするためのリンクが提供されています。 これは、特典なしでストアアカウントを設定するためのリンクではないことに注意してください。これは、チェックアウトフォームに組み込む方が適切です。
ヒント5：「安全なチェックアウト」シールがページの下部に含まれています。
何か問題がありますか？少し多すぎて、一部のお客様にはその効果が散らばっている可能性があります。たとえば、雑誌の購読や下部のロイヤルティプログラムへのリンクを提供する必要はありません。

4.禁止事項：Vitacost

Vitacostは上記の要素の多くを利用していますが、それらの実装にはしばしば欠陥があります。その結果、デザインが不十分なカートページが作成され、わずかな調整を加えるだけでショッピングカートのコンバージョンが増加する可能性があります。
Vitacostは上記の多くの要素を利用しますが、それらの実装にはしばしば欠陥があります。
間違い＃1：カートページから人々を遠ざける邪魔な検索バーが含まれています。 ブラウジングを継続したい人のために、検索バーアイコン（Amazonの例のように）を含めることをお勧めします。ただし、大きくしすぎないでください。

#Mobile #cart最適化のヒント：人々をカートから遠ざけるような邪魔な検索バーを含めないでください。 #ecommerceクリックしてツイート
間違い＃2：顧客を混乱させたり迷惑をかけたりする可能性のある不明確な「BOGO」製品を自動的に含める（1つ購入すると半額になります）。
間違い＃3：邪魔なプロモーションコードバー。 これにより、メインのCTAから注意がそらされ、顧客はカートを離れてオンラインでプロモーションを検索するようになります。プロモーションボックスは表示されている必要がありますが、過度に表示されてはなりません。彼らは確かにCTAの後にあるべきです。
間違い＃4：送料は「未定」に設定されているため、疑問が生じます（一般的に言えば、略語は避けてください）。
間違い＃5：フッターが大きすぎます。 Vitacostは、顧客にアプリの購入またはダウンロードを完了してもらいたいですか？
間違い＃6：アイテムを削除または増やすための製品オプションは小さすぎてタップするのが難しい。
間違い＃7：スクリーンショットのすぐ下に表示されているフローティングバーは、小型の携帯電話では画面スペースを取りすぎます。

5.禁止事項：ロンリープラネット

ステープルズページが最小限のデザインを効果的に利用している場合、ロンリープラネットはあまりにも多くの要素を除外します。躊躇を減らして信頼を築くための機能はなく、購入の価値を高めるための推奨事項や製品の提案もありません。また、ボタンの多くはクリックするのが困難です。
Poorly designed mobile shopping cart. Lonely Planet excludes too many elements. ロンリープラネットはあまりにも多くの要素を除外しています。カートのUXを改善するために使用できる多くのスペースが残されています。
間違い＃1：スペースが十分に使用されていません。 現在のコンテンツの上にポップアウトするよりも、カートにページ全体を表示させ、空白を利用する方がよいでしょう。
間違い＃2：配達、割引、支払いオプションに関する情報は含まれていません。 これらは、不確実な顧客の疑念や恐れを軽減する可能性があります。
間違い＃3：関連する製品の提案はありません。
間違い＃4：製品の数を増減するためのボタンは非常に小さいため、実質的にクリックできません。
間違い＃5： CTA –「チェックアウトに進む」–はボタンのようには見えません。
間違い＃6：ポップアウト形式では、左からCTAをタップするのが難しくなります。 顧客に両方の親指を使わせましょう！

6.禁止事項：ナイキ

Nikeのページの主な問題は、さまざまな要素がランダムに含まれている方法であり、一緒に配置したり、ページの異なるポイントに配置した場合にどのように機能するかについてはほとんど考えられていません。 CTAについても混乱があります。
ナイキのページには、さまざまな要素がランダムに含まれています。
間違い＃1：送料割引は会員のみが利用できます。 これは不必要な摩擦を追加し、参加したくない顧客の意欲をそぐものとして機能する可能性があります。新規顧客にサインアップするオプションとともに、チェックアウト段階でログインするオプションを顧客に提供します。カートページは、注文の確認専用にする必要があります。

間違い＃2： 2つのCTAの使用。 特定の行動方針を求めているため、カートページに1つのCTAを設定することをお勧めします。複数のCTAを提供する唯一の理由は、顧客に異なるチェックアウトオプション間のオプションを提供することです。ユーザーが自分の電子メールアドレスを提供した後、適切なフォーム（ログインフォームまたはアドレスフォームのいずれか）を表示することをお勧めします。

間違い＃3：「承認された支払いタイプ」がチェックアウトCTAの近くにリストされていません。 特にナイキほど有名ではないが、フッターがそれらの場所ではない場合は、カートページにこれらのバッジを含めることをお勧めします。

間違い＃4：「ゲスト」という用語は、顧客がそのように自己識別しない場合、混乱を招く可能性があります（ゲストとして買い物をする場合、メンバーになることはできますか？）

モバイルショッピングカートのデザインのまとめ

ほとんどのパフォーマンスの高いカートページは、すっきりとしたシンプルなデザインでありながら、適切な種類と量の情報を提供します。独自の商品を再設計する場合、カートページの目的は、買い物客が注文を確認して確認し、不要なアイテムを削除し、同様の商品を追加することであることに注意してください。アカウントへのログインやサインアップなど、その他の必要なアクションは、チェックアウトページに残すことができます。したがって、これらのモバイルショッピングカートのベストプラクティスやその他のショッピングカートの最適化手法について覚えておいてください。

また、分割テストが重要であることを忘れないでください。ここで説明する戦術を使用して、独自のテストを作成し、長期的に要素を微調整することを約束します。そうすれば、ほぼ確実にコンバージョンが着実に増加します。

115ポイントのeコマース最適化チェックリストを入手する

8年の経験を生かして、私たちはすべてのトップインサイトを1冊の本に集めました：7+フィギュアオンラインストアのeコマース最適化チェックリスト。ホームページからチェックアウトまで、すべてのページのパフォーマンスを向上させたい場合は、ここからコピーを入手してください。