【自主制作/UI UX】クレジットカード決済画面

OVERVIEW

洋服のECサイトのクレジットカード決済画面

ユーザーの欲求

・できるだけ手間なくスムーズに購入したい

デザインのポイント

・注文完了まであとどれくらいのアクションが必要かわかるよう、上部に今のステータスと全体のステップを載せている

・何の商品がカートに入っていて合計金額がいくらかが前画面に戻らなくてもわかるよう、下部に記載している

・「カード情報を追加する」をクリックすると2枚目の画面がポップアップで開く想定。カード情報の入力は手間がかかるのでスキャン機能を入れている。おすすめ機能なので大きいスペースを取って表示。

・入力ミスなく進めるよう入力例を表記している