Credit Card Check Out

Daily UI チャレンジ #002

今回はiOSを意識して、フライトチケット購入時のクレジット決算画面を作りました。

決算中に予約を試みているフライト情報が正しいかどうかチェックできるように、トップにフライト概要をいれました。ユーザーは下向き三角形をクリックすることでフライト全ての情報にアクセスできるようになっています。

フライトを予約することで様々なステップを踏むと思うので、現在プロセス内のどこにいるのか分かるようにインディケーターを入れました。

クレジットカードの月と年はドロップダウンで選択するより直接入力が早いと思うので、フリーフォームにしました。2桁づつ入力なので記入例を入れ、ユーザーにわかりやすいようにしました。

セキュリティコードの隣にあるアイコン画像は記入されたカードによって変わる仕組みです。見て分かる画像があることで、見つけにくいセキュリティコードも探しやすいかな、と思い入れました。

チェックアウト中は、常にユーザーは記入した情報や選択した情報が正しかったか確認したいと思うので、「戻る」ボタンを一番下に入れました。また、ボタンをあえて置くことで「戻っても今入力されたデータはセーブされますよ」と言う旨を伝えるのも狙いです。