変換するeコマースチェックアウトフローを設計する方法
公開: 2021-07-22あなたのeコマースチェックアウトフローはお金がどこにあるかです。 考えてみてください。 ランダムな訪問者は、チェックアウトファネルに入る前にサイトを離れます。 やる気のあるバイヤーが注文を完了するためにここに来ます。
チェックアウトUXの小さなデザインの改善は、通常、サイトの収益に直接影響します。
私が最近分析したeコマースサイトには、トラフィックの84.7％が購入を進めた支払いページがありました。 これを90％に増やすことができれば、注文が461件増え、月額$ 87,175が追加され、収益が23.9％増加すると計算しました。 「小さな」利益は非常に大きくなる可能性があります。
したがって、問題は、「どうすれば、より多くの人にチェックアウトフローを実行して、購入を完了することができるのでしょうか。 具体的な戦術はサイトによって異なりますが、答えを出すための原則は普遍的です。
eコマースのチェックアウトについて考えるためのフレームワーク：Fogg Behavior Model
肝心なのはこれです：行動=動機x能力xトリガー。
モデルは次のとおりです。
グラフの右上を目指したいと考えています。モチベーションが高く、実行が簡単で、トリガーが設定されています。 あなたが高いモチベーションと低い能力（するのが難しい）を持っているならば、あなたが得るものは欲求不満です。 モチベーションが低いけれど簡単にできる場合（ゴミを出すなど）、イライラします。
AmazonがFoggBehaviorModelをどのように使用するか
アマゾンがあなたに製品プロモーションを含むEメールを送るとき、それは動機と引き金です。 人々はリンクをクリックして製品ページにアクセスします。 彼らはコピーとレビューを読み、写真を見て、すべてがモチベーションを高めます。 「カートに追加」は、チェックアウトプロセスを開始するためのトリガーです。
能力はどうですか？ チェックアウトプロセスを完了するのはどれくらい簡単ですか？ これは、Amazonがお尻を蹴るところです。 パスワードを入力して数回クリックするだけです。 チェックアウトフローは摩擦がありません。
Amazonのモバイルコマースアプリケーションの実際のワークフローは次のとおりです。
完了しました。 チェックアウトフロー全体を段階的に見ていき、何が良いものになるかを見てみましょう。
注：eコマースに関するその他のヒントは、包括的なeコマースガイドラインレポート（eコマース専用の247のガイドライン）から入手できます。
「カートに追加」機能とショッピングカートページを設計する方法
それはすべて、人々がカートに何かを追加することから始まります。 訪問者が最初のアイテムをカートに追加した瞬間、彼らはブラウジングではなく、買い物をしています。
「カートに追加」はどのように見えるべきですか？
人々があなたの製品ページのカートに何かを追加したとき、何が起こるべきですか？
I tは、彼らがカートに何かを追加したことを愚かに明らかです。 明確な確認。 適切な確認を表示しないか、気づきにくい小さなアニメーションや小さな確認テキストを表示することによって、これを台無しにするサイトがいくつあるかはばかげています。
Bonobosのカート追加を見逃すことはできません。 「カートに追加」をクリックすると、カートが小さなアニメーションで表示されます。これは、人間の目が動きに反応するので便利です。 これは、訪問者から購入者への移行を示す微妙な視覚的手がかりです。
カートの内容と「チェックアウト」ボタンも、ユーザーが別の場所をクリックするまで表示されたままになります。 それは良い。 「チェックアウト」ボタンの色を青以外に変更しますが、目立ちません。 視覚的な階層の主なものは「カートに追加」ボタンですが、製品はすでにカートに入っています。
ASOSは小さなアニメーションも表示します。 カートの中身を開き、数秒後に折りたたむ。 「バッグに追加」ボタンも「追加」に変わります。これは、購入者にとって良い確認です。
ユーザーがどこかをクリックして選択するまで、カートの内容を開いたままにしておきます。 このように、「チェックアウト」ボタンは彼らの顔を見つめ続けます。
私たちは常に彼らにもっと多くのものを購入してもらいたいのですが、1つのアイテムでも購入するプロセスを改善することは大きな改善につながる可能性があります。 チェックアウトに向けてそれらを微調整することは常に良い考えです。
製品がカートに入ったら、どうしますか？
2つの主なアプローチがあります。
- 「カート追加」の確認を表示し、ユーザーを同じページに留めます。 長所：人々は別のページに移動するように求めなかったので、驚きはありません。 また、チェックアウトする前にカートにアイテムを追加することを検討する場合もあります。 短所：彼らはすでにカートで見つめている製品を持っています。 彼らが購入したいと思うかもしれない何か他のものを見るならば、それはあなたにとってより役に立つでしょう。
- ユーザーをカートページに移動します。 長所：あなたは彼らに支払いをすることに一歩近づいています。 これは、アップセルのオファーを行う絶好の機会でもあります。 短所： 「カートあたりのアイテム数」を最大化することに失敗する可能性があります。
Amazonはカートページに移動し、カートに商品を追加したことを確認し、アップセルを表示します。 Amazonが得意とするのはカートの内容を縮小することなので、アップセルが際立っています。
潜在的な戦略の適切なバランスは、業界と目標によって異なります。これをテストする必要があります。
覚えておくべき指標：
- 平均取引額;
- トランザクションあたりの平均数量。
トランザクションの数だけでなく、各トランザクションに費やされる金額も増やしたいと考えています。
カートの内容をうまく表示する
カートの内容を効果的に表示するための重要な原則は、明確さと管理です。
- 明快さ。 カートの内容と、送料や税金を含む最終的な費用を理解するのは簡単で明白です。 サプライズコストが発生すると、人々はカートを放棄します。
- 管理：数量の更新や製品の削除など、簡単に変更できます。
ASOSは、カートページをよく理解しています。
彼らが正しいこと：
- 製品写真;
- 製品名と価格;
- 削除、後で使用するために保存、またはサイズなどの詳細を変更する機能。
- 彼らが受け入れる支払いの種類を示してください。
- 合計金額を表示し、無料配達を確認します。
- 「チェックアウト」への明確な召喚状。
- 「イージーリターン」を強調することで不確実性を減らします。
インドチーノは、カートの内容を提示するための心地よい、ミニマリストのアプローチを持っています。 とはいえ、このページには、目立つクーポンボックスや数量を変更できないなど、まだいくつかの問題があります。
視覚的な階層を正しくする
視覚的な階層で最も重要なことは、チェックアウトを続行することです。 （さまざまなCTAをテストします。） カートの上と下の2つの行動を呼びかける必要があります。
このようなもの—2つのチェックアウトボタンがはっきりと目立ちます。
Modclothは、最後にレビューして以来、このページを改善しました。 以前は、入力が必要な数量を更新していました。 これで、ステッパーを使用して数量を増減できます。
ModclothはPayPalオプションも提供していることに注意してください。 ほとんどの人はクレジットカードで支払うことを好みますが、1〜2の代替支払い方法（PayPal、Amazonなど）を提供することは良い考えであり、コンバージョンに役立つことが示されています。 ただし、選択肢が多すぎると害があります。
Modclothはまた、75ドル以上の注文で無料の返品と送料無料があることを思い出させます。
クーポンを目立たせないでください
「ここにクーポンコードを入力してください」フィールドを見ると、それほど特別な気分にはなりません。 「どうして持っていないの？」 多くの人がクーポンを探すためにGoogleに行きます。 多くは二度と戻らない。 クーポンを探すためにサイトを離れることは、ショッピングカートを放棄する一般的な理由です。
したがって、これは良い考えではありません。
代わりに、「クーポンを取得しましたか？」というテキストリンクを用意してください。 または同様のもの。 誰かがリンクをクリックすると、上記のような入力フィールドが表示されます。 テキストリンクはあまり目立たないので、注意を払う人は少なくなります。
すでにクーポンコードをお持ちのお客様は、クーポンコードを入力する方法を探しています。 あなたがそれを本当にうまく隠さない限り、彼らはそれを見つけて彼らのクーポンコードを適用することができます。
買い物客に良いものについて思い出させる：配送、返品、セキュリティ
彼らはいつ商品を手に入れますか？ 送料はいくらですか。 無料なの？ 取引は安全ですか？ 人々に思い出させます。
これは、チェックアウトボタンの下にあるこれらの3つの重要なメッセージを示す例で、「今すぐ安全に支払う」とも書かれています。
永続的なカートFTW
人々がカートに何かを追加するとき、カートの内容を期限切れにしないでください。 カート放棄メールとリターゲティング広告を使用して、来週または来月にユーザーを呼び戻し、中断したところから続行できるようにします。
サインアッププロセス：アカウントを作成するかどうか？
多くのeコマースサイトでは、購入者が購入する前にサインアップすることを望んでいます。 登録を強制するものもあります（つまり、登録せずに購入することはできません）。 簡単に言えば、それをしないでください。 それは回心を傷つけます。 たくさん。
4人に1人は、強制登録のためにオンライン購入を断念します。 強制登録は「貪欲なマーケター症候群」の一部です。 eコマースマーケターがそれを望んでいる理由は簡単に理解できます。ユーザーが「ロックイン」され、アカウントを持っているためにもっと買い物をすることを望んでいます。
それは本当ですか？ ああ、お願いします。 登録済みのアカウントを持っているウェブサイトはいくつありますか？ あなたは今、その理由で彼らに忠実だと感じていますか？ 私はあなたがそれらのほとんどに2回以上ログインしていないに違いない。
ユーザビリティの第一人者であるJaredSpoolが語った、強制登録に関する良い話は次のとおりです。
2つのフィールド、2つのボタン、1つのリンクなど、より単純なフォームを想像するのは困難です。 それでも、このフォームは、顧客が主要なeコマースサイトから年間3億ドルの商品を購入することを妨げていたことが判明しました。 さらに悪いことに、サイトの設計者は問題さえあったという手がかりを持っていませんでした。
形はシンプルでした。 フィールドはメールアドレスとパスワードでした。 ボタンはログインと登録でした。 リンクはパスワードを忘れました。 サイトのログインフォームでした。 これは、ユーザーが常に遭遇するフォームです。 どうして彼らはそれに問題を抱えているのでしょうか？
問題は、フォームが存在する場所ほどフォームのレイアウトではありませんでした。 ユーザーは、購入したい商品をショッピングカートに入れて、[チェックアウト]ボタンを押すと、この問題に遭遇します。 彼らが実際に製品の代金を支払うための情報を入力できるようになる前に、それは来ました。
チームは、このフォームをリピーターがより早く購入できるようにするものと見なしました。 初めての購入者は、登録の余分な労力を気にしないでしょう。なぜなら、結局のところ、彼らはより多くのために戻ってきて、その後の購入の便宜を高く評価するからです。 誰もが勝ちますよね？
サイトから商品を購入する必要のある人を対象に、ユーザビリティテストを実施しました。 私たちは彼らに買い物リストを持参するように頼み、購入するためのお金を彼らに与えました。 彼らがする必要があるのは購入を完了することだけでした。
私たちは初めての買い物客について間違っていました。 彼らは登録を気にしました。 彼らはそのページに出会ったときに登録しなければならないことに憤慨した。 ある買い物客が私たちに言ったように、 「私は関係を結ぶためにここにいるのではありません。 何か買いたいだけです。」
強制登録を削除することで、売上は3億ドル増加しました。
Spoolのチームは、ほとんどの人がシステムに複数のアカウントを持っていることも理解しました。 人々は彼らがすでに口座を持っていることを忘れていました。 標準のメールで作成しようとするとエラーメッセージが表示されたため、別のメールを使用してアカウントを追加する必要がありました。
代わりに何をすべきですか？ 常にゲストチェックアウトを提供します。 販売後に登録に取り組むことができます：
- 「登録」という言葉すら言及しないでください。 「新規顧客」または同様の用語を言います。
- チェックアウト後、「ありがとう」ページでアカウントの作成を提案します。 チェックアウト時に名前、メールアドレス、住所がすでにわかっているので、アカウントを作成するのに数回クリックするだけで済みます。 希望するパスワードを要求し（またはパスワードを自動生成するオプションを提供し）、アカウントを作成する許可を確認します。
私の経験では、eコマースサイトで最も一般的なアプローチはまだ最適ではありません。 全体的に、忙しすぎて、新しい顧客に選択を求め、ためらいが生じます。
いくつかの、はるかに好ましいオプションがあります。
チェックアウト登録オプション1
ユーザーに、新規または返品の2つの選択肢を提供します。
Asosは常にこのアプローチを採用していませんでした。 これは彼らの以前のサインアップページであり、3つの選択肢がありました。
このアプローチを廃止し、合理化されたバージョンに切り替えると、カートの放棄が50％削減されました。
それはまだ（本質的に）強制登録ですが、パッケージが異なります。 ソーシャルログインオプションを使用すると、さらに簡単になります。 一般的なユーザビリティの問題は、数回クリックするだけで済みます。
チェックアウト登録オプション2
ショッピングカートの放棄は大きな問題です。 事前にメールアドレスを要求すると、放棄されたカートの復旧プロセスを簡単に開始できます。 また、2つの簡単な選択肢があります-感覚過負荷なし：
チェックアウト登録オプション3
もう1つの優れた方法は、ログイン画面を完全にスキップすることです。 代わりに、単にデフォルトでゲストチェックアウトになります。 既存のアカウントを持っている人はリンクを介してログインでき、新しいクライアントは支払い後にアカウントを作成できます。
ダイヤモンドキャンドルがうまくいくことは目に見えません。 彼らはあなたのために自動的にアカウントを作成しますが、それについては言及しません。 同じメールアドレスで4回のゲストチェックアウトを行い、最後にアカウントを作成することにしたとします（基本的にパスワードを入力します）。
そのメールアドレスでの以前の注文はすべてこのアカウントにマージされるため、新しく作成したアカウントには適切な注文履歴が付属しています。
チェックアウト登録オプション4
このオプションでは、購入完了時にインセンティブとともにアカウント登録が提供されます。 Speedoの例を次に示します。
彼らがあなたにお金を払うまで、人々はどんなアカウント登録にも悩まされません。 あなたが選択しなければならなかった場合、あなたにとってより重要なことは何ですか：アカウント登録または購入？
通常、「ありがとう」ページはあまり役に立ちませんが、ここではあまり役に立ちません。 彼らはあなたに簡単な申し出を与えます：パスワードを入力してクーポンを取得します（さらに注文追跡、より速い購入など）。 ここでの新規ユーザーのアカウント作成率は、多くの場合75％を超えています。
eコマースチェックアウトページ
これはお金のページです。 最終チェックアウトページのリフトは、銀行口座に大きな違いをもたらします。 チェックアウトフローのより良い最終ステップを作成するのに役立ついくつかの原則を次に示します。
最後にクレジットカード情報を尋ねる
請求を行う前に、配送情報を入力してもらいます。 これにより、チャルディーニのコミットメントと一貫性の原則が実行に移されます。 人々が何かを始めたら、彼らは彼らが終わらせるべきであると感じます。
名前、メールアドレス、配送情報を入力するように求められています。これらの情報は、理想的には請求先住所と同じであるため、もう一度入力する必要はありません。
同じ原則は、Foot-in-the-doorテクニックと呼ばれることもあり、フォームフィールドにも適用されます。 名前など、簡単なフィールドから始めます。 クレジットカード番号のフィールドは「最も難しい」ので、最後に来る必要があります。
これはあなたがすべきではないことです：
これの方が良い。 （配送ページからここにアクセスします。）
良い点：明確な1–2–3ステップの流れがあります。 名前フィールドはカードの詳細の前にあり、請求先住所（配送先と同じ場合）を再度入力する必要はありません。
悪い点：主なCTAは「保存して続行」です。 どこに進みますか？ 「レビューを続ける」など、次のアクションが何であれ、具体的にする必要があります。
実際のクレジットカードのような支払いフォームを使用してください
このスキューモーフィズムの方法で支払いフォームを設計することにより、実際のタッチを追加します。
Skeuocardと呼ばれるこのインターフェイスを無料（！）で入手して、システムに実装できます。 こちらでデモをお試しください。
支払いプロセスを安全に見せます
セキュリティは深刻な懸念事項です。 実際にSSLで支払いを安全にすることに加えて、それについて人々に伝えてください。 これは、安全に見えるように作成されたフォームの例です。
それが機能するいくつかの理由：
- クレジットカード番号フィールドの背景色が異なります。
- SSLロゴ。
- 書面による声明：「安全なクレジットカード支払い。 これは安全な128ビットSSL暗号化支払いです。」
- 有効期限とセキュリティコードの説明。
あなたの聴衆が技術に精通していない場合、彼らはSSLまたはHTTPSが何であるかを知らないかもしれないことに注意してください、それで平易な言葉で話してください。
システムにクレジットカードを保存する
確かに、PCIコンプライアンスに対処する必要があり、ハッキングされるリスクがありますが、リピーターからはるかに多くのお金を稼ぐことができます。 人々が彼らの請求情報を入力する必要がないとき、購入はワンクリックプロセスになります。
アマゾンは、リピーターの摩擦がほぼ完全に解消されたため、主にそれを殺しています！ チェックアウトフローはほとんどフローではなく、ワンクリックイベントです。
リピーターは新規ビジターよりも購入する可能性がはるかに高いですが、それはリピーターと比較して何もありません。 彼らのためにそれを簡単にします。
結論
チェックアウトフローでeコマースの最適化の取り組みを開始します。 ここでの相対的なゲインは、非常に優れた絶対合計になります。
チェックアウトプロセスのUXを改善するには：
- 「カートに追加」機能を明確にします。
- 訪問者がカートアイテムを簡単に変更または削除できるようにします。
- 登録プロセスを合理化します。購入後に新しい購入者に登録させます。
- チェックアウトページで、最初に最も簡単な情報を尋ねます。