ECサイトにはそれぞれ、ユーザーをショッピングカートから最終購入まで誘導する独自の支払いフローがあります。商品の種類とユーザーの意図によって異なりますが、購入の意志決定は常にもっとも難しい部分です。
支払い画面では、ユーザーがチェックアウトプロセスを完了するように促す必要があります。今回は、支払いフォームのデザインを改善し、チェックアウトのコンバージョンを改善するためのユーザビリティのヒントを紹介したいと思います。
意図を明確にする
目標は、ユーザーに購入を促すようなフォームをデザインすることです。特にオンライン上での支払い段階では、このプロセスを可能な限りシンプルにする必要があります。
支払いフォーム全体を明確にする方法は１つだけではありません。各フィールドを明確かつ簡潔にするだけなのです。ユーザーを混乱させたり、購入するか迷ってしまわないようにしましょう。
念頭に置いておくべきテクニックがいくつかあります。
- 大きなタイポグラフィ
- プレースホルダの代わりにラベル（またはその両方）
- フィールド間の十分な余白
- Tabキーによるフィールドの移動（tabindexの利用）
また、必要な箇所でビジュアルを示すアイコンをたくさん追加してください。Threadlessのチェックアウトページは素晴らしい例です。
クレジットカードのアイコンを使用すると、ユーザーが支払い方法として何を選択しているかが明確になります。入力フィールドの下にある、セキュリティコード（CVC/CVV番号）の位置を明らかにするアイコンも同じことが言えます。
支払いフォームの各段階で、ユーザーが何をしているのかを正確に知らるためにできる限りのことをします。あいまいな用語や不明な指示を取り除き、たくさんのツールチップとアイコンを使って、ユーザーが疑問を抱かないようにしましょう。
カスタム入力のスペース
データによっては、電話番号やクレジットカードなど特定のテキスト形式が必要なものがあります。このような場合、JavaScriptを使うことでテキスト形式に合わせて文字間にスペースを入れることができます。これは、Webサイトに追加できる最善の方法の１つです。
このようなカスタムスペースは、フォームフィールドに記入する際に、ユーザーに適切な入力ができていると知らせることができます。
また、ユーザーが正しい郵便番号を入力した場合のみ、フォームが次のフィールドに自動的に移動するようにすることができます。電話番号に一致するように、数字を自動的に電話番号スタイルにするのと同じです。これはeBayのチェックアウトフォームで見ることができます。
しかし、もっとも便利なのはクレジットカードの４桁のスペーシング形式です。クレジットカード番号は非常に長いため、打ち間違いやすいです。不正確なクレジットカード番号では、注文が失敗してしまいます。
クレジットカード番号の入力でカスタムスペースを利用することで、顧客が数字を入力して、正しい数字か再確認するのをずっと簡単にすることができます。BodyBuildingのチェックアウト画面は良い例で、無効な入力があった場合にエラーメッセージが表示されます。
自動フォーマットされたテキストを作成するために無料プラグインは豊富です。ほとんどがjQueryで作動しますが、ライブラリを使わず素のJavaScriptだけのサンプルもいくつかあります。
以下は私が見つけた中で最高のものです。
アクションの簡略化
支払いフォームの中には長いものもあり、Webサイト毎にプロセスは異なっています。そのため、多くの訪問者が戸惑ってしまう可能性があります。これが、2000年代初期にECが非常に長い間行き詰まっていた理由の１つです。
しかし、フォームの長さにかかわらず、この問題を回避するには２つの方法があります。
- 小さなフォームでは、すべてを１ページに収めて簡潔にする。
- 大きなフォームでは、パンくずリストでステップごとに分ける。
たとえば、SEMrushの小さなの支払いフォームは素晴らしい例です。非常に使いやすく、読みやすく、知っておくべきことすべてがページにはっきりと表示されています。
私はパンくずリストがある限り、チェックアウトプロセスが長くても気にしません。パンくずリストがあれば、ユーザーがチェックアウトプロセスのどの辺りにいるのか、また完了までにどれぐらいの時間がかかるかを明確に示せます。
この信頼感は、各ステップで支払いフォームを入力しやすくさせます。チェックアウトプロセスがいつ終了するのかわからないと、ユーザーは困惑して不安になり、イライラして立ち去ってしまうかもしれません。
パンくずリストの効果は大きいので、特に長い支払いフォームには追加することをおすすめします。 Wiggleのチェックアウトでは、各フォームページの上部に明確なパンくずリストが使用されています。
小規模、大規模問わず、支払いフォームはそれぞれの規模に応じて使う技術を使い分けていくとうまくいきます。両方試してみるといいでしょう。
いくつかのA/Bテストを実行し、どのスタイルがあっているか確認しましょう。結果に驚くかもしれません。
購入の要約
ユーザーが請求書の情報を入力してから、最終的な「確定」ボタンを押させるのが難しい所でしょう。ためらいはコンバージョンの妨げとなります。
購買オーダーを要約することで、顧客に最終的な安心感を与えることができます。ユーザーは、購入商品から合計金額（とプロセス）、さらに可能な場合は配送日まで、すべてを一度に見ることができます。
GitHubの有料アップグレードでは、購入のすべてを１ページに要約しています。どのくらいの頻度で請求されるのか、最終的な料金はいくらか、そして次の料金がいつわかるかを明確にします。ほとんどのフィールドは個人のプロフィールから記入されるので、アカウントを持っている場合このプロセスは非常に迅速です。
もう１つの例は、ECショップで最大のAmazonです。
配送先住所や支払い情報などの詳細を入力したあと、購入商品をしっかりと確認するために、最後に購入情報が要約された画面が表示されます。
これにより、間違って購入した商品の返品が減り、顧客が自信を持って「購入」ボタンを押すのに役立ちます。
小規模の支払いフォームでは、注文を要約するのは難しいかもしれません。しかし、顧客には情報を包み隠さず、できる限り詳細を共有するようにしてください。
まとめ
あなたのWebサイトの支払いフォームは、潜在顧客と購買顧客との間に立ちはだかる唯一のものです。ですから、フォームの最適化は非常に重要です。
上記のヒントが、使い易くて購入を促すような請求書の作成に役立ち、あなたのお店や顧客全員に、より多くの収入をもたらすことを願っています。最適化は継続的なプロセスですが、新しいアイデアを絶えず試しているのなら、あなたはビジネス競争においていつも一歩先を歩んでいるでしょう。
