【ECサイトのEFO】クレジットカード情報入力欄で気をつけたい5つのこと

購入フォームでは欠かせない存在のクレジットカードによる決裁。
本日はクレジットカード情報の入力欄で気をつけたい、EFO的改善ポイントをまとめてみました。

目次

項目の順番、フォーマット、大きさを揃える

クレジットカード情報を入力するとき、多くのユーザーが実物のカードと照らし合わせながら入力していると思います。
この時、実際に書かれているカード上の情報とフォームの入力項目を可能な限り似せると入力がスムーズです。

具体的には、下記のような点に注意すると良いと思います。

項目の順番

項目の並ぶ順番は、できるだけカードにあわせましょう。
すべてのカードが同じとは限りませんが、多くの会社が
(1)カード番号
(2)有効期限月
(3)有効期限年
(4)名義人
のように上から並んでいることが多いのではないでしょうか。
とくにもっとも間違いやすい有効期限の月/年は横並びにし、左右を入れ替えることのないように注意したいですね。

フォーマット

順番だけでなく、フォーマットもカードに合わせましょう。
具体的には、有効期限の月/年は、「2月」「2016」のようにせず、いずれもカードと同様に2桁の数字で表すようにしたいですね。

入力欄の大きさ

2桁の数字が入る所、16桁の数字が入る所、等、入力内容のボリュームにあわせた大きさのフィールドを用意しておくことで、ユーザーの余計な戸惑いを防ぐことができます。

入力例を表示する

クレジットカード情報には、必ず入力例を表示すつようにしましょう。
また半角数字や半角大文字アルファベットなど、入力形式の縛りが多いのもクレジットカードの特徴。必ず入力形式に対するエクスキューズを用意しておくようにしましょう。

る

楽天のクレジットカード入力欄。かなり補足説明が充実している。

入力形式については、「半角全角自動変換」「入力モード自動変換」「リアルタイムアラート」などの入力支援機能を使用するとより親切です。

対応するカード会社のロゴを掲載

どの会社のカードが対応しているかどうかは、テキストではなくロゴ画像で表示すると、直感的に理解できます。

card_m_all

セキュリティコード欄は親切に

ヵードの裏に書かれた数字の語尾3桁は「セキュリティコード」といい、カードを実施に所持しているかどうかの確認に使用されます。
しかし「セキュリティコード」と言われてすぐにそのことを連想できる人ばかりではありません。必ず説明を入れるようにしましょう。

できれば下記のようなイラストや図が挿入してあると最も理解がスムーズです。

リコー社のセキュリティコード説明の例。図があることで直感的な理解が可能。

リコー社のセキュリティコード説明の例。図があることで直感的な理解が可能。

送信の安全性をアピール

その他、セキュリティの安全性を視覚的に伝えることが、ユーザーに安心感を与えます。
具体的には、他のエリアとデザインを差別化したり、近くにセキュリティバッジを表示するなどの方法が有効です。

詳しくは下記の記事で取り上げていますので参考にしてみてください。

海外EFO記事:89%が間違い!クレジットカード入力欄の視覚的強化
https://f-tra.jp/blog/column/5100

最後に

いいかがだったでしょうか。
本日はクレジットカート入力欄で気をつけたいEFOポイントを5つ、ご紹介しました。
ECサイトのご担当の方は、ぜひご自身のフォームをチェックしてみてください。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です