UX-design #Day16（メルカリ） #5

【UI/UXの観点から気づいたこと】

• ヘッダー部分はシンプルですね。見出し＋アイコンです。支払いは検索もしないですし、特に通知なども必要ないので、このくらいシンプルがいいんですね。この歯車はおそらくメルペイについての設定かなと予想してタップしましたが、予想通り！！安心しました。
• カードUIの部分ですが、この「タッチして表示」というアクションを一回挟むのはなぜだろうとおもいました。表示されていたらいいのにと。でも支払いの意思がないのに表示されていて間違えて支払ってしまったということがないようにということでしょうか？あるいはセキュリティーの問題でしょうか？このボタンの後ろにバーコードが薄く表示されているので、タップすることでバーコードが表示されることがわかりますね。この左の画像の通り、タッチして表示の後ろに何もない（真っ白の状態）だと何が表示されるかわからない。少し出したいものを見せておくのは大事ですね！
• この画面にある、赤色。最初は全部同じ色かなと思っていたのですが、「タッチして表示」と「あと払いにする」というボタンの赤色が違うhexコードでした！！「タッチして表示」はprimary colorだったので、こちらの方が重要度が高いようですね。
• この画面の上下で背景色が違うということで２つの役割があることがわかりますね。上は今の支払いに直接関係があって、下は今の支払いに直接関係ないコンテンツですね。背景色で分けるの良いなと思いました。
• 最近のご利用の￥100と書いてある部分がなぜ、ボタンになっているんだろうと思いましたが、このボタンを押すと支払いの詳細が見えるんですね。ちょっとこれは予想できなかったです。意外と色とボタンになっているのが目立ちますが、これはそこまで目立たせなくて良いかなと思いました。私ならボタンをFillではなくoutlineにするかなと思います。