Daily UI #002 Credit Card Checkout

今回のお題はCredit Card Checkoutです。

今やネットショッピングやモバイルオーダーなど、スマホでなんでも購入できる時代。クレジットカードの情報を1度登録しておけば、次回以降それを選ぶだけでサクッと買えるのでとても便利ですよね。（気軽に買いすぎてしまうからこそ、1か月分のカード利用額に悲鳴をあげたくなる…😂）

まずは参考にいくつかのアプリのクレジットカードの登録画面を見てみました。

交通、旅行、フード、アパレル系を集めてみました。
今まで特に気にしたことがありませんでしたが、見比べてみるといろいろ気づきがありました。

• サービスによって入力項目の違い（名義人名の有無など）

• 有効期限は自分で入力する/ドロップダウンから選択する形式

• 使用できるカードのロゴの表示有無

• デビットカードやプリペイドカードの使用可否の注意書きの有無

• プレースホルダーの内容の違い（カード番号だと以下の通り）

  • 1234 1234 1234 1234

  • カード番号を入力してください

  • 16桁で入力してください

• セキュリティコードの説明方法

そもそも入力項目数がサービスによって若干違いがあるのは全然気が付きませんでした。確かに入力項目が少ないのは入力の手間が省けて楽ではありますが、本当に大丈夫…？って思わなくもないです（笑）
大体は以下の項目を入力してもらうタイプが多そうでした。

• カード番号

• 有効期限

• セキュリティコード

デビットカード等の使用不可の注意書きについて、知人がデビットカードで商品を購入しようとした際にエラーになり、それ以降クレジットカードで試してもエラーになるので問い合わせると「このアプリではデビットカードの利用はできないのでアカウントに対して制限をかけた」という返答が返ってきました。
なんとなくそんな気がしていましたが、だったら最初からそう書いておいてよ～！！となりますし、エラーもそれがわかる内容にしてほしいな、と思いました。理由も告げずにアカウントの制限かけるなんて恐ろしい…。

プレースホルダーの内容の違いに気が付いたとき、「カード番号を入力してください」より「16桁のカード番号を入力してください」や「1234 1234 1234 1234」 のほうが親切で良いのでは？と率直に思ったのですが、

• カード番号：16桁

• セキュリティコード：3桁

が絶対ではないことを知りました😲
例えばアメックスは以下のように異なります。

• カード番号：15桁

• セキュリティコード：4桁

常識なのかもしれませんが、私自身や周りの人でアメックス利用者がいないので全然知りませんでした。なるほど、それなら確かに少数派とはいえ16桁ではないカードが存在するのであれば、「カード番号を入力してください」になりますね。
ちなみにカードのブランドロゴを利用する際はガイドラインがあるので、あわせて確認が必要です。

そんなこんなでいろいろ考えた結果、このような画面になりました。

以下の点を意識して作成しました。

• 利用できるカードブランドのロゴを表示する

• デビットカード、プリペイドカードの利用不可の場合は注意書きとして表示する

• カード番号、セキュリティコードはプレースホルダーに桁数をかかない

• 有効期限は手入力する

• セキュリティコードは入力エリアを他より小さくすることで、3桁（または4桁）の他より短いコードのことだと直感的にわかるようにする

• 全項目入力されるまでボタンは無効化にする

• 数値入力のキーボードと重ならない（これ考慮されてるとキーボード閉じる手間もなく楽に感じる気がする）

有効期限はドロップダウンだとヌルっと1つずれて選択してしまうこともあるのであえて自分で入力する形式にしました。
MMとYYの入力エリアを分けるかどうかは迷ったのですが、個人的にはそのまま連続で4つの数字を入力する（MMを入力したら自動で「/」を表示する）方が若干入力の負担が減ると思い、エリアは分けませんでした。

以上、クレジットカードの登録画面なんてどれも同じでしょ、と思っていたらいろいろと気づくことがあり予定より時間がかかってしまいました😅😅
今後は決済時に意識的にクレジットカードの登録画面を見るようになると思います（笑）