Daily Cocoda! #25

デザインを独学しております。ぼいです。

デザインに関してインプット・アウトプットできるCocodaさんにて、UIデザインのお題をこなすDaily Cocoda!(Daily UI)をやっております。

今回のお題は決済アプリのリワードモーダルでした。

まずリワードモーダル（Reward Modal）って何？😇

モーダルって、ポップアップみたいにヒョコって出てくるやつですよね？と思って一応調べたら、どうやら提示されている操作を完了させないと別の操作ができるなくなるウィンドウのことを指すらしい。
なるほど、ちゃんと調べるって大事だ。

そんでリワードとは？報酬？褒美？謝礼？
皆さんのお題や投稿を見る限り、どうやら決済完了後の支払い完了！みたいな何かを達成した時の画面のようです。

リワードモーダルとは、ユーザーが達成した目的を褒め称える画面といったところでしょうか。

ちゃんとした定義があったらどなたか教えてください〜。

参考にしたアプリ

LINE Pay, Rakuten Pay, Ali pay, Paypay

製作意図

・このモーダルが何を示すモーダルなのかがすぐわかるように「支払い完了」の文字を一番上に持ってきました。

・いくら支払われたのかも同じくらい大事な情報かと思いますので中央に持っていき、「支払い完了」と「1980円」この二つの情報が一番目立つように文字を大きくしました。

・支払先とか、詳細は情報の優先度が低いと考え文字の大きさは控えめに。

・支払い完了した感を演出するために、イメージを添えました。

・出来るだけ短く簡潔なモーダルを心がけました。

・安心感を与えるために丸みを帯びたモーダルにしてみました。

感想

・達成した時の完了画面て大事ですよね。ゲームとか特にそう思います。音ゲーでコンボ達成した時、ドーパミン出てますし多分。こういう小さな部分がユーザーの使用感に影響を与えると思うと奥が深いですね。

・今画像見ていて#025に"0"が付いていることに気づきました。

・ちょっとプロトタイプも作ってみました。

モーダル

以上！