🤩 🙋🏿 💲 オンラインストアの支払いページの設計原則 ⚰️ 🚵🏿 🏂

クリスチャンホルストによる「 eコマースチェックアウトデザインの基本ガイドライン」というタイトルの記事の翻訳を紹介します。 Smashing Magazineの発行の承認を得て、Habrahabrユーザー専用にUXDepotに転送されました。

eコマースシステムの悲しい統計-最近の調査によると、潜在的な購入者の少なくとも59.8％が注文して支払いを行う段階でサイトを離れています（異なる調査では、 MarketingSherpaの 59.8％からSeeWhyの 83％まで）。

主な質問は、ユーザーが注文を完了せずにカートを頻繁に大量に離れる理由です。 その理由は、デザイナーがオンラインストアを作成する際の根本的な間違いにありますか？また、一般ユーザーの生活を複雑にし、製品を購入できないようにする正式なルールがあるかもしれません。状況を改善し、電気店のコンバージョンを増やす方法はありますか？

それが私たちが見つけようとしたものです。 2010年に、ユーザビリティ調査を実施するためにインターネットユーザーのグループを雇い、製品をバスケットに追加してから最終チェックアウトまでの段階のみに集中しました。この研究は、「大声で考える」という概念を使用して行われ、コンピューター画面で発生したすべてのことを記録しました。次に、被験者の行動を分析し、記録を注意深く調べました。

この調査では、通常、最も難しいのは、クレジットカードの詳細を入力することだけが残っている購入の最終段階までユーザーを導くことであることが示されました。

15のサイトを調査しました：1-800-Flowers、Hillton、American Apparel、Amnesty、Apple、HobbyTron、Levi's、Newegg、Nordstrom、Oakley、Perfume.com、PetSmart、Thomann、Walmart、Zappos。

一般に、ユーザーの注意をそらすアニメーションから、注文の非論理的なプロセスまで、500以上のユーザビリティソリューションをテストしました。次に、これらのソリューションを分析し、「 E-Commerce Checkout Usability 」と呼ばれるレポートに注文する際に、63個のユーザビリティ原則を書きました。この記事では、このレポートの11の基本原則を紹介します。

1.チェックアウトプロセスは完全に線形でなければなりません

事実： 注文の段階でネストされたステップが存在することは、ユーザーを混乱させ、恐ろしくさせ、商品を購入するプロセスの直線性に関する彼の考えを破壊します。

商品の注文プロセスの非直線性は、調査中に特定できた最も重大なエラーの1つです。調査したほとんどのサイトには、線形の順序付けプロセスがあります（WalmartおよびZapposを除く）。

注文の非線形プロセスを「 偶然に 」得る典型的な方法は、 他の内部にいくつかのステップを作成することです 。これは、たとえば、別のページで、ユーザーが「 希望の配送先住所を選択する 」（Walmart）または「 アカウントを作成する 」（Zappos） 必要がある場合に発生し、その後、ユーザーはアプリケーションに記入する前のステップにリダイレクトします。

図では、ウォルマートでのチェックアウトプロセスを見ることができます。目的の配信アドレスを選択すると、ユーザーは前の手順にリダイレクトされるため、このプロセスは非線形であることに注意してください。

Wallmartでの非線形チェックアウトプロセス。 大きな画像が必要ですか？

幸いなことに、商品を注文するための線形プロセスを作成するのは簡単です。たとえば、直線性を確保するために、新しいアカウントを作成すると、ユーザーを注文プロセスの前のステップにリダイレクトするのではなく、ユーザーをさらに1ステップ移動する必要があります。

すべてのユーザーは製品登録のプロセスが線形であるという精神モデルを持っているため、これはすべて非常に重要です。同じページを2回見ると、ほとんどの購入者はサイトでエラーが発生したと判断します。これは、サイトがユーザーからデータを受信していない場合に起こることです。

テスターの一人が言ったように、「同じページを2回見たという事実は疑わしい。私はまさにルールですか？」

2.フォームとフィールドの名前に説明を追加します

事実：説明がないと、多くの形式があいまいになる可能性があります。

購入中、テスターの1人が「アドレスバー番号2」とはどういう意味ですか？ 「他の一部の被験者は、「請求先住所」フォームの名前で混乱していました。

テスターの大半は、フィールド名の理解に問題がありました。いくつかのケースでは、これらの問題は重大であり、あるケースでは、特定のフィールドに入力する必要があるものを理解できなかったため、テスターの少女は通常、さらなる注文の試みを拒否しました。ほとんどの場合、テスターは各フィールドの目的をさらに明確にする必要があると指摘しました。

多くのテスターを混乱させた1つのフォームは、HobbyTron Webサイトにありました。ユーザーは、最初のフィールドの意味を推測する必要がありました。

AppleのWebサイトでは、「エリアコード」フィールドのほとんどのテスターが郵便番号の入力を開始しました。

フォームフィールドに説明がない場合、ユーザーはどのフィールドから情報を受け取りたいかを常に理解しているとは限りません。そのため、フィールドに小さな説明と例を追加する必要があります 。すべてのユーザーがヘルプを必要とするわけではないため、「 これは何ですか？ 」リンクの後ろにヒントを隠すことができます。 」または、単にツールヒントテキストの色のコントラストまたはフォントサイズを小さくします。

以下は、フィールドとフォームの説明がユーザーが何をどこに入力するかを理解するのにどのように役立つかの例です。

このルールの例外は、電子メール入力フィールドなどの明らかなフィールドに対してのみ作成できます。フィールド自体の名前は明確な説明ですが、多くのユーザーはメールアドレスが必要な理由とその使用方法を知りたいと思っています。

また、ユーザーはヒントやイラスト（たとえば、クレジットカードに有効期限がある場所を視覚的に表示する）に満足します。

3.あいまいな単語を使用しないでください（たとえば、 "Continue"）

事実：コンテキスト固有の単語（Continueなど）は紛らわしい。

バスケットの[ ショッピングを続ける ]ボタンには2つの意味があります。

引き続き購入を選択します （たとえば、購入者がジーンズを選択し、Tシャツを選択し続けたい場合）。
チェックアウトプロセスに進みます （購入者は必要なものをすべて選択し、商品の代金のみを支払いたい）。

「戻る」はそのような言葉の別の例です。どこに戻ったの？前のページに戻りますか？検索結果に戻りますか？「次」という言葉はどうですか？ これらの単語はすべて、コンテキスト （購入者がいるページ）と購入者のロジックに依存します 。

HobbyTron.comは、ユーザーが「続行」ボタンをクリックして、チェックアウトに進むと考えているサイトの1つです。

HobbyTron Webサイトの[続行]ボタン。 素晴らしいスクリーンショット 。

テスターの一人は言った：「 ボタンをクリックしたとき、私は製品を選択し続けることを考えていなかった、私はすでに選択したすべてを描きたかっただけだ 。」これは、状況依存の単語がユーザーを混乱させる方法の良い例です。 すべてのテスターの約半数は、このような言葉のために少なくとも一度は間違った方法でクリックしました。

そのような場合は、「今すぐ購入」や「買い物を続ける」など、自由な解釈のない言葉を使用する必要があります。

4.支払いページのすべての重要なフィールドに視覚的に下線を引く

事実：ユーザーは、クレジットカードの入力ページが安全でないように思われるかもしれません。

多くのテスターは、クレジットカード情報を入力するまでセキュリティについて考えませんでした。一部のテスターは、「安全」または「疑わしい」という言葉を使用して、支払いページの一部について話しました。

セキュリティアイコン、テキスト行、およびその他の信頼性の視覚的兆候があるフィールドは、そのような要素がないフィールドよりも安全に見えました 。これは、両方のフィールドが同じページに配置されており、実際に同等の信頼性があると考えると、特に驚くべきことです。ただし、バイヤーはフォームの動作原理に精通していません。 サイトについて知っているのは印象だけです。

テスターの一人の少女は、製品が十分に安全でないようであるという事実を引用して、製品の購入を拒否しました。彼女の反応は、ページの技術的な特徴とは関係がなく、入力フィールドの視覚的な信頼性の低さに恐れていました。

フォームを視覚的に安全にする方法を説明するために、2つのレイアウトを作成しました。その右側の方が信頼性が高いように見えます（B）。セキュリティ効果は、ロックアイコン、変更された背景色、およびGeoTrustアイコンを使用して作成されます。

視覚的な固定のためのスケッチ。 素晴らしいスクリーンショット。

銀行カードを使用して支払いページに視覚的な安全標識（境界線、背景色、さまざまなアイコン）を追加することで、購入者に対するページのセキュリティの印象を大幅に高めることができます。

5.ページで[適用]ボタンを使用しないでください

事実：バイヤーは、[適用]ボタンがさまざまな入力フィールドで何を行うかを理解していません。

テスターの半数以上が、支払いページ（たとえば、配送方法選択セクション）に「適用」ボタンを見るのを恥ずかしく思いました。

これらのボタンは次のいずれかであることがわかりました。

対応する入力フィールドが入力されていても、クリックしないでください
クリックして、メインの確認ボタンと混同します。

ユーザーは、スタンドアロンの[適用]ボタンをどうするかを理解していません。

Newegg.comの支払いページで、インデックスを入力したテスターの半分だけが [Go]ボタンをクリックしました（上記の問題1を参照）。

Neweggの[適用]ボタン。 素晴らしいスクリーンショット。

バイヤーは「適用」ボタンとメインの確認ボタンを混同しているため、選択がページに表示されるように、同じページにリダイレクトされます。バイヤーは次のページにアクセスしたいのですが、前のページに戻ると、何らかのエラーが発生したようです（これについては第1章で説明しました）。この状況は2人のテスターで発生しました。テスターは、エラーメッセージが発生しなかったため（技術的にはエラーがなかったため）、発生したエラーの種類のみを推測できました。

AmericanApparel.comでは、テスターが[ 適用 ]ボタンをページのメイン確認ボタンと混同し （上記の問題2を参照）、購入プロセスを完了できませんでした。

American Apparel Webサイトの[適用]ボタン。 素晴らしいスクリーンショット。

したがって、購入の次のステップに進む前にいくつかのフィールドのデータを本当に確認する必要がある場合は、AJAXまたは他の同様の手段を使用し、「適用」ボタンを表示しないでください。

6.カードの有効期限の形式は、カード自体とまったく同じに見える必要があります

事実：特にカード自体と同じように見えない場合、カードの有効期限を入力するためのフォームを解読することは困難です。

この日付を月名として表示するサイトもあれば、月名と数字の組み合わせとして表示するサイトもあれば、数字のみを使用するサイトもあります。これらのオプションのどれが最適ですか？カードの有効期限を提示するための最良かつ最も論理的な方法は、購入者がカード上でそれを見る方法（つまり、数字のみ）にすることです。これにより、購入者はフォーム上の番号とカード上の番号を簡単に確認できるため、誤解やエラーを最小限に抑えることができます。

以下に、カードの有効期限を入力するための形式を提示する必要がない方法の例を示します 。例Dでは、月はテキストで置換され、年は数字で置換されます。これはすべての最も不幸なオプションです。

月を表す正しい方法は、月を数字で入力し、1桁の数字の接頭辞を入力することを提案することです（したがって、マップに印刷されているように表示されます。

年を表す正しい方法は、2桁のフィールドを使用して年を入力することです（たとえば、バイヤーに2014年に14を入力するように要求する）。

月のテキスト名がデジタル指定の後に来る場合（たとえば、03-3月）、テスターは月の入力に問題はありませんでしたが、すべてが逆（3月-03）の場合、これは問題を引き起こしました。

また、スラッシュ（/）を使用して月と年を区切る必要があります。これにより、フィールドはバイヤーがクレジットカードで見るものと同じになります（2014年3月を示す03/14）。

7.入力フィールドに1列のみを使用します

事実：フォームフィールドが2つの列にある場合、バイヤーがそれらの関係を確認することは困難です。

テスターの半数以上が、 2列フォームの記入に深刻な問題を経験しました。このような場合、2つのシナリオが発生しました。

バイヤーは、2つの列のいずれかを記入することを忘れています。ユーザーはそれらを重要ではないと考えたか、単に気づきませんでした。
ユーザーが入力する必要のないフィールドに入力すると、エラーが発生しました。

たとえば、 Perfume.comのログインおよび登録フォームは次のとおりです。

さまざまなユーザーがこのフォームを次の3つの方法で解釈しました。

サイトに登録するには、すべてのフィールドに入力する必要があります。
ゲストとしてアプリケーションに入力するには、「電子メール」フィールドと右側の列のすべてのフィールドに入力する必要があります。
右または左の列に記入する必要があります。

別の例はPetSmartです。ほとんどの場合、テスターは2番目の列の2番目のフィールド（クレジットカードID番号を入力）をスキップし、エラーメッセージが表示されました。

このような2つのケースでは、テスターは間違った列に間違ったデータを入力し続けたため、チェックアウトプロセスを中止しました。

1つの列のみを使用することをお勧めします。このような場合、上記の問題に遭遇したテスターは一人ではありません。

8.請求先住所としてデフォルトの配送先住所を使用します

事実：ほとんどのユーザーは商品の宅配を注文します。つまり、配送先住所と登録住所の両方を入力することは意味がありません。

住所を組み合わせると、入力する必要があるフィールドの数が大幅に減り、購入プロセスの負担が軽減されます。また、買い手は住所を1回だけ入力するので、買い手側のエラーの可能性を減らすのに役立ちます。買い手はフォームに記入するときにそんなに急いでいることはなく、エラーが見つかった場合、彼は一度だけ修正する必要があります。

NewEgg Webサイトで注文します。 素晴らしいスクリーンショット 。

また、通常、登録アドレスフィールドは非表示にする必要があります。それらを非アクティブにするだけでは十分ではありません-私たちの研究では、これはテスターを混乱させ、それらを埋めるためにフィールドをクリックしようとしました。

一部のサイトのページには、配送先住所フィールドのグループから請求先住所フィールドにデータを転送するボタンがあります。この場合、重大な問題が発生します-ユーザーはアドレスとともにエラーをコピーします。もちろん、フィールドグループの1つでエラーを修正した後、修正した値を別のフィールドグループにコピーする必要がありますが、例外なく、被験者はこれを行うのを忘れました。

Apple Webサイトのアドレスを転送するためのボタン。 素晴らしいスクリーンショット。

ボタンは、気づきにくい場合があります-サイトのデザインによって異なります。たとえば、AppleのWebサイトでは、ユーザーの半数が見ていません。その結果、すべてを手動で2回入力する必要がありました。

このような場合の最良の解決策は、請求先住所と配送先住所が同じであるというチェックボックス （または同様のもの）を使用することです。この場合、エラーを修正する必要があるのは一度だけです。アムネスティインターナショナルのウェブサイトは、そのようなソリューションを使用する良い例です。

9.明確なエラーメッセージを使用する

事実：顧客は多くの場合エラーメッセージを表示しないため、それらを修正しません。

私たちのテスターの半分はエラーメッセージに深刻な問題を抱えていました-彼らはそれらを見なかったか、彼らが何を望んだか理解できませんでした。

買い手がフォームへの記入で問題が発生した場合、これは購入拒否の可能性の大幅な増加につながります。購入者がエラーメッセージを複数回目にした場合、購入者はサイトを離れます（購入がブロックされたか、サイトでバグが始まったようです）。

以下は、観察が不十分なエラーメッセージの4つの例です。

American Apparel Webサイトでは、上部の黄色のバーにエラーメッセージが表示されます（このメッセージは、買い手がフィールドに電話番号を間違って入力したことを示しています）。

Walmartの Webサイトには、2つの小さな赤い矢印があります（Ship to homeおよびSite-re-storeの右側）。これらはエラーメッセージです。

また、PetSmart Webサイトでは、州/県フィールド名の赤色はエラーではなく、このヘッダーを強調表示するスタイルにすぎません。

Perfume.comでは、赤いフィールドはエラーを示します。

エラーメッセージがこれらのエラーが発生したフィールドから離れすぎている場合、テスターはそれらに気づきませんでした。多くのサイトでは、ページの上部にのみエラーメッセージが表示され、フィールドの横には表示されません。このため、このようなメッセージは理解しにくい場合があります。多くのテスターは、間違いを犯したフィールドの横に疑わしいものを見ないで、ページが最初に正しく読み込まれなかったと仮定して、確認ボタンを何度も押してみました。もちろん、結果として見たものはすべて、エラーメッセージのある同じページです。

バイヤーが警告に気付かないか、理解できない場合、購入者はエラーを修正して注文プロセスを続行できません。この場合、彼はすべてをあきらめてサイトを離れるだけです。 したがって、エラーメッセージを考えて、それらのテキストを書くことに特別な注意を払う必要があります 。

投稿を確認してください：

エラーが発生した場所の隣にある（ページの上部ではない）
わかりやすく簡潔
顧客に見えるようにする（コントラストを強調し、矢印またはその他の視覚的なインジケータを使用する）

10.登録は必要ありません

事実：バイヤーはサイトに登録する必要性を強く嫌います

お客様は、別のサイトで別のアカウントを作成するのに時間を無駄にしたくありません。私たちの調査中、すべてのテスターは登録を強制されたときにヒューズを失い、 30％が最終的に購入を拒否しました。

これにはいくつかの理由があります。

まず、ネットワークのユーザーはすでに100個のアカウントとパスワードを持っているため、オンラインストアでいくつかのものを購入するためだけに別のアカウントとパスワードを取得する必要はありません。

さらに、 テスターの40％が、注文時に送信を明確に拒否したとしても、 スパム送信を恐れていると述べています。

多くのバイヤーは、頭の中にメンタルインストレーション「 アカウント=ニュースレター 」を持っています。テスターの1人は、「今すぐアカウントを作成すると、永久にスパム送信されます」と説明しています。恐らく、彼らはデフォルトでニュースレターを購読し、それを拒否するオプションを隠したサイトのために、この意見に来ました。

また、訪問者はあなたが自分の情報を永久に保持すると信じている可能性が高いです 。また、企業は顧客情報をデータベースに保存しますが、顧客がWebサイトにアカウントを作成したかどうかに関係なく、ほとんどのユーザーはこれを理解していません。これは認識の問題であり、一部のユーザーはサイトが自分の個人情報を保持しているとは思わないのです。

また、登録には時間がかかります 。登録時に、より多くの手順を実行し、より多くのフィールドに入力する必要があります。ユーザーが登録を好まないもう1つの理由。

さて、そして最後に- 多くのバイヤーは、単に製品を購入したいだけの場合、アカウントを作成する必要がある理由を理解していません 。ある受験者によると、「普通の店で香水を買うとき、誰も私にアカウントを始めるように頼みません！」

ほとんどのバイヤーは登録できることについては正常ですが、登録を強制されることは非論理的です。 数人のユーザーは、サイトで定期的に購入すればアカウントを開設すると言いました。

控えめに顧客に登録を提供したい場合は、チェックアウトプロセスの最後に顧客に尋ねるだけです（「アカウントを作成しますか？これを行うには、パスワードを作成してここに入力してください」）。この場合、次のようにメールアドレスを使用できます：ログインして、購入者が商品を置くときに入力したデータからすべての登録フィールドに個別に入力します。この場合、買い手に新しいアカウントの作成を強制する人はいませんが、購入後に簡単にこれを行うことができます。（アカウントを持つことの利点を購入者に説明することを忘れないでください。）

11.ユーザーによると、必要のない情報は必要ありません

事実：バイヤーにあなたがあなたが必要としないと思う情報を提供するよう頼むとき、バイヤーはこれを彼らの個人的な生活の侵害と見なします。

テスターは、サイトの1つで彼の携帯電話番号を通知するという申し出で次のように叫びました。「 ねえ、どうして私の携帯電話番号が必要なの？ 彼らはそれをどのように使用しますか？ 彼らは彼を必要としません！ »調査したすべてのサイトで、テスターの1人が、サイトには彼からの個人情報が多すぎると述べました。

店舗がメールを知っているときに電話番号を見つけようとすることは、顧客にとって驚きで迷惑です。店舗が既に購入者と通信する方法を1つ持っている場合、なぜもう1つ購入する必要があるのでしょうか？

Appleでのチェックアウト。

情報が本当に必要な場合は、トラブルを起こしてその理由を説明してください 。あなたにとって明らかなことは、顧客にとって必ずしも明白ではありません。彼らは、オンラインで買い物をするときに最悪の事態を予想することに慣れています（スパムメールや広告電話）。

サイトが必要な理由を説明したときに、テスターはすべての情報を静かに入力しました 。ヒントを次に示します。説明を非表示にせず、情報入力フィールドのすぐ横に書きます。実際、上記で引用したテスターは、そこに明確に説明されているように、静かに別のサイトで自分の電話番号を入力しました-これは、配信の問題を解決するために必要です。

購入が高額になるほど、ユーザーが提供することに同意した自分に関する情報が増えます 。バイヤーがラップトップを注文する場合、彼は店が彼に連絡できることを確認したいと考えています。ただし、これは注文を行うためにそのような情報が必要な場合にのみ行われます。これらのフィールドがオプションであるサイトでは、買い手は電話番号を入力するのを警戒し、フィールドを空白のままにしました。また、必須フィールドとオプションフィールドは明確に区別できるようにする必要があります。

商品を注文する際のユーザーエクスペリエンスの向上

注文の良い印象を作成するとき、多くの詳細を考慮する必要がありますが、それにもかかわらず、これらの11の原則は最も重要です。そして、私たちの原則を適用すれば、あなたのサイトでの購入プロセスはずっと良くなります。

10年以上前に実施された調査で、ユーザビリティの第一人者であるJacob Nielsenは、 大規模な電子店舗が最も基本的なユーザビリティの原則にさえ違反していると書いています。それ以来、ほとんど変わっていません-ウォルマートとCitrixのサイトをご覧ください。

多くの大規模サイトは、ジオターゲティングや自動アドレス指定などの素晴らしい機会を誇りに思っていますが、ユーザビリティの基本原則に従うことを考えていないため、収益が大幅に減少しています。

Webテクノロジーと最新の強力なブラウザの最新の進歩により、優れたユーザーエクスペリエンスを作成する可能性が何度も高まっています。ただし、 ユーザビリティの基本原則が満たされるまで、最新のテクノロジーに焦点を合わせるべきではありません 。最もクールでクールなテクノロジーを紹介します。同時に、注文のプロセス中に59.8％の顧客がサイトを離れる様子を受動的に監視します。

( 1), ( 2 3), (4, 5, 5, 7, 8, 9), (10 11) .

— . , .

翻訳者からのPS： この記事を楽しんでください。 翻訳の誤りをご指摘いただければ、喜んで訂正いたします。 午後に私に書いてください:)

オンラインストアの支払いページの設計原則

クリスチャンホルストによる「 eコマースチェックアウトデザインの基本ガイドライン 」というタイトルの記事の翻訳を紹介します。 Smashing Magazineの発行の承認を得て、Habrahabrユーザー専用にUXDepotに転送されました 。