クレジットカードの有効期限を入力する最も直感的な方法

Question

したがって、私が検討している2つのオプションは、数か月間のドロップダウンであり、数字の後に省略された月が続きます。 2月2日または数値をMM/YYの形式に分割するテキストフィールド。プレースホルダー付きMM/YY。

有効期限に変換する可能性が最も高いのは、他のオプションです。

HorusKol · Answer

クレジットカードに有効期限はどのように表示されますか？ 05/07

その日付を口頭でどのように伝えますか？ 0507

人々にそれらの行動を再現するものに入力させるのは理にかなっています...

したがって、MM/YYを使用したテキスト入力がおそらく最良です。月を入力した後、スラッシュを自動的に追加し、手動で入力した数字以外の文字は無視します（一部のユーザーはMMYYの代わりにMM/YYと入力するため、MM-YYとMM YYを入力するためです）。

ドロップダウンは、テキスト入力にクライアント側の検証動作を追加したくない開発者向けの遅延実装であり、日付（または部分的な日付）の入力には適していません。

the other one · Answer

一般に、単一の入力メソッドにできる限り従うことが、使い勝手の良いルールと考えられています。ユーザーに不必要にマウスとキーボードを切り替えさせないでください。

このため、クレジットカードフォームではドロップダウンは不適切です。

考慮：有効期限を入力する前に、カード番号の数字をたくさん入力しました。なぜ、これらの最後の4つの数値のドロップダウンに切り替えるのですか

月の名前を選択するドロップダウンは特に悪い習慣です。1月の真ん中の場合、7月の月が何であるかを心から知らない人がたくさんいるでしょう。キュー：順番に数か月をガタガタ音を立てて、あなたの手に頼ります。使いやすさの大きな欠点。

理想的にはカードの詳細を入力することは純粋にタイピングで行われるべきです。効率をさらに向上させるには、あるフィールドへの入力を完了すると、自動的に次のフィールドに移動します（ドロップダウンがさらに悪いモバイルを使用している人にとっては大きな勝利です！）。

モバイルユーザビリティをさらに向上させるには、これらのボックスの標準キーボードではなく「ダイヤルパッド」キーボードを自動的に呼び出すようにサイトを作成します。

http://baymard.com/blog/mobile-form-usability-single-input-fields

Luchadora · Answer

クレジットカード自体に日付が表示される方法にこだわってください。

ユーザーがカードの有効期限を読み取り、それが07/05である場合、ユーザーは入力フィールドに07/05を入力するだけで簡単にできます。

ドロップダウンは、クリックして開いたり、スクロールして日付を検索したりする必要があるため、迷惑です。 2番目の例で示したプレースホルダーMM / YYは、ユーザーにとって明確な例です。これは、ユーザーがクレジットカードで認識する方法で表示されます。月を入力すると、スラッシュが自動的に追加されます。