クレジットカード番号フィールドを4つの異なる入力に分割する
私は以前、クレジットカード番号に4つのフィールドを使用しており、入力しやすくするために4つの番号の各セットを分割しています。
私は現在、代わりに数値のセットの後にスペースを挿入する1つのフィールドがあると考えています。
4つのフィールドがある場合、カーソルは自動的に次のフィールドにジャンプします。
どちらの形式が望ましいですか？それとも他にもっと良い選択肢はありますか？
16桁と17桁のVisa、Mastercard、Discoveryのみを受け付けています。
私は通常、常に最も単純なソリューションを選びます。この場合、ユーザーが入力する1つの単一フィールドです。
4ボックスのような分割フィールドを使用すると、ユーザーに追加の認知的負荷が加わります。
- 「手動で各フィールドにジャンプする必要がありますか？」
- 「システムは私のためにそれをしてくれますか？」
- 「自分で
tabを押したが、フォームが自動的にジャンプした場合-代わりに3番目のフィールドにジャンプした場合...？」
これらの余分な質問はすべて、おそらくは意識下にあり、おそらく彼らの頭の中ではもっと前線にあるものですが、単一のフィールド形式で検討されることさえある質問ではありません。
確かに、4フィールドのオプションは読みやすさを向上させるため、ユーザーが間違った番号を入力した場合は、エントリを読み直して、自分が間違っていた領域を確認するのが簡単になります。しかし、これは単一の分野でまだ軽減できます。上記で示したように、単一フィールドにスペースを含むユーザー入力をレンダリングできます。
もう1つの考慮事項は、モバイルユーザーです。デスクトップではシンプルな場合もありますが、携帯電話にはフィールドに入るときに開閉する必要のあるキーボードがあります。デバイスやOSによって動作は異なりますが、フィールド1からフィールド2にジャンプすると、キーボードが自動的に閉じて自動的に開き、画面に不快なフラッシュが発生し、ユーザーがキーボードを閉じると5番目の数字をクリックしようとする可能性があります。 、それによってカーソルを画面の別の領域に完全に移動するか、その数字を入力から完全に欠落させます。
このモバイルの問題は Baymardブログ にうまく示されています。モバイルユーザーは手動で各フィールドに入力する傾向があることも指摘しています。デスクトップユーザーはそれほど頻繁には行いません。
あなたの提案はいいアイデアですが、私はそれが「オーバーエンジニアリング」のカテゴリーに入ると思います。単一のフィールドでの重大なユーザー入力エラーに気付いていない限り、別の方法を紹介する必要はないと思います。使いやすさを改善する代わりに、使いやすさを低下させるリスクがあります。
この答え と この答え はいくつかのポイントをうまくカバーしていますが、何らかの理由で自動入力のサポートについて誰も議論していません。
4つの別々のフィールドを使用しないでください。
- 最初に、それは迷惑です、それらの理由の多くは他の答えでカバーされています。
また、CC番号は4桁の4つの数字ではなく、1つの長い数字です。一部のクレジットカードには4つのグループさえありません。その場合、4つのフィールド入力は意味がありません。たとえば、次のようになります。
![enter image description here]()
私が追加したい本当の1つは、いくつかのブラウザがあなたのためにクレジットカード情報を記入するオプションを提供することです。 たとえばChrome にこの機能があり、iOS 8のSafariは これらのフィールドにカメラ対応の「クレジットカードのスキャン」ボタンを自動的に追加します 適切に作成した場合（参照その記事）。したがって、UXの観点から見たreal「完全な」CCフィールドは、適切なフィールド名（「クレジットカード番号」など）と適切なブラウザ固有のトリガー属性（お気に入り
autocomplete="cc-number"およびid="cc_number"）。
このために独自の「便利な」入力メソッドを発明しようとしないでください。ブラウザー開発者はすでに改善のために努力しているため、既に一般的に使用されているものと同じ標準のクレジットカード番号の入力方法（単一フィールド、適切な名前と属性）に固執するこれらの種類のフィールドのUX。ブラウザ側で処理できるようにし、ユーザーに、Niceのすべての機能を壊すリスクを伴う不便なものではなく、慣れ親しんだものを与える彼らのお気に入りのブラウザは通常それらを与えます。
たまたま仮想クレジットカードを使用する人として、私は単一の分野を強く支持しています。支払いをするたびに、バンキングアプリによって新しいカード番号が生成されます。1回ではなく4回コピーして貼り付けるのは非常に面倒です。ここでは、最初の1桁に16桁を貼り付けた場合、フォームが4つのフィールドに入力されないと想定しています。でしょうか？
また、信じられないほど使いづらい4フィールド設計もいくつか見ました。時々押す Backspace 他のケースでは、タイプミスのあるフィールドに戻る必要がありました Shift+Tab 必要でした。ジャンプしたフィールドのテキストが事前に選択またはクリアされている場合があるため、キーを押すたびにフォームを観察しないとフォームの動作を予測することは基本的に不可能でした。
カード番号を貼り付けることができるフィールドを1つだけ指定して、使用させてください Backspace 番号を手動で入力した場合にタイプミスを修正します。 ここ は許容できるように見えます：
$('#test_form').on('keyup', function(e){
var val = $(this).val();
var newval = '';
val = val.replace(/\s/g, '');
for(var i=0; i < val.length; i++) {
if(i%4 == 0 && i > 0) newval = newval.concat(' ');
newval = newval.concat(val[i]);
}
$(this).val(newval);
})
絶対的に最善とは限りませんが、最も単純なソリューションは、ユーザーが数字の文字列を入力できる単一のクレジットカードフィールドおよびスペースです。結果の数字列が有効なクレジットカード番号であるかどうかを確認する前に、サーバー側ロジックが送信された文字列からスペースを削除することは簡単です。ユーザーが先頭または末尾のスペースを入力することを選択した場合、またはカードの内容とは異なる場所で数字を分割することを選択した場合、何ですか？
ユーザーのためにスペースを自動的に挿入することは、少しユーザーフレンドリーになるかもしれませんが、かなり多くの作業です。
1つから次への自動タブを備えた複数のフィールドは問題ありませんが、Mastercard/Visa以外のカードを使用する場合、カードタイプのフィールド長を調整するのは大変です（たとえば、4、6、5、0 Amex）オンザフライ（つまり、ブラウザ側のスクリプト）。カード会社のWebサイトでは、定義上、1種類のカードしか使用しないので、それは明確で簡単です。 [編集：OKっぽい。他の回答は、なぜそれが一部のユーザーにとって不利益であるかを示しています]
ユーザーがスペースを入力することを拒否することはユーザーに敵対的です。ユーザーがスペースを入力できるようにして、送信後に（正しい！）カード番号を無効として拒否することは、その時点で小売業者が私の習慣を拒否し、代わりに以前は2番目に選択した人から購入する可能性があるため、本当に嫌です。
効率的なフォームの作成に関する優れた洞察を持つUXエキスパートであるLuke Wroblewskiがこの質問に回答しました： 単一の数値入力フィールドを使用してください （ここに これがどのように機能するかのビデオ ）。
上記のZacharyのデモのビデオでわかるように、単一の入力フィールドを使用して、最初にクレジットカード番号を取得します。クレジットカード番号が無効である場合、ユーザーが先に進むのを妨げるエラーが表示されます。クレジットカード番号が有効な場合、一般的なクレジットカードのアイコンが変化し、入力したカードの種類が反映されます。これにより、別のクレジットカードの「タイプ」ドロップダウンまたはセレクターが不要になり、エントリが理解されたことを誰かに安心させることができます。
クレジットカード番号が検証されると、左にスライドして最後の4桁だけが参照できるようになり、次の入力セット（有効期限、CVV（セキュリティ）コード、郵便番号）がマスクに表示されます。これらはすべて数値入力であるため、0〜9のソフトキーのセットで、人々がキーボード上を移動し続けることができます。
クレジットカードの有効期限を過去または遠い将来のものにすることはできないため、定型入力を使用すると、間違いを防ぐことができます。無効な月または年は受け入れられません。有効期限が追加された後、Squareのデザインはもう1つの優れた機能を備えています。クレジットカードのアイコンが変わり、CVVコードが支払いに使用されている特定のカードのどこにあるかが表示されます。この細かい部分は、次に必要な情報を知る手助けとなります。
CVVとZipも数値入力であるため、支払い入力プロセス全体を通じてダイヤルパッドから離れる必要はありません。複数のフォームフィールド間をジャンプする必要はありません。 Zacharyはまた、人々がキーボード（タブとシフトタブ）とマウスを使用して、この支払い入力マスクのさまざまな部分の間を移動できることを確認しました。
他の人のアドバイスに従ってください、そして、車輪を再発明しようとしないでください。お支払いカード番号を管理するISO標準 ISO/IEC 7812 を読んで理解していない限り、そうではありません。入力の検証に使用できるチェックディジットを含めます。
ほとんど何もない場所にスペースを挿入することは、ほとんど常に悪い考えです。対処する必要があるすべての可能な組み合わせを考えてください。自動入力、自動入力に使用されます。スペースなしで貼り付け、スペース付きで貼り付け、他の場所で使用するために切り取り（カットにはスペースを含める必要がありますか？）、入力し、編集し、最終的に解決しようとしている問題は何ですか？
カードの追加に関しては、 Card.js が私のお気に入りのユーザーエクスペリエンスだと思います。非常にすばやく入力できる（単一フィールドなど）だけでなく、特定のカードのそれらのフィールドの場所も表示されるので、有効期限やCVVの場所を気にする必要がありません。ぜひチェックしてみてください。
私が信じていないマイナーな余分な点は他の場所で扱われています：特にアクセシビリティツールの完全なスイートのないシステムでは、単一のボックスがよりアクセシブルです：
- ウィンドウがズームされた場合は拡大縮小します（ブラウザウィンドウをズームしただけでカーソルが細い線のままになり、見つけにくい場合があります。Firefox/ windowsでこのページをテストすると1ピクセル）
フィールド間のタブ移動は適切に動作します（shift-tabを忘れないでください）。
これはもう本当ではないかもしれませんが、一部のスクリーンリーダーはラベルのない入力ボックスで苦労していました-これはまだ音声入力テクノロジーの場合かもしれませんが、私はそれらを使用していません。
私はあなたに言っているわけではありませんできない個別のボックスでアクセス可能な（および標準に準拠した）入力を作成しますが、単一のボックスの方が非定型のインターフェースを必要とする（または必要とする）ユーザーにとっては簡単です。
神の愛のために第二の選択肢を行わないでください。
巨大なUXの欠陥の1つ（これを実装するときに大多数のサイトが行う---シャッター）は、以前に数値を編集するために戻ることはできません。データを出力します。
複数のフィールドを作成すると、さまざまな情報を入力しているように見えることを忘れないでください。あなたのデザインでは、それは潜在的に最後のフィールドが「セキュリティコード」のためであるように見えます。
1つのフィールドにすることは、1つのチャンクの数字を意味します（ただし、オプション1で行ったようにしてください。インデントは、カードとまったく同じ形式を示すためです）。
クレジットカードの詳細を入力するときは、実際のカードのデザインに近づける必要があります。これは、ユーザーがカードをスキャンして、調べたばかりの情報を調べて追加できるためです。何かを混乱させると、混乱とフラストレーションが発生します（eコマースの世界で長年働いた経験から）。