DailyUI #002 Credit Card Checkout
DailyUI の第2回目は『Credit Card Checkout』を制作しました。
Credit Card Checkout はクレジットカード決済のことで、今回は EC のカード情報入力画面の UI をデザインしています。
はじめにページ全体の情報としては大きく分けて購入する商品の情報とカード情報の入力欄を設けています。
商品情報を載せている理由は、この画面の役割がカード情報入力であっても、ユーザーにとってこの画面を訪れた目的は商品を購入することだからです。商品購入という一連の体験の目的 (ゴール) を提示することで購入という目的達成までのモチベーションを維持させ途中の離脱を減らすことを狙っています。
入力するカード情報はカード番号、有効期限、セキュリティコード (CVC) の3つです。クレジットカード決済ではカード番号と有効期限が必須となります。セキュリティコードはカードの持ち主であるかというセキュリティの観点で入力を求めています。またその他のカード情報には名義もありますが、名義の情報は必須ではない上に入力の手間がかかるので求めていません。
入力内容にエラーがある際はクレジットカード情報の入力エリア全体を線で囲みエラーがあることを示します。
これはクレジットカード決済に失敗した場合、カードそのものの状態に問題があり特定の入力フィールドの入力内容に問題があるわけではないというケースがあるからです。その為、入力フィールドとは切り離してエラーを表示しています。
今回のデザインではカードそのもののエラーと記載していますが、もし入力フィールドの入力内容に問題があるのであればエラーの内容としてユーザーに示します。
購入ボタンは入力フィールドが全て入力され決済に必要な情報が揃うと有効になります。ただ入力内容が決済をする上で有効な情報であるかどうかは実際に決済サービスに問い合わせないと判定が難しい為、情報が入力されているかのみをボタン有効化の基準としています。
またサービスによっては2回目以降の決済を簡略化する為に決済画面でクレジットカードの情報を保存できるものもあります。今回はその保存機能は設計しませんでした。クレジットカード情報の取り扱いは改正割賦販売法で定められています。その為、どんなサービスでも実装できる機能ではない点で今回はつけておりません。
以降は各入力フィールドのポイントを紹介します。
カード番号入力フィールド
カード番号入力フィールドです。下記のサンプルで実際の動作を再現しています。
使えるクレジットカードの種類をアイコンで表示しています (デザインでは闇雲にアイコンを並べてしまったのでサンプルでは一部のカードの種類だけにしています)。アイコンの表示は入力内容に合わせて状態を変化させています。これはクレジットカードの種類毎にカード番号のルールが決まっており、入力されたカード番号を入力したリアルタイムで判定しています。各クレジットカードの種類別のカード番号は下記になるので実際に入力してみてください。
| 種類 | カード番号 |
|---|---|
| 4から始まる16桁 | |
| 35から始まる16桁 | |
| 5から始まる16桁 |
入力されたカード番号は実際のカードに記載されているのと同じように特定の桁数毎に自動で区切られるようにしています。今回サンプルで実装しているカードはいずれも「4桁 4桁 4桁 4桁」の区切りになっていますが、カードにより区切りは異なります。こちらもアイコンと同じくカード番号から種類を判定し区切るようにしています。
有効期限入力フィールド
続いて有効期限入力フィールドのアイディアです。こちらのサンプルも実際に入力を試すことができます。
有効期限入力フィールドの入力形式は実際のクレジットカードに揃え「MONTH / YEAR」にしています。このフィールドもカード番号入力フィールドの区切りと同じように「 / 」部分を自動で補完します。
セキュリティコード入力フィールド
セキュリティコード入力フィールドです。この入力フィールドは input 要素に処理をしていないのでサンプルは割愛します。
クレジットカード決済に慣れないユーザーにとってはセキュリティコードが何かわからない可能性もあるのでツールチップを用意します。
セキュリティコードはクレジットカードの種類により表記が CVC や CVV 等異なり、かつ実際の記載もわかりやすく書かれているわけではありません。その為、セキュリティコードがカードのどこに記載されているコードかクレジットカードの種類毎にヒントを出します。
セキュリティコードのヒントはクレジットカードの種類により異なり情報量が多くスペースを必要とする為、慣れているユーザーの操作性を考慮しツールチップに格納することにしました。
まとめ
今回は EC のクレジットカード情報入力画面の UI をデザインしました。
クレジットカードの情報はお金に関わる大切なものですが、ユーザーにとっては購入という一連の体験の一部に過ぎずむしろ可能であれば入力せずに済ませたいものです。その為、入力項目はセキュリティに考慮しつつも名義のような情報までは求めないようにしています。入力したカード情報についても有効であるかのチェックに外部サービスとの通信が必要であったり、取り扱いに関して法的な制約がある点も動作や機能の設計時に注意が必要です。
またユーザーはカード情報を入力するにあたりクレジットカードの実物を見ながらその情報を入力します。そこで入力形式を実際にクレジットカードに表記されている形式に合わせることでユーザーがそのまま入力できるように し迷わず操作できるようにしています。
ユーザーが商品を購入するにあたりクレジットカード情報入力が最後の操作になるケースが多くあるので、最後まで使いやすい UI で気持ちの良い買い物を設計したいです。