Daily UI #002 - Credit Card Checkout

架空のECアプリのクレジットカード支払い画面のUIをデザインしました。

情報設計

・クレジットカードの登録は特にユーザーにとって面倒だと感じる可能性の高い作業なので、カメラでの読み取り機能とカード情報の保存機能を取り入れました。

・支払い方法選択の画面でも支払い金額を明示し、右の矢印をクリックすると商品の詳細が出てくるようにしています。

デザイン

・チェックアウトはユーザーが踏まなければいけないステップが多いので、トップの部分で今チェックアウトのどのステップにいるのか、何が完了しているのかがわかるビジュアルを入れました。

・使用可能なカードのアイコンをロゴで表示し、一目でどのカードで登録できるか判断できるようにしました。