MENU

DailyUI 002|振り返り

こんにちは。

今回は、DailyUI002 Credit Card Checkout(クレジットカード決済画面)の振り返りをします。

目次

DailyUI002 Credit Card Checkout

今回は、服のECサイトの決済画面で、クレジットカードを登録する画面を作成しました。
1枚目の画面で「クレジットカードを追加」を押すと、2枚目のクレジットカード登録画面がポップアップ形式で出てくる想定です。

参考にしたサイト

・zozotown
・UNIQLO

意識したポイント

・注文までのプロセスで今どこまで終わっているのかがわかるようにした(全体像がわかるとアクションしやすいため)
・クレカをカメラで読み取る機能があると入力の手間が省けていいなと思ったので、スキャン機能推し。スキャン機能に大きなスペースを取っている
・カートの合計金額がわかるように下部に表示させた
・入力したカード情報は、再入力の手間がなくなるよう登録できるようにしている

指摘された点・反省点

・「このカート情報を登録する」の文言の位置が少し浮いて見える。真ん中揃えにした方が綺麗かも
・入力エリアの部分に、「半角」などのガイドを入れた方が親切だったと後から思った

今回、結構参考サイトをよく見て考えて作ったので、こんなにシンプルな画面なのに5時間くらいかかってしまった。。もう少しサクッとできるように工夫していきます。

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる