[AD]

決済を完了させるためにお客様は多数のフィールドに入力しなくてはならず、これは非常に長いプロセスのように感じられることがあります(参考:カゴ落ちが発生する10の理由)。しかし、「プログレスインジケーター」を表示することで、その問題を緩和できます。

「プログレスインジケーター」で進ちょく状況を確認することで、決済フローをどれだけ進めたか、どれだけのプロセスが残っているのかを正確に判断できます

「プログレスインジケーター」には、主に2つの目的があります。1つ目はお客様が決済フローのどこにいるのかを伝えることであり、2つ目は入力した情報を修正する必要がある場合に前のセクションに戻れるようにすることです。

特に、多数の入力フィールドを有するモバイル端末では入力も遅くなるため、この点が非常に重要になります。こうした指標を表示しなければ「決済フローが実際以上に長い」という印象を与えてしまい、カゴ落ちにつながります。

NG例:決済フローにプログレスインジケーターが表示されていない
決済フローには必ず「プログレスインジケーター」を表示する必要があります

方法① パンくずリスト方式で表示させる

サイトで「プログレスインジケーター」を表示させるには、いくつかの方法があります。モバイルでは画面トップに「パンくずリスト」として決済プロセスを表示させることができます。この場合、お客様はこれまでに経た決済プロセスのステップ、現在のステップ、そして残りのステップを把握できます。

画面上部に「請求先 > 配送先 > 決済 > 確認」と表示させた例

上の画像ではカートアイコンの隣の「請求先 > 配送先 > 決済 > 確認」という形で表示しおり、残りが2ステップだとわかる

方法② タイトルとステップ数を表示させる

モバイル画面ではスペースに限りがあるため、決済プロセスのすべてのステップを表示するのは難しいかもしれません。この場合の解決策として、「3/5 請求先」という具合に、タイトルと共にお客様のステップ数を表示することができます。お客様がクリックすると開いたり閉じたりするようにしても良いでしょう。

2.配送 3.オファーコード 4.決済 5.注文の確認と、ステップを表示させた例
ステップ数とタイトルを表示させる設計を実装することで、お客様が進捗状況を把握できます
◇◇◇

次回は配送先と請求先について解説します。お楽しみに。

【モバイルファーストに最適な決済フローとは?】ここまでのおさらい

よろしければこちらもご覧ください
[AD]

モバイルでの決済フローを最適化する改善アイデアをもっと知りたい方は、「Amazon Pay」が用意した以下のページから資料『モバイルファーストに最適な決済フローとは』をダウンロードしてください(バナーをクリックすると専用サイトにジャンプします)。

 『モバイルファーストに最適な決済フローとは』について、もっと知りたい人はこちらをクリック

Amazon Payからのお知らせ

Amazonでは現在、ID決済サービス「Amazon Pay」をデモサイト「Amazon Payデモショッピングサイト」で体験すると、500円分のAmazonギフト券をプレゼントする企画を実施しています。

Amazonが用意した「Amazon Payデモショッピングサイト」で、あなたが普段利用しているAmazonのアカウントを使って、「Amazon Pay」で便利なお買い物を体験(デモサイトのため注文はされません)。その後、表示される専用フォームに必要事項を入力すれば、登録したメールアドレス宛に500円分のAmazonギフト券のご案内が届きます。

デモショッピングサイトでAmazonPayを体験して500円分のAmazonギフト券をゲットする!
※キャンペーン期間は4月15日(水)23:59まで。リンク先の記事にある「お申し込み手順」と「注意事項」をお読みの上、この機会にぜひ「Amazon Pay」を体験してください
この記事が役に立ったらシェア!
記事種別: 

Amazon Pay

Amazon Payとは、Amazonが提供するID決済サービスです。

Amazon Payを自社ECサイトに導入すれば、お客様はおなじみのAmazonアカウントを利用して、簡単・安心にお買い物ができます。このため、新規顧客獲得やカゴ落ち率削減が期待できます。

また、それに加えて、実店舗でのQRコード決済やAlexaスキルでの音声ショッピングにも対応し、単なる決済ソリューション以上の価値を提供します。

Amazon Payの詳細はこちら

ネットショップ担当者フォーラムを応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

[ゴールドスポンサー]
楽天株式会社 eBay(イーベイ) ecbeing. Qoo10 Nint
[スポンサー]
株式会社アイル auWowma! クリームチームマーケティング合同会社 ユーザグラム