クレジットカード入力フォーマット
どこかで、私が読んだユーザビリティの本の1つ（おそらくドナルドノーマン）で、クレジットカードを入力するための通常の形式が間違っているという提案がありました。通常の形式は、長い文字列の16文字です。しかし、そのとき私たちが読んでカードに印刷する方法は、4つの4つのグループです。議論は、4つの4ロットでカードを入力する方がはるかに簡単で、ユーザーを確認します。
これは、入力されたデータにダッシュを含め、検証でそれらを無視するためのコーディングを少しだけ必要とします。または、次のボックスに移動する4つのボックスを用意します。複雑なコーディングの問題ではありません。それで、なぜ誰もそれをしないように見えるのですか？標準のボックス形式がなぜそれほど普及しているのですか？
これは、私のクレジットカードを使用しようとしたところ、間違いを犯した後、ロット全体を調べて間違いを特定しなければならなかったために発生しました。
編集：コメントからいくつかのポイントを追加します。適切に実装する必要があると思います。自動挿入されたダッシュの4つのボックスが機能しないか、微調整が必要になる場合があります。したがって、xxxが正しいアプローチであるとは言っていませんが、現在のアプローチには独自の問題があります。
1つのボックスに入力されたすべてのフォーマットを受け入れます。
Don Norman で述べたように：
「コンプライアンス：Microsoft Outlookが適切に機能する方法
Microsoft Office Outlookは、電話番号、日付、時刻、および住所を処理するという素晴らしい仕事をしました。驚き：これは、人々が通常苦情で対象とする製品ですが、私はそれらを称賛するつもりです。 Outlookのアドレス帳または連絡先フォームが電話番号を要求すると、ユーザーが使用する任意の形式を受け入れ、それがどの国に属しているかを把握し、標準形式に再フォーマットします。 +358で電話番号を開始すると、フィンランドの番号を入力していることが認識されるため、米国の番号の場合と同じようにフォーマットしようとしません。アメリカの数字の場合は、通常の7、10、または11桁の数字であれば、ほとんどすべてのスペース文字を使用できます。その結果、次のアメリカの電話番号のいずれかを入力できます。
5551212
555.1212
847 555-1212
（847）555-1212
847.555.1212
8475551212
+18475551212
そして、それらはすべて555-1212、（847）555-1212、または最後のケースでは+1（847）555-1212に変換されます。
ほとんどのシステムは、電話番号の場合と同様に、日付に関しても同様に問題があります。日付はさまざまな方法で言います。たいていのシステムでは、好きな方法で行わないと、私たちに叱られます。
2009年1月20日の日付の書き方は次のとおりです。
2009年1月20日
2009年1月20日
2009年1月20日
2009年1月20日
2009.01.20
1月20日
Outlook万歳！それは、私たちの変動に対する大きなコンプライアンス、大きな許容度を示しています。これらのフォーマットすべてを受け取り、それを好みのターゲット仕様であるTue 1/20/2009に変換します。しかし、さらに良いことに、ターゲット仕様はコンピュータを使用する人によって設定され、オペレーティングシステム内に格納されるため、すべてのプログラムが同じ形式を使用できます。 」
確かに、不寛容なクレジットカードの入力について不平を言う私たちUXの人は十分にいます。 Norman 2009 に加えて：
必要に応じて、コメントにさらに追加します。
ユーザーが入力するときに、ダッシュやスペースなどの区切り文字を単一のテキストフィールドに自動的に挿入することは現実的です。ほぼ同じようにプログラム的に単純なのは、ユーザーが好きな場所に好きな区切り文字を入力できるようにすることです。希望どおりに入力する可能性があります。舞台裏で、検証、チェックサム、および実際の金融取引のためにすべての非数値を取り除きます。
なぜそんなに多くのウェブサイトが入力された区切り文字を要求しないのですか？私は無知だと思います。そして怠惰。そして変化への抵抗。誰もがそれを行うので、心配する競争はどこにありますか？そして冷淡。ユーザーがそれぞれのクレジットカード番号を入力するまでに、ユーザーは購入を中止せず、エラーが原因ですべての作業を失うことはありません。
原則として同意しますが、すべてのクレジットカードが16桁であるとは限りません。私の前にAmerican Expressカードがあり、15桁（4-6-5として分割）があります-詳細は Wikipedia Bankカード番号 ページを参照してください-12-19桁のようです可能。
そのため、カード番号を正しい/適切な数のフィールドに分割するフォームを提供することは、カードプロバイダーに依存する複雑なタスクになります。テストはかなり主要なタスクであり、将来の証明にもならない可能性があります。
これは反対の見方です：
スペースやダッシュなしでユーザーに入力を強制すると、ユーザーはより慎重にデータを入力する必要があります。
とはいえ、この理由は二段だと思います。一般的なカードプロセッサのバックエンドAPIには数字のストリームが必要であることを知っています。クレジットカードフォームを作成したら、スペースとダッシュ（ "s/[-] // g"）を削除して、ユーザーのスペースにメモを書き込みます大丈夫です'。
単一のテキストボックスを使用する理由は、ユーザーが数字を入力するだけの方がはるかに簡単だからです。テキストフィールド間を4文字ごとにタブ移動するのは、絶対に苦痛です。また、オートスイッチのフォーカスは非常に煩わしいものです。特に、戻って変更を加える必要がある場合はなおさらです。これを機能させる実装は、ほとんどの場合、変更を行おうとすると問題を引き起こします。
ロジャーはまた、すべてのクレジットカードが同じ形式であるとは限らないため、特定の形式を強制することはできません。フォーマットごとに異なるフィールドを用意する必要があり、アプリケーションの複雑さが増すだけです。
ユーザーがフィールドを離れるときに、ある種のマスキングを使用してセパレーターを配置すると問題なく動作しますが、カードの種類によっては期待どおりに動作しない場合があります。
これは、電話番号や社会保障番号のような他の同様のフィールドと同じロジックです。 議論済みの電話番号フォームフィールド も過去に使用しました。
4つのボックスにはタブが必要です。 16文字の文字列は正しく理解するのが困難です。ここでの解決策は、スペースを受け入れる1つのテキストボックスであるように思われます（そのため、19文字を入力でき、他の数値形式に対して弾力性があります）。ユーザーに負担をかけるのではなく、解析時に修正してください。ハイフンも受け入れたい場合は問題ありませんが、ハイフンがカード上にないので、ハイフンは必要ありません（ユーザーは期待しません）。