スクリーンショット_2018-08-20_17

Daily UI #002 Credit Card Checkout

遅延気味なので、今日はもうひとつ。
#002は「Credit Card Checkout」クレジットカード決済の画面です。

Credit Card Checkout
Hint: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc. (It's up to you!)

こちらも所要時間は30分ぐらい。
決済画面は初めてだったので、少し難しかったです。
カラーミーとかMakeShopとか、モール系のCMSの決済画面をイメージしてみました。

気をつけたこと

1. 現在地とゴールが見える
決済UIと直接関係ないとこですが「あと何ステップで終わるのか」がわからないと不安かなと。

2. ショップのデザイン、コンセプトを壊さない
すごくオシャレなECサイトで商品を選んで、ウキウキして決済ページに進んだら一昔前のナビゲーションが出現してウワーってなることよくあるんです。w
決済システムなので機能重視は当然ですが、ダサいとショップのイメージを崩してしまうので、極力シンプルに。

3. 「戻る」と「進む」のコントラスト
どれだけラベリングでフォローしても、同じようなボタンが2つ並んでると、押し間違えるユーザーはいるはず。
思い切って前の画面に戻るボタンはリンクにしてみました。
「この画面の入力内容は保存されます」とかも書いておいた方がよかったかな。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでくださりありがとうございます!

気が合いますね ( ˘ω˘)
4

niri

某Webサービスの UXデザイナー。毎日の学びを残す場所。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。