現金は直感的に把握できる?直感的に感じ取れる支払いのデザインQRコード決済でのUI改善のアイディアとして、先日以下のようなプロトタイプを作成しました。https://www.behance.net/gallery/77099891/Payment-Interaction-Concept-Adobe-XD-Auto-animateQRコードを表示してから支払いが完了するまでのインタラクションの試作です。この記事ではデザインの意図や目的、前提としたQRコード決済での課題点について説明します。QRコード決済への心理的な壁2019年現在、大規模な割引キャンペーンの実施や対応店舗の拡大によって、QRコード決済を中心としたスマホでのキャッシュレス決済の利用が急速に広がっています。様々な理由で抵抗を感じている人も少なくないようです。MMD研究所の調査によると、QRコード決済を利用しない理由として、以下のような点があげられています。今回は「お金を使いすぎてしまいそうだから」という理由に注目し、デザインによってその印象を軽減できないかを検討します。QRコード決済と比較して現金には以下のような特徴があります。自分が支払ったことを直感的に把握できるつまり、現金は物質的で直接性があるために直感的な性質を持っていると言えそうです。ここでの「直感的」は「思考に頼らずとも瞬時に感じ取れる」と言い換えることができます。QRコード決済には物理量の変化や直接的な交換は伴いません。支払いは商品を受け取るレジで発生するのではなく、ネットワークを介して複数のデータベースでの値の変更として間接的に生じます。した処理は目に見えず感触もないため、利用者がお金を使っている実感が生まれず、「お金を使いすぎてしまいそう」という印象に繋がっているのではないかと推測しました。よって、物質性のない間接的な支払い行為に対して「思考に頼らずとも瞬時に感じ取れる」性質を与えることをデザインする上での課題としました。直感的に感じ取れる支払いのデザイン冒頭のプロトタイプの動きを順に見ていきます。画面の中央にカードの形状をしたウォレット。ウォレットには残高が表示される。タップするとウォレットが開き、中からチケットが表示される。チケットにはQRコードが表示されている。店員がQRコードが読み取るとチケットが切り取られ、画面外の店員がいる方向に移動する。チケットが消えた後に決済情報(店舗・代金)を表示。一定時間経過するとウォレットが閉じて元画面に戻る。デザインモチーフとしてチケットの形状を採用しました。QRコード決済では支払いが完了までアプリ内で金額が確定せず、現金そのものはモチーフとして扱いづらかったためです。支払いのためにカードの形状をしたウォレットを選択すると中からチケットが取り出されます。QRコードが読み込まれて決済処理が完了すると、代金が店員に手渡されたことを直感的に把握できるように、チケットが切り取られ画面外の店員がいる方向へ移動するアニメーションを設けています。チケットのモチーフで物質的な印象を、支払い時のアニメーションで相手に直接手渡された印象を与えることで、支払いをしている実感を持たせられないかと考えました。他にもこうしたプロトタイプをBehanceに投稿しています。https://www.behance.net/shingo2000今後もマイクロインタラクションを活用した、こうしたプロトタイプづくりを続けていこうと思います。---つみきでは一緒に働く仲間を募集しています。アプリやWebサービスが好きな方、UIが好きでじっと観察してしまう方、お話ししましょう。Mid-career募集要項をみるTwitterでもインタラクションデザインやUIデザインについて発信しています。(@shingo2000)ダウンロード#デザイン#お金について考える#UIデザイン#キャッシュレス#QRコード決済#プロトタイプ#インタラクションデザイン#マイクロインタラクションこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートをする「スキ」を押してクリエイターを応援しよう!わーい。UIを考えたりコードを書いたりします。「クレカ怖い」タイプの人は、プリペイド式のやつがオス...134けんすう『UXトレース』で、新メルカリをゴリゴリ掘り下げてみた92Yudai楽天イーグルス、ヴィッセル神戸ホームスタジアムでの支...6橘大地メルペイデザインチームがつくるのは、新しい習慣です。Kimoto)わーい。