カードの名前、またはカード番号を最初に入力しますか？

Question

ユーザーが新しいカードを追加できるように、公開Webサイトにはかなりシンプルなクレジットカードフォームがありますが、American Expressのサポートを追加する過程で、[カードの名前]の収集とこのデータの検証が必要であることがわかりました。

┌─────────────────────────────────┐ │ │ │ Card number │ │ ┌───────────────────────────┐ │ │ │ │ │ │ └───────────────────────────┘ │ │ │ │ Expiry date │ │ ┌────────────────┐ ┌────────┐ │ │ │ 1 - January ▼ │ │ 2016 ▼ │ │ │ └────────────────┘ └────────┘ │ │ │ │ Security code │ │ ┌───────────────────────────┐ │ │ │ │ │ │ └───────────────────────────┘ │ │ │ └─────────────────────────────────┘

これを追加しているときに、この情報を収集するための最もユーザーフレンドリーな方法について、実際に少しの議論がありました。

アイデア1

最初のグループは、「カード上の名前」フィールドはこのセットの他のすべての入力の前に移動する必要があるため、数値入力がアルファベット入力、次に数値入力ではなく、すべてが一緒にグループ化されると主張しました。

アイデア2

2番目のグループは、「カード上の名前」はカード番号の後にあると主張しました。これは、多くのカードに物理的に表示されるためです。

アイデア3

最後のグループは、2番目のアイデアをさらに進めて、アメリカンエクスプレスと一致するカード番号が入力されるまで「カード上の名前」フィールドを非表示にし、すぐにカード番号フィールドの下（JavaScriptによる）に表示して、実際にこの追加情報を入力する必要がないカード所有者のための入力の量。

だから私は質問を投げかけます、そのようなフォームに記入する順序付けられたプロセスで「カード上の名前」を尋ねるのに最もユーザーフレンドリーな場所はどこですか。他の方法よりも優れている点は何ですか？フィールドを追加するフォームを条件付きで変更し、一般的なケースで必要な入力量を最小限に抑える方が良いですか？

Monomeeth · Accepted Answer

短い答え

名前を尋ねる後クレジットカード番号を尋ね、アイデア2または3を採用します。

長い答え

私は最近、この問題について確かに基本的な研究を行いました。

この調査の理由は、オンラインクレジットカードフォームの発生率に気付いていたためです必須ではありません「カード上の名前」フィールドが増加しているようです。 UXの観点からは、このパターンは不思議でした。ユーザーから「カードの名前」フィールドがないことは、予期しない（つまり、表示される名前の入力を求められるため）カード上）。

このトピックは私も興味を持っていました。クレジットカードの名前を尋ねないと、サイトの安全性がそれほど高くないとユーザーに認識されてしまうのではないかと考えていたからです。

とにかく、私は製品/サービスをオンラインで販売しているサイト（合計119）をオンラインで検索しました。その結果を以下にまとめました。

52.94％のサイト（119のうち63）は、名前の提供を要求した
47.06％のサイト（119のうち56）は名前を要求しなかった

名前を尋ねたサイトの中で：

77.78％（つまり49）がそれを要求したafterクレジットカード番号
22.22％（つまり14）がそれを要求したbeforeクレジットカード番号

名前を要求しているほとんどのサイトはそうしているように見えるafterクレジットカード番号なので、このアプローチについての理解が深まります。そのように、それは私がそれをする方法でもあります。どうして？親しみやすさが期待を生むため、これが通常は、ユーザーが期待しているものと一致するため、ユーザーエクスペリエンスが向上します。次に、このアサーションを裏付けるための参考資料をいくつか示します。

大幅に改善された変更が必要なものがない限り、慣れ親しんだアプローチから離れたくないと私は主張します。プラスまたはマイナス1つのフィールドは、最終的には多くのことを意味しません。

メモ

残念ながら、American Expressカードを受け入れたサイトの数は測定していませんでした。AmericanExpressカードの所有者は他のカード所有者とは異なるユーザーエクスペリエンスを持っている可能性があるため、状況により当てはまります。
すべてのサイトは米国、カナダ、イギリス、オーストラリア、ニュージーランドのいずれかに基づいていたため、すべてのサイトが西部英語圏の国に基づいていたという結果には固有のバイアスがあります。つまり、たとえばアジアの国々でサイトを選択した場合、これらの調査結果が繰り返されるかどうかは確認できません。
多くの場合、名前を尋ねるサイトは、クレジットカード番号を尋ねるサイトとは別のステップでそうしました。つまり、名前、請求先住所などの詳細を要求する別のステップがありました。これらの場合、ステップの順序は、クレジットカード番号の前または後の名前を尋ねるかどうかを決定しましたしかしフィールドが実際に「カード上の名前」または類似の何かを要求した場合のみ。それがあなたの名前を尋ねるだけだった場合、これはクレジットカードの名前が欲しいとは見なされませんでした。
私容疑者は、名前を要求しないサイトの発生率が増加しているのは、VisaまたはMasterCardしか受け入れていないという事実によるものです。したがって、この観点からは、3番目のオプションを実装し、その際、クレジットカード番号の後に名前を尋ねることができます。

dennislees · Answer

オプション3は当然の選択です。

他の両方のオプションには、大部分の対話に必要のない入力を含めることが含まれます。（ほとんどのカードが「アメックスではない」という定義を満たしていると仮定します）

不必要な入力を含めると、Steve Krugの使いやすさの最初の法則（の更新版と改訂版）が壊れます。

ユーザーに不必要に考えさせたり行動させたりしないでください

これは、ユーザーが「名前フィールドに本当に入力する必要があるか」と考えるのをやめる可能性を高めます。またはそれが必要でないときにそれを完了するために時間と労力を無駄にします。

カードタイプを検出するクレジットカード入力は、一般的な設計パターンおよび相互作用です。これを利用してシステムがam Amexを検出するとすぐに、カード番号入力の下に[カード上の名前]フィールドが表示されます。

カード番号の入力が論理的な要件になった後に表示されるため、このアプローチでは、名前フィールドの位置に関する引数も無効になります。

Falco · Answer

Moonmethは、数字の後に名前を尋ねる理由を予想するためのいくつかの有効なポイントを示しています

最小の驚きのルール：

名前フィールドを完全に非表示にせず、番号が一致したときにのみ表示します。代わりに、名前フィールドを常に2番目の位置に表示します。しかし、アメリカンエクスプレスではない完全な番号を入力すると、フィールドが無効になり、「名前は必要ありません」内にテキストが表示されます

このようにして、不要な入力を減らすという利点を得ますが、ユーザーは名前が不要で、フィールドが欠落している理由を混乱させることはありません。フォーム全体のレイアウトは「ジャンプ」しません

Micheal Johnson · Answer

しないに名前フィールドがあるカードフォームを見たことがありません。通常、名前フィールドが最初に表示されます。私にとっては、その属性（たとえば、「名前、生年月日、住所」、人物の場合、製品の「名前、モデル番号」などを考える前に、自然に何かの名前を考えるため、論理的です、「名前、説明、日付」（テレビガイドの番組リスト）。

Wayne Werner · Answer

これはコメントとして始まりました：

経験的に、私のカードの一番上の数字です。

また、情報と考えられるエラーの両方の最も重要なソースでもあります。私は自分の名前をかなり頻繁に入力し、それに慣れ親しんでいます。有効期限は少ないが一般的ですが、確かに、少なくとも12分の1の確率で偶然に正しくなる可能性があります。 CVVは3〜4桁なので、これも非常に簡単です。

最も複雑な情報をfirstに配置することで、チェックサムが一致しないため、数値のファットフィンガーが発生したことをはるかに迅速にフィードバックすることができます（もちろん、それらは誤って有効な番号を生成する可能性がありますが、IIRCの会社はその可能性を減らすためのいくつかのトリックを持っています）。後でそれを残すと、警告メッセージを見逃す可能性が少し高くなります（さらに悪いことに、afterまで警告メッセージが表示されません）彼らは提出し、今ではすべてのフォームデータがクリアされており、イライラして購入を完了していません！）

TOOGAM · Answer

私の投票は、提供された理由（カードと一致）のため、「アイデア2」です。

つまり、なぜアイデア3（単純化のためにフォームを非表示にする）を選択しないのかを指摘したかったのです。あなたがそれを提示するそのような巧妙な仕事をするとき、それは人気のあるオプションのように聞こえます。しかし、私はそのアプローチに関して1つの懸念があります。

フィールドを非表示にしないでください。配偶者*がカードを受け取るのを待っている場合はどうなりますか？

*（仮説的なシナリオ。私は実際には配偶者がいないので、これはほんの一例にすぎません。もちろん、フォームの一部に記入し始めるときにカードが手元にない場合、多くの理由が考えられます。。）

フォームが利用可能な場合（表示されていて、無効/グレー表示されていない場合）、名前の入力を開始することで、何か便利なことができます。もう1つの方法はアイデア＃3です。これは、私の忍耐力をテストすることで、承認された番号の入力を待ってから、仕事を始められるようにします。情報の入力方法を教えてはいけません。気にする必要のあるフォームをすべて表示し、順番に記入するかどうかを選択させてください。