【DailyUI】#002 Credit Card Checkout|
こんにちは！年末年始休暇2日目のmatchaです。
連休の幸せを噛みしめてます、年内の大掃除は諦めました。
やりたいことが多すぎて！時間が足りない！！
ということで、さくっとDailyUI2日目をやります！
DailyUIチャレンジでの個人ルール
ツールはFigmaを使う。
ミニマルデザインを意識して作成する。
制限時間を設ける。お題によるが、大体1~2時間を目安にする。
未完成でも70%の出来でもnoteに記事を書いて、やったことを残す。
ただ作っただけにはしない。作成過程で１つは学んだことを残せるようにする。
残業・体調不良などで時間がなければ休んでも良い。
デザインする際に考えたこと、気をつけた点など
表示する項目
名義
カード番号
日付（有効期限）
セキュリティコード
利用可能カードの種類
表示項目を洗い出す際に考えたこと
カード番号のinputは１つにするか、複数に分けるべきか？
分けた方が入力と確認はしやすい印象がある。
プレースホルダーにはinputに合わせて、「0000」などのフォーマットを表示する。
セキュリティコードについて、ヘルプアイコンなどで説明を表示するべきか？
クレジットカードを使い慣れていない場合は何のことか分からない可能性があるので、あった方がユーザーには優しいはず。
有効期限は１つのinputにするか、月／年を分けて入力させるか、ドロップダウンリストで選択させるか？
カードタイプ（VISAなど）の選択項目は必要か？
既存サービスも様々ある。選択する項目は少ない方がユーザーの離脱率は低くなりそうなので、今回はなしにする。
使用する決済サービスやバックエンドによって変えるで良いかも。
デザインを作成する際に調べたこと
カード番号のinputは１つのパターン、複数表示パターン、スタイルで１要素に見えるが入力要素は複数に分けられているパターンが多い印象。
一つの場合は、フォーカスが離れたタイミングで「XXXX-XXXX-XXXX-XXXX」のフォーマットに表示が変わるパターンあり。
プレースホルダーには「カード番号」か「0000」のようなフォーマット表示が多い。
カードタイプは選択項目があるパターンとカード番号から判定して表示するパターンを見た。
ユーザーが選択する必要ない後者の方が使用感が良い印象。
有効期限は1つのinputの場合と年月が分かれているinputまたはドロップダウンリストのいずれかが多い。
参考サイト
楽天
Amazon
iPhone > 設定アプリのクレカ登録画面
dribbble > 「credit card checkout ui」で検索
作成したデザイン
ヘルプをタップで、説明のポップアップを表示する想定です。
例：カード名義はカードの表記通りにご入力ください。など
学んだこと・反省点など
各サービスで、基本のカード番号・有効期限・セキュリティコード以外に細かい差があった。
カード番号はハイフンなしで入力するUIがほとんどだった印象。
入力内容の説明については、UI/UXで視覚的にユーザーに示すパターン（プレースホルダーにフォーマット表示）と、input前後に文章で説明するパターンを確認した。
例・文章で説明するパターンは分かりやすく丁寧な印象だが、クレジットカードの使用・半角/全角入力などに慣れている場合は不要そう。全年齢対象とする場合には必要と感じた。
10、20代が好みそうなおしゃれなUIだと説明はなし、シンプルにタイトル・inputのみが多い。
全ての情報が必須項目だったため、「必須」などの表記はしなかったが、他にも入力項目がある場合はつけるべきなので、後から修正する必要が出ないようにつけておいてもよかったかも。
お金が絡む画面なので、画面更新による二重送信などの注意文言も表示する必要はあるかもしれない。
おわりに
作成時間は1h15minほどでした。
個人的にはわりと利用する機会があるクレカ決済画面ですが、入力が面倒になるUIにたまにあたるので、その辺どうしたら使いやすいかな…と考えて作れたかなと思います。
とはいえ、ある程度は大手サービスのレイアウト・表示項目を踏襲しつつ、バックエンド側と相談で調整していくのが良さそうだなと感じました。
実際に案件として対応するとしたら、レイアウトよりもリクエストやエラー処理などに苦戦しそうなので、既存の決済サービスなども上手く利用したいですね。。
ここまでお付き合いありがとうございました。
スキやコメントでフィードバックいただけるととても嬉しいです！
お時間があれば、よろしくお願いします！！
この記事が気に入ったらサポートをしてみませんか？