web-dev-qa-db-ja.com

ベストプラクティス:チェックアウト時のカードの有効期限

EコマースWebサイトでのチェックアウトプロセス中にカードの有効期限データを収集するのに最適な形式は何ですか?

したがって、有効期限の月と有効期限の日付を収集する必要があります(すべてのWebカードトランザクションの標準として)。

これはWebサイトでは異なる方法で行われるので、ベストプラクティスを知っておくとよいでしょう。

9
Fraser

Baymard Instituteによって行われたこの領域についてのいくつかの素晴らしい研究がありました 。推奨事項の要約を次に示します(おそらく記事全体を読む必要があります)。

悪い。カードの有効期限フィールドをフォーマットしない方法(ただし、トップ小売業者の40%が行うこと):

  • 2012年3月・完全にオフ。月の名前は解読が難しく、年は4桁ではなく2桁にするのが望ましいです。
  • 3月– 03/2012・12か月の名前は長さが異なるため、月の数字をスキャンするのは困難です。
  • 3 – 2012年3月・月の数字に0プレフィックスは付きません。
  • 3/2012・月の数字に0プレフィックスは付きません。

良い有効期限フィールドをフォーマットする2つの最適な方法:

  • 03/12・これは最も一般的なカードレイアウトであり、仮想フィールドと物理カードの間で1:1のマッピングになりますが、各フィールドには「月」と「年」のラベルを明確に付けてください」。
  • 03 – 3月/ 12・月の名前を追加すると、月と年が混同される可能性は低くなりますが、クレジットカードと1:1で類似するという犠牲が伴います。

この種の情報はテキストフィールド(または、理想的にはドロップダウンメニューではなく数値フィールド)でキャプチャするのが最善であり、ユーザーがカードに表示されている形式で正確な情報を書き写せるようになると、私は常に教えられてきましたカードに。彼らは、簡単な補遺の下部にリンクされた記事でこれに触れています:

注:ドロップダウンの代わりにテキストフィールドを使用すると( Aéropostale および [〜#〜] cvs [〜#〜] を参照)、もちろんほとんどの書式設定を無視できますユーザーがカードに印刷されている値を簡単に入力できるため、この記事で説明する懸念事項。

ただし、このような実装には固有の問題があり、入力のタイプミスや、ユーザーが使用する可能性のあるさまざまなタイプの入力フォーマットをデコードする複雑なサーバー側ロジックの可能性が高くなります。

10
Kit Grose

月の名前と数字の両方を組み込んだ月のドロップダウンを使用する場合は、数字を最初に置いてください。

1 - Jan
2 - Feb
3 - Mar

キーボードを使用している人は誰でも、たとえば5月にジャンプするには「5」

6
Gareth

私は一年前に研究をしました、そしてこれは私が思いついたものです:enter image description here

クレジットカードの有効期限は常に数字です(少なくとも米国では)。また、この地域で慣例があるかどうかを判断するために、私の地域で人気のあるeコマースサイトをいくつか調べました。

私は月と年の両方にドロップダウンを選択しました。

月のドロップダウンには、月の数字と月の省略形の両方が含まれます。クレジットカードは数字のみを使用しますが、月を含めて、ユーザーが正しいフィールドにいることをユーザーに知らせるのに役立ちます(ラベルを省略しました)。

年のドロップダウンには、現在から10年間のオプションが含まれます。クレジットカードは通常2桁の年を使用しますが、4桁すべてを含めました。

ドロップダウンのデフォルト値は「月」と「年」です。

現在の設計は、約1年間運用環境で使用されています。

[〜#〜]編集[〜#〜]

次の記事 は、ユーザビリティテストの裏付けとなる、いくつかの有用な提案を提供します。

6
Emil