Daily UI #002 (Credit Card Checkout)
Daily UI 2日目のお題は「Credit Card Checkout」。
クレジットカードの決済画面を制作します。
制作過程
約3時間で制作しました。
要件定義
参考にできるサービスの多い、ネット通販での決済を想定しました。
前回忘れていたターゲットも決めました。
リサーチ
前回の反省を活かし、Dribbbleで「creditcard checkout」「Family」などで検索。他に、過去に使ったことのあるサービスも参考にしました。
考察
↑を見ると、大体2種類に分かれていました。
(1)決済手段選択と情報入力の画面が分かれているタイプ
画面が分かれている分、スペースにゆとりが出ます。
(2)決済手段選択と情報入力の画面が同じタイプ
こちらだとより少ない画面数で済みます。
情報量が多い方が練習しがいがあるので、(2)で作ることにします。
また、楽天市場のUIが分かりやすくていいなと思いました。
特に、画面上部の進捗と有効期限の2ヶ所です。
進捗は、この先何をするのか分かるので安心感がありますね。
有効期限が日本語表示なのも、すごくいいです。
時々「MM/YY」みたいに書いてあるやつがあるんですが、いつも月・年どっちか分からなくなるので。
合わせて、画面に含める項目も決めていきます。
ラフ
一旦紙に描きます。ここは割愛。
ワイヤーフレーム
ラフを基に制作したワイヤーフレームがこちら↓
画面上部の進捗のデザインを変えて、2パターン作ってみました。左が個性をだそうと頑張った方、右が分かりやすさを優先した方です。
迷ったんですが、右の方が注文確定前に確認ができるのが分かり、安心感があるかなと思ってこちらにしました。
ビジュアル
もう少し作りこんだのがこちら↓
メインカラーの青はコントラスト比を意識し、見やすい&今っぽい彩度高めの青にしました。
微調整
最後に、余白を調整します。
完成
制作したUIがこちら ↓
アコーディオンメニューで、選択と同時に情報入力フォームが下に出てくる想定です。
画面上部の進捗は、買い物カゴ→入力(支払方法)→入力(住所)→確認→完了を想定しています。
UIのポイント
(1)有効期限の日本語表示
これは楽天市場のデザインをそのまま採用しました。1番迷いの起こらないUIじゃないでしょうか。
(2)お支払い区分
フォームは縦1列に並べた方が入力しやすいとよく聞きますが、クレジットカードで一括払い以外の払い方をするのはあんまり聞かない(気がする)ので、あえて右にして触りずらい位置にしました。
デフォルトで一括払いにしてあるので、ほとんど触らずに済むんじゃないかと思います。
制作してみて
・前回の反省を活かしてターゲットを設定したのは良かったんですが、あんまり活かせませんでした。お題の内容的にもなかなか難しかった気がします。次はターゲット設定+ターゲットに合わせたデザインにまで挑戦したいです。
・やはりオリジナリティが課題。ワイヤーフレームでちょっと違うものを作っては見たものの、結局分かりやすい方を選んでしまいました。個性と分かりやすさが両立するところを見つけられたらな、と思ってます。
この記事が気に入ったらサポートをしてみませんか?