Daily UIデザイン #027 支払い画面
おはようございます。
支払いってドキドキするし、イライラするし、とにかくエモーショナルになる瞬間だなと私は思います。エモいとは決して言えませんが、とにかくなんかしらの感情が動く時。
今日のお題はこちら。
クレジットカード入力の場面って結構ストレスフルだったりします。そんなストレスを解消できるようなデザインを作っていきます。
完成品はこちら
コンセプト
●ペルソナ
・初めて決済アプリを使う
・25歳
・何事にも慎重
・都内在住
・キャッシュレス化したい
・ミニマリストに憧れ
・履いている靴はNewBalance
●機能面
・カードはカメラで読み込み
・フューチャー感
ユーザー課題の想像
・早く決済を済ませてしまいたい
・入力が面倒
・エラーが何かわからない時がある
・新しい支払い方法を体験したい
エラーが明確なUIは頑張ろうって気持ちになるので、今回は頑張ってエラー画面も作りました。
使ったフォント・色
●フォント
Grey…近未来な雰囲気のこのフォントをメインに。どうせ読まないような飾りの文字にGreyを使いました。
Montserrat…その他の読む必要のある文字にはこれを採用。
●色
ブルーがベースで黄色をアクセントカラーにしました。カードの色もフューチャー感を出すためにグラデ仕様にしています。
制作にあたっての工夫点
・支払い方法を複数登録できることを、複数枚カードを並べることで表現
・支払いが準備できたら「PAY NOW」のボタンの色がはっきりとした色に変わる
・エラーが起こったらすぐにトライできるように、エラー理由とタップして戻れるように導線を作った
・手入力の場合も一眼でわかるようにした
指紋認証やQRコード認証にしても、最初のステップとして必ずカードの入力は必須になるので、このカメラ読み取りタイプだと、実際に使っている身としても楽ですよね。このタイプの形式じゃないと、めんどくさいからやめとこって思った時も実際にありました。
いかにユーザーから煩わしさを取り除くってことが大切ですよね。
振り返ってみての改善点
・よくわからない背景になってしまった…
・エラー時の文字が背景色に負けて見えづらいかも。
・遠目で見ると、カード情報の文字色が見えづらい。
制作時間1時間30分 15分構想 1時間15分制作
